This is a migrated thread and some comments may be shown as answers.

Change Icon Colors

3 Answers 283 Views
Rating
This is a migrated thread and some comments may be shown as answers.
Thomas
Top achievements
Rank 1
Thomas asked on 07 Jun 2016, 11:12 PM
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.

3 Answers, 1 is accepted

Sort by
0
Pavel R. Pavlov
Telerik team
answered on 08 Jun 2016, 08:33 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Morgan
Top achievements
Rank 1
Iron
answered on 10 Jun 2016, 07:45 AM

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>

0
Pavel R. Pavlov
Telerik team
answered on 14 Jun 2016, 11:20 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Rating
Asked by
Thomas
Top achievements
Rank 1
Answers by
Pavel R. Pavlov
Telerik team
Morgan
Top achievements
Rank 1
Iron
Share this question
or