I find the quickest method is to change the Template
of the two styles to adjust the image/look:
<Style x:Name="UnfilledDollarStyle" TargetType="toolkit:RatingItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:RatingItem">
<Border HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock FontSize="30" Foreground="Silver">$</TextBlock>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Name="FilledDollarStyle" TargetType="toolkit:RatingItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:RatingItem">
<Border HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock FontSize="30" Foreground="Green">$</TextBlock>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
In use:
<toolkit:Rating UnfilledItemStyle="{StaticResource UnfilledDollarStyle}"
FilledItemStyle="{StaticResource FilledDollarStyle}" Value="2" />
By editing the Template
, you could use images or whatever you'd like within each RatingItem
.
Of course, you could leave the unfilled style "empty" or completely transparent so that no symbols are shown at all. (To keep consistent spacing around the control, I'd suggest using a fully transparent symbol rather than no content). Here, I've set the Opacity
to 0
:
<TextBlock FontSize="30" Opacity="0">$</TextBlock>