﻿<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid
    Background="Gray"
    ShowGridLines="True">
    <Grid.ColumnDefinitions>
      <ColumnDefinition/>
      <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <CheckBox
      Grid.Column="0"
      HorizontalAlignment="Center"
      Margin="10"
      VerticalAlignment="Center"
      Content="Click Me"
      FontSize="48"/>
    <CheckBox
      Grid.Column="1"
      HorizontalAlignment="Center"
      Margin="10"
      VerticalAlignment="Center"
      Content="Click Me"
      FontSize="48">
      <CheckBox.Template>
        <ControlTemplate TargetType="{x:Type CheckBox}">
          <ControlTemplate.Resources>
            <Storyboard x:Key="TurnOn">
              <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                             Storyboard.TargetName="rectangle"
                                             Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                <SplineDoubleKeyFrame KeySpline="0.72,0.09,1,1"
                                      KeyTime="00:00:00.50"
                                      Value="23.18"/>
              </DoubleAnimationUsingKeyFrames>
              <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                             Storyboard.TargetName="rectangle1"
                                             Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                <SplineDoubleKeyFrame KeySpline="0.72,0.09,1,1"
                                      KeyTime="00:00:00.50"
                                      Value="23.51"/>
              </DoubleAnimationUsingKeyFrames>
              <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                             Storyboard.TargetName="rectangle1"
                                             Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                <SplineDoubleKeyFrame KeySpline="0.72,0.09,1,1"
                                      KeyTime="00:00:00.50"
                                      Value="14.90"/>
              </DoubleAnimationUsingKeyFrames>
              <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                             Storyboard.TargetName="rectangle1"
                                             Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                <SplineDoubleKeyFrame KeySpline="0.72,0.09,1,1"
                                      KeyTime="00:00:00.50"
                                      Value="4.69"/>
              </DoubleAnimationUsingKeyFrames>
            </Storyboard>
            <Storyboard x:Key="TurnOff">
              <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                             Storyboard.TargetName="rectangle"
                                             Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                <SplineDoubleKeyFrame KeySpline="0.72,0.09,1,1"
                                      KeyTime="00:00:00"
                                      Value="23.18"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.60"
                                      Value="0"/>
              </DoubleAnimationUsingKeyFrames>
              <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                             Storyboard.TargetName="rectangle1"
                                             Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                <SplineDoubleKeyFrame KeySpline="0.72,0.09,1,1"
                                      KeyTime="00:00:00"
                                      Value="23.51"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.60"
                                      Value="0"/>
              </DoubleAnimationUsingKeyFrames>
              <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                             Storyboard.TargetName="rectangle1"
                                             Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                <SplineDoubleKeyFrame KeySpline="0.72,0.09,1,1"
                                      KeyTime="00:00:00"
                                      Value="14.90"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.60"
                                      Value="0.55"/>
              </DoubleAnimationUsingKeyFrames>
              <DoubleAnimationUsingKeyFrames
                BeginTime="00:00:00"
                Duration="00:00:00.00"
                Storyboard.TargetName="rectangle1"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                <SplineDoubleKeyFrame KeySpline="0.72,0.09,1,1"
                                      KeyTime="00:00:00"
                                      Value="4.69"/>
              </DoubleAnimationUsingKeyFrames>
            </Storyboard>
          </ControlTemplate.Resources>
          <Viewbox>
            <Grid Width="191"
                  Height="188">
              <Grid.RowDefinitions>
                <RowDefinition Height="0.15*"/>
                <RowDefinition Height="0.68*"/>
                <RowDefinition Height="0.16*"/>
              </Grid.RowDefinitions>
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.15*"/>
                <ColumnDefinition Width="0.68*"/>
                <ColumnDefinition Width="0.15*"/>
              </Grid.ColumnDefinitions>
              <Ellipse
                Width="Auto"
                Grid.ColumnSpan="3"
                Grid.RowSpan="3"
                HorizontalAlignment="Stretch"
                Margin="3,3,3,3">
                <Ellipse.Fill>
                  <RadialGradientBrush>
                    <GradientStop Offset="0"
                                  Color="#FF3D3D3D"/>
                    <GradientStop Offset="1"
                                  Color="#FF131313"/>
                  </RadialGradientBrush>
                </Ellipse.Fill>
                <Ellipse.Stroke>
                  <LinearGradientBrush StartPoint="0.5,0"
                                       EndPoint="0.5,1">
                    <GradientStop Offset="0"
                                  Color="#FFA2A2A2"/>
                    <GradientStop Offset="1"
                                  Color="#FF535353"/>
                  </LinearGradientBrush>
                </Ellipse.Stroke>
                <Ellipse.Effect>
                  <DropShadowEffect Direction="240"
                                    ShadowDepth="3"/>
                </Ellipse.Effect>
              </Ellipse>
              <Ellipse
                Width="Auto"
                Grid.Column="1"
                Grid.Row="1"
                HorizontalAlignment="Stretch"
                Margin="0.17,0.71,-0.18,0.16">
                <Ellipse.Stroke>
                  <LinearGradientBrush StartPoint="0.5,0"
                                       EndPoint="0.5,1">
                    <GradientStop Offset="0"
                                  Color="#FF262626"/>
                    <GradientStop Offset="1"
                                  Color="#FF000000"/>
                  </LinearGradientBrush>
                </Ellipse.Stroke>
                <Ellipse.Fill>
                  <RadialGradientBrush>
                    <GradientStop Offset="0"
                                  Color="#FF3D3D3D"/>
                    <GradientStop Offset="1"
                                  Color="#FF131313"/>
                  </RadialGradientBrush>
                </Ellipse.Fill>
              </Ellipse>
              <Rectangle
                x:Name="rectangle"
                Grid.Column="1"
                Grid.Row="1"
                Margin="51.02,0.71,50.69,0"
                RadiusX="1.21"
                RadiusY="1.21"
                RenderTransformOrigin="0.5,0.5">
                <Rectangle.RenderTransform>
                  <TransformGroup>
                    <ScaleTransform ScaleX="1"
                                    ScaleY="1"/>
                    <SkewTransform AngleX="0"
                                   AngleY="0"/>
                    <RotateTransform Angle="0"/>
                    <TranslateTransform X="0"
                                        Y="0"/>
                  </TransformGroup>
                </Rectangle.RenderTransform>
                <Rectangle.Fill>
                  <RadialGradientBrush>
                    <GradientStop Offset="0"
                                  Color="#FF3D3D3D"/>
                    <GradientStop Offset="1"
                                  Color="#FF131313"/>
                  </RadialGradientBrush>
                </Rectangle.Fill>
                <Rectangle.Stroke>
                  <LinearGradientBrush StartPoint="0.5,0"
                                       EndPoint="0.5,1">
                    <GradientStop Offset="0"
                                  Color="#FF262626"/>
                    <GradientStop Offset="1"
                                  Color="#FF000000"/>
                  </LinearGradientBrush>
                </Rectangle.Stroke>
              </Rectangle>
              <Rectangle
                x:Name="rectangle1"
                Height="32.36"
                Grid.Column="1"
                Grid.Row="1"
                Margin="61.89,8,63.24,0"
                VerticalAlignment="Top"
                Fill="#FFC9C9C9"
                RadiusX="1.21"
                RadiusY="1.21"
                RenderTransformOrigin="0.5,0.5">
                <Rectangle.RenderTransform>
                  <TransformGroup>
                    <ScaleTransform ScaleX="1"
                                    ScaleY="1"/>
                    <SkewTransform AngleX="0"
                                   AngleY="0"/>
                    <RotateTransform Angle="0"/>
                    <TranslateTransform X="0"
                                        Y="0"/>
                  </TransformGroup>
                </Rectangle.RenderTransform>
                <Rectangle.Stroke>
                  <LinearGradientBrush StartPoint="0.5,0"
                                       EndPoint="0.5,1">
                    <GradientStop Offset="0"
                                  Color="#FF262626"/>
                    <GradientStop Offset="1"
                                  Color="#FF000000"/>
                  </LinearGradientBrush>
                </Rectangle.Stroke>
              </Rectangle>
              <Ellipse
                Grid.Column="1"
                Margin="56.64,8,58.15,3.89"
                VerticalAlignment="Stretch"
                Fill="{x:Null}">
                <Ellipse.Stroke>
                  <LinearGradientBrush StartPoint="0.5,0"
                                       EndPoint="0.5,1">
                    <GradientStop Offset="0"
                                  Color="#FF767676"/>
                    <GradientStop Offset="1"
                                  Color="#FFDCDCDC"/>
                  </LinearGradientBrush>
                </Ellipse.Stroke>
              </Ellipse>
              <Rectangle
                Width="2.35"
                Height="16.69"
                Grid.Column="1"
                HorizontalAlignment="Right"
                Margin="0,0,33.98,-2.11"
                VerticalAlignment="Bottom"
                RadiusX="1.21"
                RadiusY="1.21"
                RenderTransformOrigin="0.5,0.5"
                Stroke="{x:Null}">
                <Rectangle.Fill>
                  <LinearGradientBrush StartPoint="0.5,0"
                                       EndPoint="0.5,1">
                    <GradientStop Offset="0"
                                  Color="#FF7D7D7D"/>
                    <GradientStop Offset="1"
                                  Color="#FFDFDFDF"/>
                  </LinearGradientBrush>
                </Rectangle.Fill>
                <Rectangle.RenderTransform>
                  <TransformGroup>
                    <ScaleTransform ScaleX="1"
                                    ScaleY="1"/>
                    <SkewTransform AngleX="0"
                                   AngleY="0"/>
                    <RotateTransform Angle="25.51"/>
                    <TranslateTransform X="0"
                                        Y="0"/>
                  </TransformGroup>
                </Rectangle.RenderTransform>
              </Rectangle>
            </Grid>
          </Viewbox>
          <ControlTemplate.Triggers>
            <EventTrigger RoutedEvent="ToggleButton.Unchecked">
              <BeginStoryboard x:Name="TurnOff_BeginStoryboard"
                               Storyboard="{StaticResource TurnOff}"/>
            </EventTrigger>
            <EventTrigger RoutedEvent="ToggleButton.Checked">
              <BeginStoryboard x:Name="TurnOn_BeginStoryboard"
                               Storyboard="{StaticResource TurnOn}"/>
            </EventTrigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </CheckBox.Template>
    </CheckBox>
  </Grid>
</Page>
