Page 1 of 1

Star Rating bar

Posted: 26 Aug 2015, 16:07
by sfernandez
Simple ProgressBar template to represent a Star Rating bar:

Image
<ProgressBar Width="300" VerticalAlignment="Center" Value="51"
    BorderBrush="#FF905101" Foreground="#FFFF9E25">
    <ProgressBar.Template>
        <ControlTemplate TargetType="ProgressBar">
            <ControlTemplate.Resources>
                <Geometry x:Key="Stars">
                    M16.5,1L20.2,12 32,12 22.6,19 26.5,31 16.5,23.6 6.5,31 10.4,19 1,12 12.8,12z
                    M53.5000648498535,1L57.2000648498535,12 69.0000648498535,12 59.6000648498535,19 63.5000648498535,31 53.5000648498535,23.6 43.5000648498535,31 47.4000648498535,19 38.0000648498535,12 49.8000648498535,12z
                    M90.500129699707,1L94.200129699707,12 106.000129699707,12 96.600129699707,19 100.500129699707,31 90.500129699707,23.6 80.500129699707,31 84.400129699707,19 75.000129699707,12 86.800129699707,12z
                    M127.500194549561,1L131.200194549561,12 143.000194549561,12 133.600194549561,19 137.500194549561,31 127.500194549561,23.6 117.500194549561,31 121.400194549561,19 112.000194549561,12 123.800194549561,12z
                    M164.500259399414,1L168.200259399414,12 180.000259399414,12 170.600259399414,19 174.500259399414,31 164.500259399414,23.6 154.500259399414,31 158.400259399414,19 149.000259399414,12 160.800259399414,12z
                </Geometry>
            </ControlTemplate.Resources>
            <Viewbox>
                <Grid>
                    <Border x:Name="PART_Track"/>
                    <Border x:Name="PART_Indicator" HorizontalAlignment="Left"
                        Background="{TemplateBinding Foreground}" Clip="{StaticResource Stars}"/>
                    <Path Data="{StaticResource Stars}" Stretch="Fill"
                        Stroke="{TemplateBinding BorderBrush}" StrokeThickness="2" StrokeLineJoin="Round"/>
                </Grid>
            </Viewbox>
        </ControlTemplate>
    </ProgressBar.Template>
</ProgressBar>