From 551ea7711bfa4367da398ca33f37b0ab174e0d12 Mon Sep 17 00:00:00 2001
From: JamRemco <58340108+JamRemco@users.noreply.github.com>
Date: Mon, 15 Jun 2020 18:44:52 +0200
Subject: [PATCH] Fix animation

---
 src/Avalonia.Themes.Fluent/ToggleSwitch.xaml | 151 +++++++++++--------
 1 file changed, 86 insertions(+), 65 deletions(-)

diff --git a/src/Avalonia.Themes.Fluent/ToggleSwitch.xaml b/src/Avalonia.Themes.Fluent/ToggleSwitch.xaml
index 6f74c0b715..ca951edc9e 100644
--- a/src/Avalonia.Themes.Fluent/ToggleSwitch.xaml
+++ b/src/Avalonia.Themes.Fluent/ToggleSwitch.xaml
@@ -111,23 +111,30 @@
                    CornerRadius="10"
                    BorderThickness="{DynamicResource ToggleSwitchOnStrokeThickness}"/>
                           
-                 <Grid x:Name="SwitchKnob"
+                 <Canvas x:Name="SwitchKnob" 
                     Grid.Row="1"
                     HorizontalAlignment="Left"
                     Width="20"
                     Height="20">
+
+                    <Grid x:Name="MovingKnobs"
+                      Width="20"
+                      Height="20"  >
+
+                      <Ellipse x:Name="SwitchKnobOn"
+                       Width="10"
+                      Height="10"/> 
+                   
                            
-                   <Ellipse x:Name="SwitchKnobOn"
-                     Width="10"
-                     Height="10"/>
-                           
-                   <Ellipse x:Name="SwitchKnobOff"
-                     Width="10"
-                     Height="10" />
-                       <Grid.RenderTransform>
-                          <!--<TranslateTransform x:Name="KnobTranslateTransform" />-->
-                       </Grid.RenderTransform>
-                 </Grid>
+                    <Ellipse x:Name="SwitchKnobOff"
+                      Width="10"
+                       Height="10"  />
+                     
+                       <!--<Grid.RenderTransform>
+                          <TranslateTransform x:Name="KnobTranslateTransform" />
+                       </Grid.RenderTransform>-->
+                   </Grid>
+                 </Canvas>
                 
                  <!--<Thumb x:Name="SwitchThumb"
                    Grid.RowSpan="3"
@@ -147,6 +154,7 @@
   <!--*********** Normal ********-->
   <!--  Initial values If hardcode values in template they'll become Imutable -->
   
+   
    <Style Selector="ToggleSwitch /template/ Grid#SwitchAreaGrid">
        <Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackground}"/>
   </Style>
@@ -170,32 +178,39 @@
     <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOff}"/>
     <Setter Property="Stroke" Value="{DynamicResource ToggleSwitchKnobStrokeOff}"/>
   </Style>
+  
+  <Style Selector="ToggleSwitch /template/ Grid#MovingKnobs">
+    <Setter Property="Canvas.Left" Value="{DynamicResource KnobOffPosition}"/>
+   <Setter Property="Transitions">
+     <Transitions>
+       <DoubleTransition Property="Canvas.Left" Duration="0:0:0.2" Easing="CubicEaseOut"/>
+     </Transitions>
+   </Setter>
+  </Style>
  
   <!--******** POINTEROVER *******-->
               
-      <Style Selector="ToggleSwitch:pointerover /template/ Border#OuterBorder"> 
-       
-        <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOffPointerOver}"/>
-        <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOffPointerOver}"/>
-      </Style>
+    <Style Selector="ToggleSwitch:pointerover /template/ Border#OuterBorder"> 
+      <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOffPointerOver}"/>
+      <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOffPointerOver}"/>
+    </Style>
       
-      <Style Selector="ToggleSwitch:pointerover /template/ Ellipse#SwitchKnobOff"> 
-        <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffPointerOver}"/>
-      </Style>
+    <Style Selector="ToggleSwitch:pointerover /template/ Ellipse#SwitchKnobOff"> 
+      <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffPointerOver}"/>
+    </Style>
   
-      <Style Selector="ToggleSwitch:pointerover /template/ Ellipse#SwitchKnobOn"> 
-        <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnPointerOver}"/>
-      </Style>
+    <Style Selector="ToggleSwitch:pointerover /template/ Ellipse#SwitchKnobOn"> 
+      <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnPointerOver}"/>
+    </Style>
     
-       <Style Selector="ToggleSwitch:pointerover /template/ Border#SwitchKnobBounds"> 
-      
-        <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnPointerOver}"/>
-        <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnPointerOver}"/>
-      </Style>
+    <Style Selector="ToggleSwitch:pointerover /template/ Border#SwitchKnobBounds"> 
+      <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnPointerOver}"/>
+      <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnPointerOver}"/>
+    </Style>
          
-      <Style Selector="ToggleSwitch:pointerover /template/ Grid#SwitchAreaGrid"> 
-         <Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackgroundPointerOver}"/>
-      </Style>
+    <Style Selector="ToggleSwitch:pointerover /template/ Grid#SwitchAreaGrid"> 
+      <Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackgroundPointerOver}"/>
+    </Style>
   
   <!--******** PRESSED *******-->
   
