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 />