From 960780e670b758ebfd5ddace911ba80b2925627e Mon Sep 17 00:00:00 2001
From: Dan Walmsley <dan@walms.co.uk>
Date: Tue, 16 Jun 2020 14:31:30 -0300
Subject: [PATCH] make fluent and default templates match.

---
 src/Avalonia.Themes.Default/ToggleSwitch.xaml | 404 +++++++++---------
 1 file changed, 212 insertions(+), 192 deletions(-)

diff --git a/src/Avalonia.Themes.Default/ToggleSwitch.xaml b/src/Avalonia.Themes.Default/ToggleSwitch.xaml
index 7e1be173d9..b4c4e7b429 100644
--- a/src/Avalonia.Themes.Default/ToggleSwitch.xaml
+++ b/src/Avalonia.Themes.Default/ToggleSwitch.xaml
@@ -1,21 +1,28 @@
-<!--Version wo 10-6-2020 17:30 -->
 <Styles xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:sys="clr-namespace:System;assembly=netstandard">
-
+  <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">20</x:Double>
+    <x:Double x:Key="KnobOffPosition">0</x:Double>
+  </Styles.Resources>
   <Design.PreviewWith>
-    <StackPanel Margin="20" Width="250" Spacing="24">
-
-      <StackPanel Spacing="12">
+    <StackPanel Margin="20" Width="250" Spacing="24" >
+      <StackPanel Spacing="12" >
         <TextBlock
           Text="Automatic updates"
           Classes="h1"/>
         <TextBlock
           Text="Updates will be automaticly Downloaded and installed shile the computer is shutting down or restarting"
           TextWrapping="Wrap"/>
-        <ToggleSwitch Content="Enable automatic Updates?"
-          FontWeight="Medium"
-          VerticalAlignment="Bottom" />
+        <ToggleSwitch HorizontalContentAlignment="Left"
+          Content="Enable automatic Updates?"
+          OffContent="Uit"
+          OnContent="Aan"
+          VerticalAlignment="Bottom"/>
       </StackPanel>
 
       <StackPanel Spacing="12">
@@ -27,247 +34,260 @@
           TextWrapping="Wrap"/>
         <ToggleSwitch
           Content="Previewer"
-          IsChecked="True"
-          FontWeight="Medium"/>
+          IsChecked="True" />
       </StackPanel>
-
     </StackPanel>
   </Design.PreviewWith>
 
-
-  <Style Selector=":is(ToggleSwitch)">
-
+  <Style Selector="ToggleSwitch">
+    <Setter Property="Foreground" Value="{DynamicResource ToggleSwitchContentForeground}" />
+    <Setter Property="HorizontalAlignment" Value="Left" />
+    <Setter Property="VerticalAlignment" Value="Center" />
+    <Setter Property="HorizontalContentAlignment" Value="Left" />
     <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
     <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
-    <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}" />
-    <Setter Property="MinWidth" Value="72"/>
-    <Setter Property="MinHeight" Value="32"/>
-
     <Setter Property="Template">
       <ControlTemplate>
-        <Grid
-          ColumnDefinitions="Auto,*"
-          RowDefinitions="22,auto">
+        <Grid Background="{TemplateBinding Background}"
+          RowDefinitions="Auto,*">
+
+          <ContentPresenter x:Name="PART_ContentPresenter"
+            Grid.Row="0"
+            Content="{TemplateBinding Content}"
+            ContentTemplate="{TemplateBinding ContentTemplate}"
+            Margin="{DynamicResource ToggleSwitchTopHeaderMargin}"
+            VerticalAlignment="Top"/>
+
+          <Grid Grid.Row="1"
+            MinWidth="{StaticResource ToggleSwitchThemeMinWidth}"
+            HorizontalAlignment="Left"
+            VerticalAlignment="Top">
+
+            <Grid.RowDefinitions>
+              <RowDefinition Height="{DynamicResource ToggleSwitchPreContentMargin}" />
+              <RowDefinition Height="Auto" />
+              <RowDefinition Height="{DynamicResource ToggleSwitchPostContentMargin}" />
+            </Grid.RowDefinitions>
+
+            <Grid.ColumnDefinitions>
+              <ColumnDefinition Width="Auto" />
+              <ColumnDefinition Width="12" MaxWidth="12" />
+              <ColumnDefinition Width="Auto" />
+            </Grid.ColumnDefinitions>
+
+            <Grid x:Name="SwitchAreaGrid"
+              Grid.RowSpan="3"
+              Grid.ColumnSpan="3"
+              Margin="0,5" />
+
+            <ContentPresenter x:Name="PART_OffContentPresenter"
+              Grid.RowSpan="3"
+              Grid.Column="2"
+              Content="{TemplateBinding OffContent}"
+              ContentTemplate="{TemplateBinding OffContentTemplate}"
+              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
 
