Customize Microsoft.Phone.Controls.Rating

Question

I need to customize the Microsoft.Phone.Controls.Rating control. Below code creates a template a bit closer but i need to change icons.

<Style x:Key="RatingStyle" TargetType="toolkit:Rating">
    <Setter Property="AllowHalfItemIncrement" Value="True" />
    <Setter Property="Width" Value="100" />
    <Setter Property="Height" Value="20" />
    <Setter Property="FilledItemStyle">
        <Setter.Value>
            <Style TargetType="toolkit:RatingItem">
                <Setter Property="Background"
                        Value="#FF9900" />
            </Style>
        </Setter.Value>
    </Setter>
    <Setter Property="UnfilledItemStyle">
        <Setter.Value>
            <Style TargetType="toolkit:RatingItem">
                <Setter Property="Background"
                        Value="#E0E0E0" />
            </Style>
        </Setter.Value>
    </Setter>
</Style>

My required templates are 2, 1 for place rating and one for average price level (shown by $ sign). below is the image showing my requirement.

Answer 1

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>