Make a Rating star style button

Every site has a rating section and to make such star shaped buttons is not an easy task.First because its difficult to make the star shape and second its difficult to manage the checked and unchecked states separately. So, to make your task simpler I have made a simple star style rating button.
To manage its states easily I have used toggle button instead of a button.
Checked state:

Here is the code for this button

<style targettype="ToggleButton" x:key="ToggleButtonRate"> <setter Property="Background" Value="#FF1F3B53"/> <setter Property="Foreground" Value="#FF000000"/> <setter Property="Padding" Value="3"/> <setter Property="BorderThickness" Value="1"/> <setter Property="BorderBrush"> <Setter.Value> <lineargradientbrush EndPoint="0.5,1" StartPoint="0.5,0"> <gradientstop Color="#FFA3AEB9" Offset="0"/> <gradientstop Color="#FF8399A9" Offset="0.375"/> <gradientstop Color="#FF718597" Offset="0.375"/> <gradientstop Color="#FF617584" Offset="1"/> </LinearGradientBrush> </Setter.Value> </Setter> <setter Property="Template"> <Setter.Value> <controltemplate TargetType="ToggleButton"> <grid> <vsm:VisualStateManager.VisualStateGroups> <vsm:VisualStateGroup x:Name="CommonStates"> <vsm:VisualState x:Name="Normal"> <Storyboard/> </vsm:VisualState> <vsm:VisualState x:Name="Pressed"> <storyboard> <coloranimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"> <splinecolorkeyframe KeyTime="00:00:00" Value="#FFE8DD5D"/> </ColorAnimationUsingKeyFrames> <coloranimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)"> <splinecolorkeyframe KeyTime="00:00:00" Value="#FFE8DD5D"/> </ColorAnimationUsingKeyFrames> <coloranimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[1].(GradientStop.Color)"> <splinecolorkeyframe KeyTime="00:00:00" Value="#FFE8DD5D"/> </ColorAnimationUsingKeyFrames> <coloranimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[0].(GradientStop.Color)"> <splinecolorkeyframe KeyTime="00:00:00" Value="#FFE8DD5D"/> </ColorAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> <vsm:VisualState x:Name="Disabled"> <Storyboard/> </vsm:VisualState> </vsm:VisualStateGroup> <vsm:VisualStateGroup x:Name="CheckStates"> <vsm:VisualState x:Name="Checked"> <storyboard> <coloranimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"> <splinecolorkeyframe KeyTime="00:00:00" Value="#FFE8DD5D"/> </ColorAnimationUsingKeyFrames> <coloranimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)"> <splinecolorkeyframe KeyTime="00:00:00" Value="#FFE0DA97"/> </ColorAnimationUsingKeyFrames> <coloranimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[0].(GradientStop.Color)"> <splinecolorkeyframe KeyTime="00:00:00" Value="#FFE0DA94"/> </ColorAnimationUsingKeyFrames> <coloranimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[1].(GradientStop.Color)"> <splinecolorkeyframe KeyTime="00:00:00" Value="#FFE6DC6E"/> </ColorAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> <vsm:VisualState x:Name="Unchecked"> <storyboard> <coloranimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"> <splinecolorkeyframe KeyTime="00:00:00" Value="#FFE5E5E5"/> </ColorAnimationUsingKeyFrames> <doubleanimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)"> <splinedoublekeyframe KeyTime="00:00:00" Value="0.991"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> </vsm:VisualStateGroup> <vsm:VisualStateGroup x:Name="FocusStates"> <vsm:VisualState x:Name="Focused"> <Storyboard/> </vsm:VisualState> <vsm:VisualState x:Name="Unfocused"/> </vsm:VisualStateGroup> </vsm:VisualStateManager.VisualStateGroups> <path Margin="3.417,1.167,4.583,1.833" Stretch="Fill" Data="M10.517154,-0.0011976534 L7.3893209,6.1399088 L-0.5438872,6.3009214 L5.8782334,9.6042414 L2.1005144,15.548288 L10.562605,12.083895 L18.373556,15.503559 L15.426895,9.944314 L22.122427,6.3009214 L13.776666,6.2836428 z" x:Name="path"> <Path.Stroke> <lineargradientbrush EndPoint="0.5,1" StartPoint="0.5,0"> <gradientstop Color="#FFE5E5E5"/> <gradientstop Color="#FFE5E5E5" Offset="1"/> </LinearGradientBrush> </Path.Stroke> <Path.Fill> <lineargradientbrush EndPoint="0.5,1" StartPoint="0.5,0"> <gradientstop Color="#FFE5E5E5"/> <gradientstop Color="#FFE5E5E5" Offset="1"/> </LinearGradientBrush> </Path.Fill> </Path> </Grid> </ControlTemplate> </Setter.Value> </Setter> </style>