-          <Canvas
-              Height="24"
-              Grid.Row="1"
-              Grid.Column="0">
-
-            <Border
-                Name="PART_BorderBackground"
-                Height="20" Width="44"
-                Canvas.Top="2"
-                Canvas.Left="0"
-                BorderThickness="1.5"
-                CornerRadius="100"/>
-
-            <Ellipse
-                Name="PART_CircleThumb"
-                Height="10" Width="10"
-                Canvas.Top="7"/>
-
-            <ContentControl
-                Name="PART_TextBooleanValue"
-                Canvas.Left="54"
-                VerticalContentAlignment="Bottom"
-                Height="20"/>
-          </Canvas>
-
-          <ContentPresenter
-              Name="PART_ContentPresenter"
-              ContentTemplate="{TemplateBinding ContentTemplate}"
-              Content="{TemplateBinding Content}"
-              Margin="{TemplateBinding Padding}"
-              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+            <ContentPresenter x:Name="PART_OnContentPresenter"
+              Grid.RowSpan="3"
+              Grid.Column="2"
+              Content="{TemplateBinding OnContent}"
+              ContentTemplate="{TemplateBinding OnContentTemplate}"
               HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-              Background="Transparent"
-              IsVisible="{TemplateBinding Content, Converter={x:Static ObjectConverters.IsNotNull}}"
-              Grid.Row="0" Grid.Column="0"/>
+              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
+
+            <Border x:Name="OuterBorder"
+              Grid.Row="1"
+              Height="20"
+              Width="40"
+              CornerRadius="10"
+              BorderThickness="{DynamicResource ToggleSwitchOuterBorderStrokeThickness}" />
+
+            <Border x:Name="SwitchKnobBounds"
+              Grid.Row="1"
+              Height="20"
+              Width="40"
+              CornerRadius="10"
+              BorderThickness="{DynamicResource ToggleSwitchOnStrokeThickness}"/>
+
+            <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="SwitchKnobOff"
+                         Width="10" Height="10" />
+              </Grid>
+            </Canvas>
+          </Grid>
         </Grid>
       </ControlTemplate>
     </Setter>
+  </Style>
 
+  <!-- NormalState -->
+  <Style Selector="ToggleSwitch /template/ Grid#SwitchAreaGrid">
+    <Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackground}"/>
   </Style>
 
-  <!--Position Transition Thump-->
-  <Style Selector="ToggleSwitch /template/ Ellipse#PART_CircleThumb">
-    <Setter Property="Canvas.Left" Value="{DynamicResource ThumbLeft}"/>
-    <Setter Property="Fill" Value="White" />
+  <Style Selector="ToggleSwitch /template/ Border#OuterBorder">
+    <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOff}"/>
+    <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOff}"/>
+  </Style>
+
+  <Style Selector="ToggleSwitch /template/ Border#SwitchKnobBounds">
+    <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOn}"/>
+    <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOn}"/>
+  </Style>
+
+  <Style Selector="ToggleSwitch /template/ Ellipse#SwitchKnobOn">
+    <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOn}"/>
+    <Setter Property="Stroke" Value="{DynamicResource ToggleSwitchKnobStrokeOn}"/>
+  </Style>
+
+  <Style Selector="ToggleSwitch /template/ Ellipse#SwitchKnobOff">
+    <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.4" Easing="CubicEaseOut"/>
+        <DoubleTransition Property="Canvas.Left" Duration="0:0:0.2" Easing="CubicEaseOut"/>
       </Transitions>
     </Setter>
   </Style>
 
