CODEWITHSUNDEEP
xamluwp
Haritha Es
Haritha Es

Reputation: 215

How to set the color for RatingControl stars in UWP?

I have added a RatingControl in my UWP application. How can I set the color for filled and empty stars? Here is the code that I have added: 

<RatingControl x:Name="MyRating" Value="3.5" Width="300" Height="200"  />

Upvotes: 2

Views: 569

Answers (1)

Martin Zikmund
Martin Zikmund

Reputation: 39082

If you check the default style of the RatingControl, you can find the following VisualStateGroup:

<VisualStateGroup x:Name="CommonStates">
    <VisualState x:Name="Disabled">
        <VisualState.Setters>
            <Setter Target="ForegroundContentPresenter.Foreground" 
              Value="{ThemeResource RatingControlDisabledSelectedForeground}"/>
        </VisualState.Setters>
    </VisualState>
    <VisualState x:Name="Placeholder">
        <VisualState.Setters>
            <Setter Target="ForegroundContentPresenter.Foreground"
               Value="{ThemeResource RatingControlPlaceholderForeground}"/>
        </VisualState.Setters>
    </VisualState>
    <VisualState x:Name="PointerOverPlaceholder">
        <VisualState.Setters>
            <Setter Target="ForegroundContentPresenter.Foreground" 
               Value="{ThemeResource RatingControlPointerOverPlaceholderForeground}"/>
        </VisualState.Setters>
    </VisualState>
    <VisualState x:Name="PointerOverUnselected">
        <VisualState.Setters>
            <Setter Target="ForegroundContentPresenter.Foreground" 
                Value="{ThemeResource RatingControlPointerOverUnselectedForeground}"/>
        </VisualState.Setters>
    </VisualState>
    <VisualState x:Name="Set">
        <VisualState.Setters>
            <Setter Target="ForegroundContentPresenter.Foreground"
                Value="{ThemeResource RatingControlSelectedForeground}"/>
        </VisualState.Setters>
    </VisualState>
    <VisualState x:Name="PointerOverSet">
        <VisualState.Setters>
            <Setter Target="ForegroundContentPresenter.Foreground" 
                Value="{ThemeResource RatingControlSelectedForeground}"/>
        </VisualState.Setters>
    </VisualState>
</VisualStateGroup>

As you can see, the colors are based on resources like RatingControlSelectedForeground, RatingControlPointerOverUnselectedForeground etc.

You can either provide your custom overrides for these as separate resources, or you can edit the style of the control.

Note - empty stars color

Although it is not part of the template, you can customize empty stars color by modifying the RatingControlUnselectedForeground resource.

Resource overrides

You can override the resources on the level of a single rating control, any parent or on the application level.

Override on RatingControl level will apply only to this single RatingControl:

<RatingControl x:Name="MyRating" Value="3.5" Width="300" Height="200" >
    <RatingControl.Resources>
       <SolidColorBrush x:Key="RatingControlSelectedForeground" Color="Red" />
       <SolidColorBrush Color="Blue" x:Key="RatingControlUnselectedForeground" />
    </RatingControl.Resources>
</RatingControl>

You can do the override on any parent, like on the page:

<Page.Resources>
    <SolidColorBrush x:Key="RatingControlSelectedForeground" Color="Red" />
    <SolidColorBrush Color="Blue" x:Key="RatingControlUnselectedForeground" />
</Page.Resources>

Or finally you can put it on application level if you add it in <Application.Resources> in App.xaml. Then it will apply to any RatingControl in the app.

Alternative solution - Custom style

If you want more control and even better customization, you can directly edit the default RatingControl style and its template. Right-click the RatingControl in Designer (or in Document Outline window) and select Edit style, then Edit a copy, set a custom name and location where the style should be placed and confirm with OK. This will create a copy of the default template of the control, where you can edit the VisualState Setter values to match your desired color scheme.

Also note, that you will still have to provide a custom resource for the empty stars (RatingControlUnselectedForeground).

Upvotes: 5

Related Questions