Change Icon Colors

4 posts, 0 answers
  1. Thomas
    Thomas avatar
    9 posts
    Member since:
    Jan 2012

    Posted 07 Jun Link to this post

    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.

  2. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 08 Jun Link to this post

    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
  3. DevCraft banner
  4. Morgan
    Morgan avatar
    80 posts
    Member since:
    Dec 2009

    Posted 10 Jun in reply to Pavel R. Pavlov Link to this post

    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>

  5. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 14 Jun Link to this post

    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
Back to Top
DevCraft banner