-  <!--Color thumbAnimation  Off-->
-  <Style Selector="ToggleSwitch:unchecked /template/ Ellipse#PART_CircleThumb">
-    <Setter Property="Canvas.Left" Value="{DynamicResource ThumbLeft}"/>
-    <!--psition animation is handled by transition-->
-    <Style.Animations>
-      <Animation Duration="0:0:0.35" FillMode="Forward" Easing="CubicEaseOut" >
-        <KeyFrame Cue="0%">
-          <Setter Property="Fill" Value="White"/>
-        </KeyFrame>
-        <KeyFrame Cue="100%">
-          <Setter Property="Fill" Value="Royalblue"/>
-        </KeyFrame>
-      </Animation>
-    </Style.Animations>
-  </Style>
-
-  <!--color thumbAnimation  Onn-->
-  <Style Selector="ToggleSwitch:checked /template/ Ellipse#PART_CircleThumb">
-    <Setter Property="Canvas.Left" Value="{DynamicResource ThumbRight}"/>
-    <!--psition animation is handled by transition-->
-    <Style.Animations>
-      <Animation Duration="0:0:0.4" FillMode="Forward" Easing="CubicEaseOut">
-        <KeyFrame Cue="0%">
-          <Setter Property="Fill" Value="Royalblue"/>
-        </KeyFrame>
-        <KeyFrame Cue="100%">
-          <Setter Property="Fill" Value="White"/>
-        </KeyFrame>
-      </Animation>
-    </Style.Animations>
-  </Style>
-
-  <!--color BackGround Animation  Off-->
-  <Style Selector="ToggleSwitch /template/ Border#PART_BorderBackground">
-    <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOff}"/>
+  <!-- PointerOverState -->
+  <Style Selector="ToggleSwitch:pointerover /template/ Border#OuterBorder">
+    <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOffPointerOver}"/>
+    <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOffPointerOver}"/>
   </Style>
 
-  <Style Selector="ToggleSwitch:unchecked /template/ Border#PART_BorderBackground">
-    <Style.Animations>
-      <Animation Duration="0:0:0.5" FillMode="Forward" Easing="CubicEaseOut">
-        <KeyFrame Cue="0%">
-          <Setter Property="Background" Value="Royalblue"/>
-        </KeyFrame>
-        <KeyFrame Cue="100%">
-          <Setter Property="Background" Value="White"/>
-        </KeyFrame>
-      </Animation>
-    </Style.Animations>
-    <!--<Setter Property="BorderBrush" Value="Royalblue"/>-->
+  <Style Selector="ToggleSwitch:pointerover /template/ Ellipse#SwitchKnobOff">
+    <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffPointerOver}"/>
   </Style>
 
-  <!--color BackGrounf Animation  On-->
-  <Style Selector="ToggleSwitch:checked /template/ Border#PART_BorderBackground">
-    <Style.Animations>
-      <Animation Duration="0:0:0.4" FillMode="Forward" Easing="CubicEaseOut">
-        <KeyFrame Cue="0%">
-          <Setter Property="Background" Value="white"/>
-        </KeyFrame>
-        <KeyFrame Cue="100%">
-          <Setter Property="Background" Value="Royalblue"/>
-        </KeyFrame>
-      </Animation>
-    </Style.Animations>
-    <!--<Setter Property="BorderBrush" Value="Royalblue"/>-->
+  <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 /template/ Border#PART_BorderBackground">
-      <Setter Property="Opacity" Value="100" />
-      <Setter Property="Transitions">
-        <Transitions>
-          <DoubleTransition Property="Opacity" Duration="0:0:0.2" Easing="CubicEaseOut"/>
-        </Transitions>
-      </Setter>
-    </Style>-->
+  <Style Selector="ToggleSwitch:pointerover /template/ Grid#SwitchAreaGrid">
+    <Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackgroundPointerOver}"/>
+  </Style>
 
