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>