Styling a Toggle Button

The ToggleButton is a Silverlight control which allows the user to change its state. It is the base class for CheckBox and RadioButton controls but it can also be used as a standalone control.

Unchecked state:

Checked State:

 

Make this button yours here..

<Style x:Key="ToggleButtonStyle2" TargetType="ToggleButton">    <Setter Property="Background" Value="#FF1F3B53"/>    <Setter Property="Foreground" Value="#FF000000"/>    <Setter Property="Padding" Value="3"/>    <Setter Property="BorderThickness" Value="1"/>    <Setter Property="BorderBrush">     <Setter.Value>      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">       <GradientStop Color="#FFA3AEB9" Offset="0"/>       <GradientStop Color="#FF8399A9" Offset="0.375"/>       <GradientStop Color="#FF718597" Offset="0.375"/>       <GradientStop Color="#FF617584" Offset="1"/>      </LinearGradientBrush>     </Setter.Value>    </Setter>    <Setter Property="Template">     <Setter.Value>      <ControlTemplate TargetType="ToggleButton">       <Grid>        <VisualStateManager.VisualStateGroups>         <VisualStateGroup x:Name="CommonStates">          <VisualState x:Name="Normal"/>          <VisualState x:Name="MouseOver"/>          <VisualState x:Name="Pressed"/>          <VisualState x:Name="Disabled">           <Storyboard>            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity">             <SplineDoubleKeyFrame KeyTime="0" Value=".55"/>            </DoubleAnimationUsingKeyFrames>           </Storyboard>          </VisualState>         </VisualStateGroup>         <VisualStateGroup x:Name="CheckStates">          <VisualState x:Name="Checked">           <Storyboard>            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)">             <EasingColorKeyFrame KeyTime="00:00:00" Value="#FFF4F9FC"/>            </ColorAnimationUsingKeyFrames>            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[0].(GradientStop.Color)">             <EasingColorKeyFrame KeyTime="00:00:00" Value="#FFF4F9FC"/>            </ColorAnimationUsingKeyFrames>            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Offset)">             <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.459"/>            </DoubleAnimationUsingKeyFrames>            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Offset)">             <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.888"/>            </DoubleAnimationUsingKeyFrames>            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">             <EasingColorKeyFrame KeyTime="00:00:00" Value="#FFB4DCE5"/>            </ColorAnimationUsingKeyFrames>            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)">             <EasingColorKeyFrame KeyTime="00:00:00" Value="#FFEEF6F8"/>            </ColorAnimationUsingKeyFrames>           </Storyboard>          </VisualState>          <VisualState x:Name="Unchecked"/>         </VisualStateGroup>         <VisualStateGroup x:Name="FocusStates">          <VisualState x:Name="Focused">           <Storyboard>            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity">             <SplineDoubleKeyFrame KeyTime="0" Value="1"/>            </DoubleAnimationUsingKeyFrames>           </Storyboard>          </VisualState>          <VisualState x:Name="Unfocused"/>         </VisualStateGroup>        </VisualStateManager.VisualStateGroups>        <Border x:Name="Background" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3">         <Border.BorderBrush>          <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">           <GradientStop Color="#FFFCFEFD" Offset="0"/>           <GradientStop Color="#FFE1EFEB" Offset="1"/>          </LinearGradientBrush>         </Border.BorderBrush>         <Border.Background>          <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">           <GradientStop Color="#FFD2DBD9" Offset="0"/>           <GradientStop Color="#FFC2E0E2" Offset="0.909"/>           <GradientStop Color="#FFE0EFED" Offset="0.087"/>           <GradientStop Color="#FFE1EFEB" Offset="0.988"/>          </LinearGradientBrush>         </Border.Background>         <Grid Margin="1"/>        </Border>        <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>        <Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" RadiusX="3" RadiusY="3" IsHitTestVisible="false" Opacity="0"/>        <Rectangle x:Name="FocusVisualElement" Stroke="{x:Null}" StrokeThickness="1" RadiusX="2" RadiusY="2" Margin="1" IsHitTestVisible="false" Opacity="0"/>       </Grid>      </ControlTemplate>     </Setter.Value>    </Setter>   </Style><br /> <br />