-  <!--Setting the On/Of Text. This might be changed in the near future -->
-  <Style Selector="ToggleSwitch:checked /template/ ContentControl#PART_TextBooleanValue">
-    <Setter Property="Content" Value="On"/>
+  <!-- PressedState -->
+  <Style Selector="ToggleSwitch:pressed /template/ Border#OuterBorder">
+    <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOffPressed}"/>
+    <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOffPressed}"/>
   </Style>
 
-  <Style Selector="ToggleSwitch:unchecked /template/ ContentControl#PART_TextBooleanValue">
-    <Setter Property="Content" Value="Off"/>
+  <Style Selector="ToggleSwitch:pressed /template/ Border#SwitchKnobBounds">
+    <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnPressed}"/>
+    <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnPressed}"/>
   </Style>
 
-  <!--border BackGround MouseOver-->
-  <Style Selector="ToggleSwitch /template/ Border#PART_BorderBackground:pointerover">
-    <Setter Property="BorderBrush" Value="cornflowerblue"/>
+  <Style Selector="ToggleSwitch:pressed /template/ Ellipse#SwitchKnobOff">
+    <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffPressed}"/>
   </Style>
 
-  <!--BackGround Mouseover and checked-->
-  <!--<Style Selector="ToggleSwitch:checked /template/ Border#PART_BorderBackground:pointerover">
-        <Setter Property="Opacity" Value="50"/>
-   </Style>-->
+  <Style Selector="ToggleSwitch:pressed /template/ Ellipse#SwitchKnobOn">
+    <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnPressed}"/>
+  </Style>
 
-  <!--Border -BackGround Focus and checkred-->
-  <Style Selector="ToggleSwitch:focus:checked /template/ Border#PART_BorderBackground">
-    <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOn}"/>
+  <Style Selector="ToggleSwitch:pressed /template/ Grid#SwitchAreaGrid">
+    <Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackgroundPressed}"/>
   </Style>
-  <!--Border -BackGround Focus and uncheckred-->
-  <Style Selector="ToggleSwitch:focus:unchecked /template/ Border#PART_BorderBackground">
-    <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchFillOn}"/>
+
+  <!-- DisabledState -->
+  <Style Selector="ToggleSwitch:disabled">
+    <Setter Property="Foreground" Value="{DynamicResource ToggleSwitchHeaderForegroundDisabled}"/>
   </Style>
 
+  <Style Selector="ToggleSwitch:disabled /template/ Border#OuterBorder">
+    <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOffDisabled}"/>
+    <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOffPressed}"/>
+  </Style>
 
-  <!--BackGround Focus + Mouseover-->
-  <Style Selector="ToggleSwitch:focus /template/ Border#PART_BorderBackground:pointerover">
-    <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnPointerOver}"/>
+  <Style Selector="ToggleSwitch:disabled /template/ Ellipse#SwitchKnobOff">
+    <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffDisabled}"/>
   </Style>
 
-  <!--Control disabled-->
-  <Style Selector="ToggleSwitch:disabled">
-    <Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}"/>
+  <Style Selector="ToggleSwitch:disabled /template/ Ellipse#SwitchKnobOn">
+    <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnDisabled}"/>
   </Style>
 
+  <Style Selector="ToggleSwitch:disabled /template/ Border#SwitchKnobBounds">
+    <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnDisabled}"/>
+    <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnDisabled}"/>
+  </Style>
 
