You can download the source code here: https://github.com/stevenh77/ToggleSL
For additional styles check out the library: http://toggleswitch.codeplex.com/
<UserControl x:Class="ToggleSL.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ToggleSwitch="clr-namespace:ToggleSwitch;assembly=ToggleSwitch"
xmlns:Borders="clr-namespace:ToggleSwitch.Borders;assembly=ToggleSwitch"
xmlns:Utils="clr-namespace:ToggleSwitch.Utils;assembly=ToggleSwitch"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<UserControl.Resources>
<ControlTemplate x:Key="EngravedContentTemplate" TargetType="ContentControl">
<TextBlock
Cursor="{TemplateBinding Cursor}"
Text="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Foreground="{TemplateBinding Foreground}"
FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}"
FontWeight="{TemplateBinding FontWeight}"
FontStyle="{TemplateBinding FontStyle}" />
</ControlTemplate>
<ControlTemplate x:Key="ThumbWithDoubleArrowTemplate" TargetType="Thumb">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To="0.05" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0" To="0.25" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="0.05" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Unchecked"/>
<VisualState x:Name="Checked"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Borders:OuterGlowBorder OuterGlowSize="0" OuterGlowOpacity="0" BorderThickness="0" OuterGlowColor="Black" Background="Transparent" CornerRadius="0" ShadowCornerRadius="0" IsTabStop="False" >
<Grid>
<Borders:ClippingBorder x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" IsTabStop="False" Background="{TemplateBinding Background}">
<StackPanel Orientation="Horizontal" Height="6" HorizontalAlignment="Center" VerticalAlignment="Center">
<Path Data="M0,0 L0,6 L-5,3" Fill="{TemplateBinding Foreground}" Stretch="Fill" StrokeThickness="0" Margin="0,0,2,0"/>
<Path Data="M0,0 L0,6 L5,3" Fill="{TemplateBinding Foreground}" Stretch="Fill" StrokeThickness="0" Margin="2,0,0,0"/>
</StackPanel>
</Borders:ClippingBorder>
<Borders:ClippingBorder x:Name="BackgroundAnimation" Background="Black" Opacity="0" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="Black" CornerRadius="0" IsTabStop="False"/>
<Rectangle x:Name="DisabledVisualElement" Fill="White" IsHitTestVisible="false" Opacity="0" RadiusY="0" RadiusX="0"/>
<Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Margin="1" Opacity="0" RadiusY="0" RadiusX="0" StrokeThickness="1"/>
</Grid>
</Borders:OuterGlowBorder>
</Grid>
</ControlTemplate>
<Style x:Key="CarbonToggleSwitchStyle" TargetType="ToggleSwitch:HorizontalToggleSwitch">
<Setter Property="Foreground" Value="White"/>
<Setter Property="Width" Value="88"/>
<Setter Property="Height" Value="28"/>
<Setter Property="BorderBrush" Value="#FFBEBEBE"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="0,4"/>
<Setter Property="UncheckedForeground" Value="#FF5C5C5C"/>
<Setter Property="CheckedForeground" Value="White"/>
<Setter Property="ThumbSize" Value="42"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="ContentTemplate" Value="{StaticResource EngravedContentTemplate}"/>
<Setter Property="ThumbTemplate" Value="{StaticResource ThumbWithDoubleArrowTemplate}"/>
<Setter Property="CheckedBackground">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF81B5FB" Offset="1"/>
<GradientStop Color="#FF5D9FF2" Offset="0.50"/>
<GradientStop Color="#FF569BEF" Offset="0.50"/>
<GradientStop Color="#FF3772B9"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="UncheckedBackground">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFBBBBBB" Offset="0"/>
<GradientStop Color="#FFE1E2E2" Offset="0.5"/>
<GradientStop Color="#FFDDDDDD" Offset="0.5"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="ThumbBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFD8D7D8"/>
<GradientStop Color="#FFFDFCFD" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleSwitch:HorizontalToggleSwitch">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="DisabledOverlay">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.10" To="Unchecked"/>
<VisualTransition GeneratedDuration="0:0:0.10" To="Checked"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Checked"/>
<VisualState x:Name="Unchecked"/>
<VisualState x:Name="DraggingChecked"/>
<VisualState x:Name="DraggingUnchecked"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Borders:ClippingBorder x:Name="SwitchRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" CornerRadius="0" IsTabStop="False">
<Canvas MinWidth="{TemplateBinding ThumbSize}" MinHeight="{TemplateBinding FontSize}">
<Utils:ActualSizePropertyProxy x:Name="ActualSizeProxy" Element="{Binding Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" Visibility="Collapsed"/>
<Grid x:Name="SwitchTrack" Cursor="Hand" Height="{Binding ActualHeightValue, ElementName=ActualSizeProxy, Mode=OneWay}" Margin="0,-1,0,0">
<StackPanel Orientation="Horizontal">
<Border Background="{TemplateBinding CheckedBackground}" Margin="-1,0,0,0" Padding="1,0,0,0">
<ContentControl x:Name="SwitchChecked" Content="{TemplateBinding CheckedContent}" Foreground="{TemplateBinding CheckedForeground}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" HorizontalContentAlignment="Center" IsTabStop="False" Margin="{TemplateBinding Padding}" Padding="0,0,22,0" Template="{TemplateBinding ContentTemplate}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" VerticalContentAlignment="Center"/>
</Border>
<Border Background="{TemplateBinding UncheckedBackground}" Margin="-1,0,0,0">
<ContentControl x:Name="SwitchUnchecked" Content="{TemplateBinding UncheckedContent}" Foreground="{TemplateBinding UncheckedForeground}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" HorizontalContentAlignment="Center" IsTabStop="False" Margin="{TemplateBinding Padding}" Template="{TemplateBinding ContentTemplate}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" VerticalContentAlignment="Center"/>
</Border>
</StackPanel>
</Grid>
<Borders:InnerGlowBorder BorderThickness="0" Background="#00000000" CornerRadius="0" Height="{Binding ActualHeightValue, ElementName=ActualSizeProxy, Mode=OneWay}" IsHitTestVisible="False" IsTabStop="False" InnerGlowOpacity="0" InnerGlowColor="Black" InnerGlowSize="0" Margin="-1,-1,0,0" Width="{Binding ActualWidthValue, ElementName=ActualSizeProxy, Mode=OneWay}"/>
<Thumb x:Name="SwitchThumb" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding ThumbBrush}" Cursor="Hand" Foreground="#FF359CE6" HorizontalAlignment="Left" Height="{Binding ActualHeightValue, ElementName=ActualSizeProxy, Mode=OneWay}" IsTabStop="False" Margin="0,-1,0,0" Template="{TemplateBinding ThumbTemplate}" Width="{TemplateBinding ThumbSize}"/>
</Canvas>
</Borders:ClippingBorder>
<Border x:Name="DisabledOverlay" Background="#AAEEEEEE" CornerRadius="0" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<ToggleSwitch:HorizontalToggleSwitch
Margin="20"
VerticalAlignment="Top"
BorderBrush="#FFB4B0B0"
Width="78"
UncheckedBackground="#FFD6D4D4"
UncheckedForeground="#FFFFFFFF"
ThumbSize="22"
Style="{StaticResource CarbonToggleSwitchStyle}" IsChecked="True" HorizontalAlignment="Left">
<ToggleSwitch:HorizontalToggleSwitch.CheckedBackground>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#ff3074aa"/>
<GradientStop Color="#FFB9D6ED" Offset="1"/>
</LinearGradientBrush>
</ToggleSwitch:HorizontalToggleSwitch.CheckedBackground>
<ToggleSwitch:HorizontalToggleSwitch.ThumbBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFD6D4D4"/>
<GradientStop Color="#FFD6D4D4" Offset="1"/>
<GradientStop Color="#FFD6D4D4" Offset="0.02"/>
</LinearGradientBrush>
</ToggleSwitch:HorizontalToggleSwitch.ThumbBrush>
</ToggleSwitch:HorizontalToggleSwitch>
</Grid>
</UserControl>
