title: Re-skinned ToggleSwitch animation not working properly
body: <p>I am trying to re-skin the ToggleSwitch to look like a valve. I have written a Style which sets a new ControlTemplate as below.</p>
  
  <pre><code>&lt;Style x:Key="Valve" TargetType="ToggleSwitch"&gt;
      &lt;Setter Property="Foreground" Value="{ThemeResource ToggleSwitchContentForeground}" /&gt;
      &lt;Setter Property="HorizontalAlignment" Value="Left" /&gt;
      &lt;Setter Property="VerticalAlignment" Value="Center" /&gt;
      &lt;Setter Property="HorizontalContentAlignment" Value="Left" /&gt;
      &lt;Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" /&gt;
      &lt;Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" /&gt;
      &lt;Setter Property="MinWidth" Value="154" /&gt;
      &lt;Setter Property="ManipulationMode" Value="System,TranslateX" /&gt;
      &lt;Setter Property="UseSystemFocusVisuals" Value="True" /&gt;
      &lt;Setter Property="FocusVisualMargin" Value="-7,-3,-7,-3" /&gt;
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="ToggleSwitch"&gt;
                  &lt;Grid Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"&gt;
  
                      &lt;VisualStateManager.VisualStateGroups&gt;
                          &lt;VisualStateGroup x:Name="CommonStates"&gt;
                              &lt;VisualState x:Name="Normal" /&gt;
  
                              &lt;VisualState x:Name="PointerOver"&gt;
  
                                  &lt;Storyboard&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Stroke"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchStrokeOffPointerOver}" /&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Fill"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchFillOffPointerOver}" /&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Fill"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchKnobFillOffPointerOver}" /&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Fill"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchKnobFillOnPointerOver}" /&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Fill"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchFillOnPointerOver}" /&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Stroke"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchStrokeOnPointerOver}" /&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchAreaGrid" Storyboard.TargetProperty="Background"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchContainerBackgroundPointerOver}" /&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/VisualState&gt;
  
                              &lt;VisualState x:Name="Pressed"&gt;
  
                                  &lt;Storyboard&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="StrokeThickness"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="0" /&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Stroke"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchStrokeOffPressed}" /&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Fill"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchFillOffPressed}" /&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Fill"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchFillOnPressed}" /&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Stroke"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchStrokeOnPressed}" /&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Fill"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchKnobFillOffPressed}" /&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Fill"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchKnobFillOnPressed}" /&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchAreaGrid" Storyboard.TargetProperty="Background"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchContainerBackgroundPressed}" /&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/VisualState&gt;
  
                              &lt;VisualState x:Name="Disabled"&gt;
  
                                  &lt;Storyboard&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchHeaderForegroundDisabled}" /&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="OffContentPresenter" Storyboard.TargetProperty="Foreground"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchContentForegroundDisabled}" /&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="OnContentPresenter" Storyboard.TargetProperty="Foreground"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchContentForegroundDisabled}" /&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Stroke"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchStrokeOffDisabled}" /&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Fill"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchFillOffDisabled}" /&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Fill"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchFillOnDisabled}" /&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Stroke"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchStrokeOnDisabled}" /&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Fill"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchKnobFillOffDisabled}" /&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Fill"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchKnobFillOnDisabled}" /&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchAreaGrid" Storyboard.TargetProperty="Background"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleSwitchContainerBackgroundDisabled}" /&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/VisualState&gt;
                          &lt;/VisualStateGroup&gt;
                          &lt;VisualStateGroup x:Name="ToggleStates"&gt;
  
                              &lt;VisualStateGroup.Transitions&gt;
                                  &lt;VisualTransition x:Name="DraggingToOnTransition"
                                      From="Dragging"
                                      To="On"
                                      GeneratedDuration="0"&gt;
                                      &lt;Storyboard&gt;
                                          &lt;!--&lt;RepositionThemeAnimation TargetName="SwitchKnob" FromHorizontalOffset="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.KnobCurrentToOnOffset}" /&gt;--&gt;
                                          &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Opacity"&gt;
                                              &lt;DiscreteObjectKeyFrame KeyTime="0" Value="1" /&gt;
                                          &lt;/ObjectAnimationUsingKeyFrames&gt;
                                          &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Opacity"&gt;
                                              &lt;DiscreteObjectKeyFrame KeyTime="0" Value="0" /&gt;
                                          &lt;/ObjectAnimationUsingKeyFrames&gt;
                                          &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Opacity"&gt;
                                              &lt;DiscreteObjectKeyFrame KeyTime="0" Value="1" /&gt;
                                          &lt;/ObjectAnimationUsingKeyFrames&gt;
                                          &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Opacity"&gt;
                                              &lt;DiscreteObjectKeyFrame KeyTime="0" Value="0" /&gt;
                                          &lt;/ObjectAnimationUsingKeyFrames&gt;
                                      &lt;/Storyboard&gt;
                                  &lt;/VisualTransition&gt;
                                  &lt;VisualTransition x:Name="DraggingToOffTransition"
                                      From="Dragging"
                                      To="Off"
                                      GeneratedDuration="0"&gt;
                                      &lt;Storyboard&gt;
                                          &lt;!--&lt;DoubleAnimation Storyboard.TargetName="KnobTranslateTransform"
                                                           Storyboard.TargetProperty="Angle"
                                                           To="0"
                                                           Duration="0:0:0.2" /&gt;--&gt;
                                          &lt;!--&lt;RepositionThemeAnimation TargetName="SwitchKnob" FromHorizontalOffset="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.KnobCurrentToOffOffset}" /&gt;--&gt;
                                      &lt;/Storyboard&gt;
                                  &lt;/VisualTransition&gt;
                                  &lt;VisualTransition x:Name="OnToOffTransition"
                                      From="On"
                                      To="Off"
                                      GeneratedDuration="0"&gt;
                                      &lt;Storyboard&gt;
                                          &lt;DoubleAnimation Storyboard.TargetName="KnobTranslateTransform"
                                                           Storyboard.TargetProperty="Angle"
                                                           To="0"
                                                           Duration="0:0:2" /&gt;
                                          &lt;!--&lt;RepositionThemeAnimation TargetName="SwitchKnob" FromHorizontalOffset="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.KnobOnToOffOffset}" /&gt;--&gt;
                                      &lt;/Storyboard&gt;
                                  &lt;/VisualTransition&gt;
                                  &lt;VisualTransition x:Name="OffToOnTransition"
                                      From="Off"
                                      To="On"
                                      GeneratedDuration="0"&gt;
                                      &lt;Storyboard&gt;
                                          &lt;DoubleAnimation Storyboard.TargetName="KnobTranslateTransform"
                                                           Storyboard.TargetProperty="Angle"
                                                           To="-90"
                                                           Duration="0:0:2" /&gt;
  
                                          &lt;!--&lt;RepositionThemeAnimation TargetName="SwitchKnob" FromHorizontalOffset="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.KnobOffToOnOffset}" /&gt;--&gt;
                                          &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Opacity"&gt;
                                              &lt;DiscreteObjectKeyFrame KeyTime="0" Value="1" /&gt;
                                          &lt;/ObjectAnimationUsingKeyFrames&gt;
                                          &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Opacity"&gt;
                                              &lt;DiscreteObjectKeyFrame KeyTime="0" Value="0" /&gt;
                                          &lt;/ObjectAnimationUsingKeyFrames&gt;
                                          &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Opacity"&gt;
                                              &lt;DiscreteObjectKeyFrame KeyTime="0" Value="1" /&gt;
                                          &lt;/ObjectAnimationUsingKeyFrames&gt;
                                          &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Opacity"&gt;
                                              &lt;DiscreteObjectKeyFrame KeyTime="0" Value="0" /&gt;
                                          &lt;/ObjectAnimationUsingKeyFrames&gt;
                                      &lt;/Storyboard&gt;
                                  &lt;/VisualTransition&gt;
                              &lt;/VisualStateGroup.Transitions&gt;
                              &lt;VisualState x:Name="Dragging" /&gt;
                              &lt;VisualState x:Name="Off" /&gt;
  
                              &lt;VisualState x:Name="On"&gt;
  
                                  &lt;Storyboard&gt;
                                      &lt;DoubleAnimation Storyboard.TargetName="KnobTranslateTransform"
                                          Storyboard.TargetProperty="Angle"
                                          To="90"
                                          Duration="0" /&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Opacity"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="1" /&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Opacity"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="0" /&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Opacity"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="1" /&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Opacity"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0" Value="0" /&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/VisualState&gt;
                          &lt;/VisualStateGroup&gt;
                          &lt;VisualStateGroup x:Name="ContentStates"&gt;
                              &lt;VisualState x:Name="OffContent"&gt;
  
                                  &lt;Storyboard&gt;
                                      &lt;DoubleAnimation Storyboard.TargetName="OffContentPresenter"
                                          Storyboard.TargetProperty="Opacity"
                                          To="1"
                                          Duration="0" /&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="OffContentPresenter"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0"&gt;
                                              &lt;DiscreteObjectKeyFrame.Value&gt;
                                                  &lt;x:Boolean&gt;True&lt;/x:Boolean&gt;
                                              &lt;/DiscreteObjectKeyFrame.Value&gt;
                                          &lt;/DiscreteObjectKeyFrame&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/VisualState&gt;
                              &lt;VisualState x:Name="OnContent"&gt;
  
                                  &lt;Storyboard&gt;
                                      &lt;DoubleAnimation Storyboard.TargetName="OnContentPresenter"
                                          Storyboard.TargetProperty="Opacity"
                                          To="1"
                                          Duration="0" /&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="OnContentPresenter"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0"&gt;
                                              &lt;DiscreteObjectKeyFrame.Value&gt;
                                                  &lt;x:Boolean&gt;True&lt;/x:Boolean&gt;
                                              &lt;/DiscreteObjectKeyFrame.Value&gt;
                                          &lt;/DiscreteObjectKeyFrame&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/VisualState&gt;
                          &lt;/VisualStateGroup&gt;
                      &lt;/VisualStateManager.VisualStateGroups&gt;
                      &lt;Grid.RowDefinitions&gt;
                          &lt;RowDefinition Height="Auto" /&gt;
                          &lt;RowDefinition Height="10" /&gt;
                          &lt;RowDefinition Height="Auto" /&gt;
                          &lt;RowDefinition Height="10" /&gt;
                      &lt;/Grid.RowDefinitions&gt;
  
                      &lt;Grid.ColumnDefinitions&gt;
                          &lt;ColumnDefinition Width="Auto" /&gt;
                          &lt;ColumnDefinition Width="12" MaxWidth="12" /&gt;
                          &lt;ColumnDefinition Width="Auto" /&gt;
                          &lt;ColumnDefinition Width="*" /&gt;
                      &lt;/Grid.ColumnDefinitions&gt;
                      &lt;ContentPresenter x:Name="HeaderContentPresenter"
                          x:DeferLoadStrategy="Lazy"
                          Visibility="Collapsed"
                          Foreground="{ThemeResource ToggleSwitchHeaderForeground}"
                          Grid.ColumnSpan="4"
                          Content="{TemplateBinding Header}"
                          ContentTemplate="{TemplateBinding HeaderTemplate}"
                          IsHitTestVisible="False"
                          AutomationProperties.AccessibilityView="Raw" /&gt;
                      &lt;Grid x:Name="SwitchAreaGrid"
                          Grid.Row="1"
                          Grid.RowSpan="3"
                          Grid.ColumnSpan="3"
                          Margin="0,5"
                          Control.IsTemplateFocusTarget="True"
                          Background="{ThemeResource ToggleSwitchContainerBackground}" /&gt;
                      &lt;ContentPresenter x:Name="OffContentPresenter"
                          Grid.Row="1"
                          Grid.RowSpan="3"
                          Grid.Column="2"
                          Opacity="0"
                          Foreground="{TemplateBinding Foreground}"
                          IsHitTestVisible="False"
                          Content="{TemplateBinding OffContent}"
                          ContentTemplate="{TemplateBinding OffContentTemplate}"
                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /&gt;
                      &lt;ContentPresenter x:Name="OnContentPresenter"
                          Grid.Row="1"
                          Grid.RowSpan="3"
                          Grid.Column="2"
                          Opacity="0"
                          Foreground="{TemplateBinding Foreground}"
                          IsHitTestVisible="False"
                          Content="{TemplateBinding OnContent}"
                          ContentTemplate="{TemplateBinding OnContentTemplate}"
                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /&gt;
                      &lt;Rectangle x:Name="OuterBorder"
                          Grid.Row="2"
                          Height="32"
                          Width="32"
                          RadiusX="16"
                          RadiusY="16"
                          Fill="{ThemeResource ToggleSwitchFillOff}"
                          Stroke="{ThemeResource ToggleSwitchStrokeOff}"
                          StrokeThickness="2" /&gt;
                      &lt;Rectangle x:Name="SwitchKnobBounds"
                          Grid.Row="2"
                          Height="32"
                          Width="32"
                          RadiusX="16"
                          RadiusY="16"
                          Fill="{ThemeResource ToggleSwitchFillOn}"
                          Stroke="{ThemeResource ToggleSwitchStrokeOn}"
                          StrokeThickness="{ThemeResource ToggleSwitchOnStrokeThickness}"
                          Opacity="0" /&gt;
                      &lt;Grid x:Name="SwitchKnob"
                          Grid.Row="2"
                          HorizontalAlignment="Left"
                            RenderTransformOrigin=".5,.5"
                          Width="32"
                          Height="32"&gt;
                          &lt;!--&lt;Ellipse x:Name="SwitchKnobOn"
                              Fill="{ThemeResource ToggleSwitchKnobFillOn}"
                              Width="14"
                              Height="14"
                              Opacity="0" /&gt;
                          &lt;Rectangle x:Name="PipeKnobOn"
                                     Width="6"
                                     Height="32"
                                     Opacity="1"
                                     RadiusX="2"
                                     RadiusY="2"
                                     Fill="{ThemeResource ToggleSwitchKnobFillOff}" /&gt;
                          &lt;Ellipse x:Name="SwitchKnobOff"
                              Fill="{ThemeResource ToggleSwitchKnobFillOff}"
                              Width="14"
                              Height="14" /&gt;--&gt;
                          &lt;Path  x:Name="SwitchKnobOn" Opacity="0"  Fill="{ThemeResource ToggleSwitchKnobFillOn}"&gt;
                              &lt;Path.Data&gt;
                                  &lt;GeometryGroup FillRule="Nonzero"&gt;
                                      &lt;EllipseGeometry Center="16,16" RadiusX="7" RadiusY="7" /&gt;
                                      &lt;RectangleGeometry Rect="13,0,6,32" /&gt;
                                  &lt;/GeometryGroup&gt;
                              &lt;/Path.Data&gt;
                          &lt;/Path&gt;
                          &lt;Path  x:Name="SwitchKnobOff" Fill="{ThemeResource ToggleSwitchKnobFillOff}"&gt;
                              &lt;Path.Data&gt;
                                  &lt;GeometryGroup FillRule="Nonzero"&gt;
                                      &lt;EllipseGeometry Center="16,16" RadiusX="7" RadiusY="7" /&gt;
                                      &lt;RectangleGeometry Rect="13,0,6,32" /&gt;
                                  &lt;/GeometryGroup&gt;
                              &lt;/Path.Data&gt;
                          &lt;/Path&gt;
                          &lt;Grid.RenderTransform&gt;
                              &lt;RotateTransform x:Name="KnobTranslateTransform" /&gt;
                          &lt;/Grid.RenderTransform&gt;
                      &lt;/Grid&gt;
                      &lt;Thumb x:Name="SwitchThumb"
                          AutomationProperties.AccessibilityView="Raw"
                          Grid.Row="1"
                          Grid.RowSpan="3"
                          Grid.ColumnSpan="3"&gt;
                          &lt;Thumb.Template&gt;
                              &lt;ControlTemplate TargetType="Thumb"&gt;
                                  &lt;Rectangle Fill="Transparent" /&gt;
                              &lt;/ControlTemplate&gt;
                          &lt;/Thumb.Template&gt;
                      &lt;/Thumb&gt;
                  &lt;/Grid&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  </code></pre>
  
  <p>Transitioning from <code>Off</code> to <code>On</code> state animation works fine, but the <code>On</code> to <code>Off</code> does not look good. What seems to be happening is when I press the left mouse button in the On state, first the pressed state is displayed (Instead of the pressed state of <code>On</code>, pressed state of <code>Off</code> is displayed), then the animation is played from <code>On</code> to <code>Off</code>, which does not look good.</p>
  
  <p>My attempt was to change <code>RepositionThemeAnimation</code> with <code>DoubleAnimation</code>, which has failed. </p>
  
  <pre><code>&lt;RepositionThemeAnimation 
      TargetName="SwitchKnob" 
      FromHorizontalOffset="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.KnobOffToOnOffset}" /&gt;
  
  
  &lt;DoubleAnimation Storyboard.TargetName="KnobTranslateTransform"
                   Storyboard.TargetProperty="Angle"
                   To="-90"
                   Duration="0:0:2" /&gt;
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p><a href="https://i.stack.imgur.com/Skdqi.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Skdqi.gif" alt="Current Outcome"></a></p>
  
  <p>This is how it looks currently. As you can see the off to on transition is smooth, but off to on is not so.</p>