@@ -243,49 +258,51 @@
        <Style Selector="ToggleSwitch:disabled /template/ Border#SwitchKnobBounds"> 
         <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnDisabled}"/>
         <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnDisabled}"/>
-      </Style>
+      </Style> 
     
-      <Style Selector="ToggleSwitch:disabled /template/ Grid#SwitchAreaGrid"> 
-        <Setter Property="Background" Value="{DynamicResource BackgroundDisabled}"/>
-      </Style>
+      <!--<Style Selector="ToggleSwitch:disabled /template/ Grid#SwitchAreaGrid"> 
+        <Setter Property="Background" Value="20"/>
+      </Style>-->
   
-   <!--******** CHECKED *******-->
-      <Style Selector="ToggleSwitch:checked /template/ Border#OuterBorder"> 
-        <Setter Property="Opacity" Value="0"/>
-      </Style>
+  <!--******** CHECKED *******-->
+  
+    <Style Selector="ToggleSwitch:checked /template/ Grid#MovingKnobs">
+     <Setter Property="Canvas.Left" Value="{DynamicResource KnobOnPosition}"/>
+    </Style>
+     
+    <Style Selector="ToggleSwitch:checked /template/ Border#OuterBorder"> 
+      <Setter Property="Opacity" Value="0"/>
+    </Style>
       
-      <Style Selector="ToggleSwitch:checked  /template/ Ellipse#SwitchKnobOff"> 
-        <Setter Property="Opacity" Value="0"/>
-        <!--<Setter Property="IsHitTestVisible" Value="false"/>-->
-      </Style>
+    <Style Selector="ToggleSwitch:checked  /template/ Ellipse#SwitchKnobOff"> 
+       <Setter Property="Opacity" Value="0"/>
+    </Style>
         
-      <Style Selector="ToggleSwitch:checked  /template/ Border#SwitchKnobBounds"> 
-        <Setter Property="Opacity" Value="1"/>
-        <!--<Setter Property="IsHitTestVisible" Value="false"/>-->
-      </Style>
+    <Style Selector="ToggleSwitch:checked  /template/ Border#SwitchKnobBounds"> 
+      <Setter Property="Opacity" Value="1"/>
+    </Style>
   
-      <Style Selector="ToggleSwitch:checked /template/ Ellipse#SwitchKnobOn"> 
-        <Setter Property="Opacity" Value="1"/>
-        <!--<Setter Property="IsHitTestVisible" Value="true"/>-->
-      </Style>
+    <Style Selector="ToggleSwitch:checked /template/ Ellipse#SwitchKnobOn"> 
+      <Setter Property="Opacity" Value="1"/>
+    </Style>
   
     <Style Selector="ToggleSwitch:checked /template/ ContentPresenter#PART_OffContentPresenter"> 
-        <Setter Property="Opacity" Value="0"/>
-        <!--<Setter Property="IsHitTestVisible" Value="false"/>-->
-      </Style>
+      <Setter Property="Opacity" Value="0"/>
+    </Style>
   
-      <Style Selector="ToggleSwitch:checked /template/ ContentPresenter#PART_OnContentPresenter"> 
-        <Setter Property="Opacity" Value="1"/>
-        <!--<Setter Property="IsHitTestVisible" Value="true"/>-->
-      </Style>
-      
-      
+    <Style Selector="ToggleSwitch:checked /template/ ContentPresenter#PART_OnContentPresenter"> 
+      <Setter Property="Opacity" Value="1"/>
+    </Style>
+     
   
   <!--******** UNCHECKED *******-->
   
-    <Style Selector="ToggleSwitch:unchecked /template/ Border#OuterBorder">
+   <Style Selector="ToggleSwitch:unchecked /template/ Grid#MovingKnobs"> 
+     <Setter Property="Canvas.Left" Value="{DynamicResource KnobOffPosition}"/>
+   </Style>
+  
+   <Style Selector="ToggleSwitch:unchecked /template/ Border#OuterBorder">
      <Setter Property="Opacity" Value="1"/>
-    
    </Style>
 
    <Style Selector="ToggleSwitch:unchecked /template/ Ellipse#SwitchKnobOff">
@@ -307,15 +324,19 @@
   <Style Selector="ToggleSwitch:unchecked /template/ ContentPresenter#PART_OnContentPresenter">
     <Setter Property="Opacity" Value="0"/>
   </Style>
-    
+  
+  <!--<Style Selector="ToggleSwitch:checked /template/Grid#MovingKnobs">
+     <Setter Property="Canvas.Left" Value="{StaticResource KnobOffPosition}"/>
+   </Style>-->
+     
     
  <Styles.Resources>
     <Thickness x:Key="ToggleSwitchTopHeaderMargin">0,0,0,6</Thickness>
     <x:Double x:Key="ToggleSwitchPreContentMargin">6</x:Double>
     <x:Double x:Key="ToggleSwitchPostContentMargin">6</x:Double>
     <x:Double x:Key="ToggleSwitchThemeMinWidth">154</x:Double>
-    <x:Double x:Key="KnobOnPosition">5</x:Double>
-    <x:Double x:Key="KnobOffPosition">28</x:Double>
+    <x:Double x:Key="KnobOnPosition">20</x:Double>
+    <x:Double x:Key="KnobOffPosition">0</x:Double>
  
  </Styles.Resources>