This question is locked. New answers and comments are not allowed.
Hello,
Is it possible to change the color of the RadRating control?
For example we use an icon of ■. The empty icon appears gray, while the value appears white. Can this be changed?
Thanks.
Is it possible to change the color of the RadRating control?
For example we use an icon of ■. The empty icon appears gray, while the value appears white. Can this be changed?
Thanks.
3 Answers, 1 is accepted
0
Anthony
Top achievements
Rank 1
answered on 22 Oct 2014, 10:22 PM
Nevermind, figured it out.
For reference here's what I ended up with:
<!-- Obfuscated GP Margin -->
<telerik:RadRating x:Name="GPRadRating" IsReadOnly="True" RatingDisplayPrecision="Exact" AutoGeneratedItemsCount="{Binding Item.gpRatingCount}" Value="{Binding Item.ObfuscatedGPMargin, Mode=TwoWay}" FontSize="17" ValueChanged="GPRadRating_ValueChanged">
<telerik:RadRating.EmptyIconContentTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="■" />
</StackPanel>
</DataTemplate>
</telerik:RadRating.EmptyIconContentTemplate>
<telerik:RadRating.FilledIconContentTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="RadRatingFilledTextBlock" Text="■" Loaded="RadRatingFilledTextBlock_Loaded" />
</StackPanel>
</DataTemplate>
</telerik:RadRating.FilledIconContentTemplate>
</telerik:RadRating>
For reference here's what I ended up with:
<!-- Obfuscated GP Margin -->
<telerik:RadRating x:Name="GPRadRating" IsReadOnly="True" RatingDisplayPrecision="Exact" AutoGeneratedItemsCount="{Binding Item.gpRatingCount}" Value="{Binding Item.ObfuscatedGPMargin, Mode=TwoWay}" FontSize="17" ValueChanged="GPRadRating_ValueChanged">
<telerik:RadRating.EmptyIconContentTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="■" />
</StackPanel>
</DataTemplate>
</telerik:RadRating.EmptyIconContentTemplate>
<telerik:RadRating.FilledIconContentTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="RadRatingFilledTextBlock" Text="■" Loaded="RadRatingFilledTextBlock_Loaded" />
</StackPanel>
</DataTemplate>
</telerik:RadRating.FilledIconContentTemplate>
</telerik:RadRating>
0
Anthony
Top achievements
Rank 1
answered on 22 Oct 2014, 11:12 PM
And here's a way to do it with code behind:
Set your RadRating (class) FilledIconContentTemplate or EmptyIconContentTemplate to = GetRadRatingIconTemplate(...)
private DataTemplate GetRadRatingFilledIconTemplate(string symbol, string color)
{
string markup = "";
markup = "<DataTemplate xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\">";
markup += "<StackPanel Orientation=\"Horizontal\">";
markup += string.Format("<TextBlock Text=\"{0}\" Foreground=\"{1}\" />", symbol, color);
markup += "</StackPanel>";
markup += "</DataTemplate>";
return (DataTemplate)XamlReader.Load(markup);
}
Example call:
radRating.FilledIconContentTemplate = GetRadRatingFilledIconTemplate("■", "red");
Set your RadRating (class) FilledIconContentTemplate or EmptyIconContentTemplate to = GetRadRatingIconTemplate(...)
private DataTemplate GetRadRatingFilledIconTemplate(string symbol, string color)
{
string markup = "";
markup = "<DataTemplate xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\">";
markup += "<StackPanel Orientation=\"Horizontal\">";
markup += string.Format("<TextBlock Text=\"{0}\" Foreground=\"{1}\" />", symbol, color);
markup += "</StackPanel>";
markup += "</DataTemplate>";
return (DataTemplate)XamlReader.Load(markup);
}
Example call:
radRating.FilledIconContentTemplate = GetRadRatingFilledIconTemplate("■", "red");
0
Hi Anthony,
Regards,
Dimitrina
Telerik
Please find an attached project that demonstrates how you can change the color of the Rating control.
I hope this helps. Let us know if you have further questions.
Regards,
Dimitrina
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.