Change Icon Colors

[Thomas]

I'm not quite sure how to change the colors of the filled and unfilled stars. I realize there are properties like EmptyIconStyle, but I can't seem my changes to work.

This is what I've tried (but the app crashes now):

    <my:RadRating IsReadOnly="True" Value="{Binding RatingValue}" FontSize="10">
        <my:RadRating.FilledIconStyle>
            <Style TargetType="my:RadRating">
                <Setter Property="Foreground" Value="AliceBlue"></Setter>
             </Style>
          </my:RadRating.FilledIconStyle>
       </my:RadRating>

I would also be interested in how to change the colors depending on whether dark or light theme has been chosen.

[Pavel R. Pavlov]

Hi Thomas,

I noticed that you have set the TargetType of the customized Style to the RadRating component. Instead it should be set to ContentPresenter. On top of this you may need to set the RadRating.EmptyIconContentTemplate and RadRating.FilledIconTemplateContent properties like described in this article.

Give this a try and let us know if you need any further assistance.

Regards,
Pavel R. Pavlov
Telerik

[Morgan]

It would probably help if that were in the docs for the Style configuration.. I will also add that it actually doesn't "FILL" the actual icon but merely alters the border color, is there another possibility to actually filling the symbol? Setting background color is well fugly.

01.<teli:RadRating Grid.Column="1"

02.   HorizontalAlignment="Right" VerticalAlignment="Top"

03.   Orientation="Horizontal"

04.   FilledIconStyle="{StaticResource FillRatingStyle}"

05.   Value="{Binding Rating}"

06.   RatingDisplayPrecision="Exact"

07.   IsReadOnly="True">

08. 

09. 

10.    <teli:RadRatingItem Content="1" />

11.    <teli:RadRatingItem Content="2" />

12.    <teli:RadRatingItem Content="3" />

13.    <teli:RadRatingItem Content="4" />

14.    <teli:RadRatingItem Content="5" />                        

15.    <teli:RadRating.EmptyIconContentTemplate>

16.         <DataTemplate>

17.              <SymbolIcon Symbol="Dislike"  />

18.         </DataTemplate>

19.    </teli:RadRating.EmptyIconContentTemplate>

20.    <teli:RadRating.FilledIconContentTemplate>

21.         <DataTemplate>

22.              <SymbolIcon Symbol="Like" />

23.         </DataTemplate>

24.    </teli:RadRating.FilledIconContentTemplate>                        </teli:RadRating>

1.<Style x:Name="FillRatingStyle" TargetType="ContentPresenter">
2.    <Setter Property="Foreground"  Value="Gold" />
3.</Style>

[Pavel R. Pavlov]

Hi Morgan,

You can use the FilledIconStyle and EmptyIconStyle properties to set size of the RadRatingItems and the FilledIconContentTemplate and EmptyIconContentTemplate properties to set an Image as the desired symbol. Once you do so you will be able to stretch the image as you need it.

Please give this a try and let us know if you encounter any further issues.

Regards,
Pavel R. Pavlov
Telerik