-  <!--****** PRESSED ******-->
-  <!--Because of a bug in color animation flikkering apears -->
-  <!--Implement later-->
+  <!-- CheckedState -->
+  <Style Selector="ToggleSwitch:checked /template/ Grid#MovingKnobs">
+    <Setter Property="Canvas.Left" Value="{DynamicResource KnobOnPosition}"/>
+  </Style>
 
-  <!--<Style Selector="ToggleSwitch:pressed /template/ Border#PART_BorderBackground">
-          <Style.Animations>
-            <Animation Duration="0:0:0.1" FillMode="Forward" Easing="CubicEaseOut">
-              <KeyFrame Cue="100%">
-                <Setter Property="Background" Value="Gray"/>
-              </KeyFrame>
-            </Animation>
-          </Style.Animations>
-         </Style>-->
+  <Style Selector="ToggleSwitch:checked /template/ Border#OuterBorder">
+    <Setter Property="Opacity" Value="0"/>
+  </Style>
 
-  <!--****** iNDETERMINATE ******-->
-  <!--What should i do here?-->
+  <Style Selector="ToggleSwitch:checked  /template/ Ellipse#SwitchKnobOff">
+    <Setter Property="Opacity" Value="0"/>
+  </Style>
 
-  <!--<Style Selector="ToggleSwitch:indeterminate /template/ ContentControl#PART_TextBooleanValue">
-            <Setter Property="Content" Value="Not set"/>
-         </Style>-->
+  <Style Selector="ToggleSwitch:checked  /template/ Border#SwitchKnobBounds">
+    <Setter Property="Opacity" Value="1"/>
+  </Style>
 
-  <Style Selector="ToggleSwitch:indeterminate /template/ Border#PART_BorderBackground">
-    <Setter Property="Background" Value="White"/>
+  <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"/>
+  </Style>
 
-  <!--******** Mouse over of checked state *********-->
-  <!--Because of a bug in color animation flikkering apears -->
-  <!--Implement later-->
+  <Style Selector="ToggleSwitch:checked /template/ ContentPresenter#PART_OnContentPresenter">
+    <Setter Property="Opacity" Value="1"/>
+  </Style>
 
-  <!--<Style Selector="ToggleSwitch:checked /template/ Border#PART_BorderBackground:pointerover">
-         <Style.Animations>
-          <Animation Duration="0:0:0.1" FillMode="Forward" Easing="CubicEaseOut">
-            
-            <KeyFrame Cue="100%">
-              <Setter Property="Background" Value="cornflowerblue"/>
-            </KeyFrame>
-          </Animation>
-          </Style.Animations>
-      </Style>-->
+  <!--UncheckedState -->
+  <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>
 
-  <Styles.Resources>
+  <Style Selector="ToggleSwitch:unchecked /template/ Ellipse#SwitchKnobOff">
+    <Setter Property="Opacity" Value="1"/>
+  </Style>
 
-    <sys:Double x:Key="ThumbLeft">5</sys:Double>
-    <sys:Double x:Key="ThumbRight">28</sys:Double>
-    <Color x:Key="ColorFILLOn">RoyalBlue</Color>
-    <!--Animating a color via a resource does not work!-->
-    <Color x:Key="ColorFILLOff">White</Color>
-    <!-- ""  -->
+  <Style Selector="ToggleSwitch:unchecked /template/ Ellipse#SwitchKnobOn">
+    <Setter Property="Opacity" Value="0"/>
+  </Style>
 
-  </Styles.Resources>
+  <Style Selector="ToggleSwitch:unchecked  /template/ Border#SwitchKnobBounds">
+    <Setter Property="Opacity" Value="0"/>
+  </Style>
 
+  <Style Selector="ToggleSwitch:unchecked /template/ ContentPresenter#PART_OffContentPresenter">
+    <Setter Property="Opacity" Value="1"/>
+  </Style>
+
+  <Style Selector="ToggleSwitch:unchecked /template/ ContentPresenter#PART_OnContentPresenter">
+    <Setter Property="Opacity" Value="0"/>
+  </Style>
 </Styles>