From 78993eb33cb062c0bba8cc352c17fae1ecd31484 Mon Sep 17 00:00:00 2001
From: JamRemco <58340108+JamRemco@users.noreply.github.com>
Date: Fri, 12 Jun 2020 19:48:52 +0200
Subject: [PATCH] Add contentoff and contentOn to toggleswitch Add more
 resource suport

---
 src/Avalonia.Controls/ToggleSwitch.cs         | 115 ++++-
 .../Accents/FluentControlResourcesDark.xaml   |   7 +-
 .../Accents/FluentControlResourcesLight.xaml  |  10 +-
 src/Avalonia.Themes.Fluent/ToggleSwitch.xaml  | 465 ++++++++++--------
 4 files changed, 375 insertions(+), 222 deletions(-)

diff --git a/src/Avalonia.Controls/ToggleSwitch.cs b/src/Avalonia.Controls/ToggleSwitch.cs
index 19f282d2d1..16caf8dbfb 100644
--- a/src/Avalonia.Controls/ToggleSwitch.cs
+++ b/src/Avalonia.Controls/ToggleSwitch.cs
@@ -1,16 +1,119 @@
 using Avalonia.Controls.Primitives;
+using Avalonia.Controls.Mixins;
+using Avalonia.Controls.Presenters;
+using Avalonia.Controls.Templates;
+using Avalonia.LogicalTree;
+
 
 namespace Avalonia.Controls
 {
     /// <summary>
     /// A WinUi like ToggleSwitch control.
     /// </summary>
+    /// 
+
     public class ToggleSwitch : ToggleButton
     {
-    }
+        public static readonly StyledProperty<object> OffContentProperty =
+         AvaloniaProperty.Register<ToggleSwitch, object>(nameof(OffContent));
+
+        public static readonly StyledProperty<IDataTemplate> OffContentTemplateProperty =
+            AvaloniaProperty.Register<ToggleSwitch, IDataTemplate>(nameof(OffContentTemplate));
+
+
+        public static readonly StyledProperty<object> OnContentProperty =
+      AvaloniaProperty.Register<ToggleSwitch, object>(nameof(OnContent));
+
+        public static readonly StyledProperty<IDataTemplate> OnContentTemplateProperty =
+            AvaloniaProperty.Register<ToggleSwitch, IDataTemplate>(nameof(OnContentTemplate));
+
+        public object OnContent
+        {
+            get { return GetValue(OnContentProperty); }
+            set { SetValue(OnContentProperty, value); }
+        }
+
+        public object OffContent
+        {
+            get { return GetValue(OffContentProperty); }
+            set { SetValue(OffContentProperty, value); }
+        }
+
+        public IContentPresenter OffContentPresenter
+        {
+            get;
+            private set;
+        }
+
+        public IContentPresenter OnContentPresenter
+        {
+            get;
+            private set;
+        }
+
+
+        public IDataTemplate OffContentTemplate
+        {
+            get { return GetValue(OffContentTemplateProperty); }
+            set { SetValue(OffContentTemplateProperty, value); }
+        }
+
+        public IDataTemplate OnContentTemplate
+        {
+            get { return GetValue(OnContentTemplateProperty); }
+            set { SetValue(OnContentTemplateProperty, value); }
+        }
+
+        private void OffContentChanged(AvaloniaPropertyChangedEventArgs e)
+        {
+            if (e.OldValue is ILogical oldChild)
+            {
+                LogicalChildren.Remove(oldChild);
+            }
+
+            if (e.NewValue is ILogical newChild)
+            {
+                LogicalChildren.Add(newChild);
+            }
+        }
+
+        private void OnContentChanged(AvaloniaPropertyChangedEventArgs e)
+        {
+            if (e.OldValue is ILogical oldChild)
+            {
+                LogicalChildren.Remove(oldChild);
+            }
+
+            if (e.NewValue is ILogical newChild)
+            {
+                LogicalChildren.Add(newChild);
+            }
+        }
+
+        static ToggleSwitch()
+        {
+            OffContentProperty.Changed.AddClassHandler<ToggleSwitch>((x, e) => x.OffContentChanged(e));
+            OnContentProperty.Changed.AddClassHandler<ToggleSwitch>((x, e) => x.OnContentChanged(e));
+        }
+
+
+        protected override bool RegisterContentPresenter(IContentPresenter presenter)
+        {
+            var result = base.RegisterContentPresenter(presenter);
+
+            if (presenter.Name == "Part_OnContentPresenter")
+            {
+                OnContentPresenter = presenter;
+                result = true;
+            }
+            if (presenter.Name == "PART_OffContentPresenter")
+            {
+                OffContentPresenter = presenter;
+                result = true;
+            }
+
+            return result;
+        }
+    }           
 }
-/********** Todo ***********
- * 
- * Implement ContenOff property
- * Implement ContentOn property.
-*/
+
diff --git a/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml b/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml
index da3c20e844..9fa0458db3 100644
--- a/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml
+++ b/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml
@@ -346,8 +346,10 @@
   
   <!--ToggleSwitch-->
 
-    <x:Double x:Key="ToggleSwitchOnStrokeThickness">0</x:Double>
-    <x:Double x:Key="ToggleSwitchOuterBorderStrokeThickness">1</x:Double>
+    <!--<x:Double x:Key="ToggleSwitchOnStrokeThickness">0</x:Double>-->
+    <Thickness x:Key="ToggleSwitchOnStrokeThickness">0</Thickness>
+    <!--<x:Double x:Key="ToggleSwitchOuterBorderStrokeThickness">1</x:Double>-->
+    <Thickness x:Key="ToggleSwitchOuterBorderStrokeThickness">1</Thickness>
     <StaticResource x:Key="ToggleSwitchContentForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
     <StaticResource x:Key="ToggleSwitchContentForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
     <StaticResource x:Key="ToggleSwitchHeaderForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
@@ -380,7 +382,6 @@
     <StaticResource x:Key="ToggleSwitchKnobFillOnPointerOver" ResourceKey="SystemControlHighlightChromeWhiteBrush" />
     <StaticResource x:Key="ToggleSwitchKnobFillOnPressed" ResourceKey="SystemControlHighlightAltChromeWhiteBrush" />
     <StaticResource x:Key="ToggleSwitchKnobFillOnDisabled" ResourceKey="SystemControlPageBackgroundBaseLowBrush" />
-
     <SolidColorBrush x:Key="ToggleSwitchCurtainBackgroundThemeBrush" Color="#FF5729C1" />
     <SolidColorBrush x:Key="ToggleSwitchCurtainDisabledBackgroundThemeBrush" Color="Transparent" />
     <SolidColorBrush x:Key="ToggleSwitchCurtainPointerOverBackgroundThemeBrush" Color="#FF6E46CA" />
diff --git a/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml b/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml
index 2426c1034c..5c23bc96ee 100644
--- a/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml
+++ b/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml
@@ -345,8 +345,12 @@
     <SolidColorBrush x:Key="RadioButtonContentPointerOverForegroundThemeBrush" Color="{DynamicResource SystemColorHighlightTextColor}" />
     
     <!--Recources ToggleSwitch-->
-    <x:Double x:Key="ToggleSwitchOnStrokeThickness">0</x:Double>
-    <x:Double x:Key="ToggleSwitchOuterBorderStrokeThickness">1</x:Double>
+    <!--<x:Double x:Key="ToggleSwitchOnStrokeThickness">0</x:Double>-->
+    
+    
+    <Thickness x:Key="ToggleSwitchOnStrokeThickness">0</Thickness>
+    <!--<x:Double x:Key="ToggleSwitchOuterBorderStrokeThickness">1</x:Double>-->
+    <Thickness x:Key="ToggleSwitchOuterBorderStrokeThickness">1</Thickness>
     <StaticResource x:Key="ToggleSwitchContentForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
     <StaticResource x:Key="ToggleSwitchContentForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
     <StaticResource x:Key="ToggleSwitchHeaderForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
@@ -379,7 +383,6 @@
     <StaticResource x:Key="ToggleSwitchKnobFillOnPointerOver" ResourceKey="SystemControlHighlightChromeWhiteBrush" />
     <StaticResource x:Key="ToggleSwitchKnobFillOnPressed" ResourceKey="SystemControlHighlightAltChromeWhiteBrush" />
     <StaticResource x:Key="ToggleSwitchKnobFillOnDisabled" ResourceKey="SystemControlPageBackgroundBaseLowBrush" />
-
     <SolidColorBrush x:Key="ToggleSwitchCurtainBackgroundThemeBrush" Color="#FF4617B4" />
     <SolidColorBrush x:Key="ToggleSwitchCurtainDisabledBackgroundThemeBrush" Color="Transparent" />
     <SolidColorBrush x:Key="ToggleSwitchCurtainPointerOverBackgroundThemeBrush" Color="#FF5F37BE" />
@@ -404,6 +407,5 @@
     <SolidColorBrush x:Key="ToggleSwitchTrackPointerOverBackgroundThemeBrush" Color="#4A000000" />
     <SolidColorBrush x:Key="ToggleSwitchTrackPressedBackgroundThemeBrush" Color="#42000000" />
 
-
   </Style.Resources>
 </Style>
diff --git a/src/Avalonia.Themes.Fluent/ToggleSwitch.xaml b/src/Avalonia.Themes.Fluent/ToggleSwitch.xaml
index 2f311043fd..df9be1284a 100644
--- a/src/Avalonia.Themes.Fluent/ToggleSwitch.xaml
+++ b/src/Avalonia.Themes.Fluent/ToggleSwitch.xaml
@@ -4,7 +4,7 @@
         xmlns:sys="clr-namespace:System;assembly=netstandard">
     
   <Design.PreviewWith>
-    <StackPanel Margin="20" Width="250" Spacing="24">
+    <StackPanel Margin="20" Width="250" Spacing="24" >
 
       <StackPanel Spacing="12">
         <TextBlock
@@ -13,8 +13,10 @@
         <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"
+        <ToggleSwitch 
+          Content="Enable automatic Updates?" 
+          OffContent="Uit" 
+          OnContent="Aan"
           VerticalAlignment="Bottom" />
       </StackPanel>
 
@@ -26,244 +28,289 @@
           Text="The previewer Shows a preview off your code, this could slow down your system"
           TextWrapping="Wrap"/>
         <ToggleSwitch 
+          OnContent="Yes" OffContent="No"
           Content="Previewer" 
           IsChecked="True"
-          FontWeight="Medium"/>
+        />
       </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="ManipulationMode" Value="System,TranslateX" />
+        <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
+        <Setter Property="FocusVisualMargin" Value="-7,-3,-7,-3" />-->
+        <Setter Property="Template">
+        <ControlTemplate>
+        <Grid
+            Background="{TemplateBinding Background}"
+                
+            RowDefinitions="Auto,*">
 
-      <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"/>
+               <ContentPresenter x:Name="PART_ContentPresenter"
+                  Grid.Row="0"
+                  Content="{TemplateBinding Content}"
+                  ContentTemplate="{TemplateBinding ContentTemplate}"
+                 
+                  Margin="{DynamicResource ToggleSwitchTopHeaderMargin}"
+                  VerticalAlignment="Top"/>
 
-      <Setter Property="Template">
-        <ControlTemplate>
-          <Grid 
-            ColumnDefinitions="Auto,*"
-            RowDefinitions="22,auto">
-            
-            <Canvas
-                Height="24"
-                Grid.Row="1"
-                Grid.Column="0">
+                  <Grid
+                    Grid.Row="1"
+                    MinWidth="{StaticResource ToggleSwitchThemeMinWidth}"
+                    HorizontalAlignment="Left"
+                    VerticalAlignment="Top">
 
-              <Border
-                  Name="PART_BorderBackground"
-                  Height="20" Width="44"
-                  Canvas.Top="2"
-                  Canvas.Left="0"
-                  BorderThickness="1.5"
-                  CornerRadius="100"/>
+                    <Grid.RowDefinitions>
+                      <RowDefinition Height="{DynamicResource ToggleSwitchPreContentMargin}" />
+                      <RowDefinition Height="Auto" />
+                      <RowDefinition Height="{DynamicResource ToggleSwitchPostContentMargin}" />
+                     </Grid.RowDefinitions>
 
-              <Ellipse 
-                  Name="PART_CircleThumb"
-                  Height="10" Width="10"
-                  Canvas.Top="7"/>
+                    <Grid.ColumnDefinitions>
+                      <ColumnDefinition Width="Auto" />
+                      <ColumnDefinition Width="12" MaxWidth="12" />
+                      <ColumnDefinition Width="Auto" />
+                    </Grid.ColumnDefinitions>
 
-              <ContentControl 
-                  Name="PART_TextBooleanValue"
-                  Canvas.Left="54" 
-                  VerticalContentAlignment="Bottom" 
-                  Height="20"/>
-            </Canvas>
+                    <Grid x:Name="SwitchAreaGrid"
 
-            <ContentPresenter
-                Name="PART_ContentPresenter"
-                ContentTemplate="{TemplateBinding ContentTemplate}"
-                Content="{TemplateBinding Content}"
-                Margin="{TemplateBinding Padding}"
-                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                Background="Transparent"
-                IsVisible="{TemplateBinding Content, Converter={x:Static ObjectConverters.IsNotNull}}"
-                Grid.Row="0" Grid.Column="0"/>
-          </Grid>
+                      Grid.RowSpan="3"
+                      Grid.ColumnSpan="3"
+                      Margin="0,5"
+                               
+                      Background="{DynamicResource ToggleSwitchContainerBackground}" />
+
+                      <ContentPresenter x:Name="PART_OffContentPresenter"
+                        Grid.RowSpan="3"
+                        Grid.Column="2"
+                        
+                        
+                        Content="{TemplateBinding OffContent}"
+                        ContentTemplate="{TemplateBinding OffContentTemplate}"
+                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                />
+
+                        <ContentPresenter x:Name="PART_OnContentPresenter"
+                          Grid.RowSpan="3"
+                          Grid.Column="2"
+                        
+                          Content="{TemplateBinding OnContent}"
+                          ContentTemplate="{TemplateBinding OnContentTemplate}"
+                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                 />
+                          
+                         <Border x:Name="OuterBorder"
+                            Grid.Row="1"
+                            Height="20"
+                            Width="40" 
+                            CornerRadius="50"
+                            Background="{DynamicResource ToggleSwitchFilloff}"
+                            BorderBrush="{DynamicResource ToggleSwitchStrokeOn}"
+                            BorderThickness="{DynamicResource ToggleSwitchOuterBorderStrokeThickness}" />
+                          
+                         <Border x:Name="SwitchKnobBounds"
+                            Grid.Row="1"
+                            Height="20"
+                            Width="40"
+                            CornerRadius="50"
+                            Background="{DynamicResource ToggleSwitchFillOn}"
+                            BorderBrush="{DynamicResource ToggleSwitchStrokeOn}"
+                            BorderThickness="{DynamicResource ToggleSwitchOnStrokeThickness}"
+                            />
+                          
+                         <Grid x:Name="SwitchKnob"
+                            Grid.Row="1"
+                            HorizontalAlignment="Left"
+                            Width="20"
+                            Height="20">
+                            <Ellipse x:Name="SwitchKnobOn"
+                              Fill="{DynamicResource ToggleSwitchKnobFillOn}"
+                              Width="10"
+                              Height="10"
+                               />
+                            <Ellipse x:Name="SwitchKnobOff"
+                              Fill="{DynamicResource ToggleSwitchKnobFillOff}"
+                              Width="10"
+                              Height="10" />
+                              <Grid.RenderTransform>
+                                    <!--<TranslateTransform x:Name="KnobTranslateTransform" />-->
+                              </Grid.RenderTransform>
+                         </Grid>
+                    
+                            <Thumb x:Name="SwitchThumb"
+                              Grid.RowSpan="3"
+                                Grid.ColumnSpan="3">
+                                <Thumb.Template>
+                                  <ControlTemplate>
+                                    <Rectangle Fill="Transparent" />
+                                  </ControlTemplate>
+                                </Thumb.Template>
+                              </Thumb>
+                  
+                        </Grid>
+                    </Grid>
         </ControlTemplate>
       </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/ Ellipse#SwitchKnobOff"> 
+        <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffPointerOver}"/>
+      </Style>
+  
+      <Style Selector="ToggleSwitch:PointerOver /template/ Ellipse#SwitchKnobOn"> 
+        <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnPointerOver}"/>
+      </Style>
     
-    <!--Position Transition Thump-->
-    <Style Selector="ToggleSwitch /template/ Ellipse#PART_CircleThumb">
-      <Setter Property="Canvas.Left" Value="{DynamicResource ThumbLeft}"/>
-      <Setter Property="Fill" Value="White" />
-      <Setter Property="Transitions">
-        <Transitions>
-          <DoubleTransition Property="Canvas.Left" Duration="0:0:0.4" Easing="CubicEaseOut"/>
-        </Transitions>
-      </Setter>
-    </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>
   
-  <!--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>
+  <!--******** PRESSED *******-->
+  
+      <Style Selector="ToggleSwitch:pressed /template/ Border#OuterBorder"> 
+        <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOffPressed}"/>
+        <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOffPressed}"/>
+      </Style>
+  
+      <Style Selector="ToggleSwitch:pressed /template/ Border#SwitchKnobBounds"> 
+        <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnPressed}"/>
+        <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnPressed}"/>
+      </Style>
+  
+      <Style Selector="ToggleSwitch:pressed /template/ Ellipse#SwitchKnobOff"> 
+        <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffPressed}"/>
+      </Style>
+  
+      <Style Selector="ToggleSwitch:pressed /template/ Ellipse#SwitchKnobOn"> 
+        <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnPressed}"/>
+      </Style>
+    
+      <Style Selector="ToggleSwitch:pressed /template/ Grid#SwitchAreaGrid"> 
+        <Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackgroundPressed}"/>
+      </Style>
+  
+   <!--******** DISABLED *******-->
 
-  <!--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>
+      <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>
+      
+      <Style Selector="ToggleSwitch:disabled /template/ Ellipse#SwitchKnobOff"> 
+        <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffDisabled}"/>
+      </Style>
+  
+      <Style Selector="ToggleSwitch:disabled /template/ Ellipse#SwitchKnobOn"> 
+        <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnDisabled}"/>
+      </Style>
     
-  <!--color BackGround Animation  Off-->
-    <Style Selector="ToggleSwitch /template/ Border#PART_BorderBackground">
-      <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOff}"/>
-    </Style>
+       <Style Selector="ToggleSwitch:disabled /template/ Border#SwitchKnobBounds"> 
+        <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnDisabled}"/>
+        <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnDisabled}"/>
+      </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>
-
-   <!--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>
-     
+      <Style Selector="ToggleSwitch:disabled /template/ Grid#SwitchAreaGrid"> 
+        <Setter Property="Background" Value="{DynamicResource BackgroundDisabled}"/>
+      </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>-->
+   <!--******** CHECKED *******-->
+      <Style Selector="ToggleSwitch:checked /template/ Border#OuterBorder"> 
+        <Setter Property="Opacity" Value="1"/>
+      </Style>
+      
+      <Style Selector="ToggleSwitch:checked  /template/ Ellipse#SwitchKnobOff"> 
+        <Setter Property="Opacity" Value="0"/>
+        <!--<Setter Property="IsHitTestVisible" Value="false"/>-->
+      </Style>
+        
+      <Style Selector="ToggleSwitch:checked  /template/ Border#SwitchKnobBounds"> 
+        <Setter Property="Opacity" Value="0"/>
+        <!--<Setter Property="IsHitTestVisible" Value="false"/>-->
+      </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"/>
-    </Style>
-
-    <Style Selector="ToggleSwitch:unchecked /template/ ContentControl#PART_TextBooleanValue">
-      <Setter Property="Content" Value="Off"/>
-    </Style>
-
- <!--border BackGround MouseOver-->
-    <Style Selector="ToggleSwitch /template/ Border#PART_BorderBackground:pointerover">
-      <Setter Property="BorderBrush" Value="cornflowerblue"/>
-    </Style>
+      <Style Selector="ToggleSwitch:checked /template/ Ellipse#SwitchKnobOn"> 
+        <Setter Property="Opacity" Value="1"/>
+        <!--<Setter Property="IsHitTestVisible" Value="true"/>-->
+      </Style>
   
- <!--BackGround Mouseover and checked-->     
-   <!--<Style Selector="ToggleSwitch:checked /template/ Border#PART_BorderBackground:pointerover">
-        <Setter Property="Opacity" Value="50"/>
-   </Style>-->
-     
- <!--Border -BackGround Focus and checkred-->
-    <Style Selector="ToggleSwitch:focus:checked /template/ Border#PART_BorderBackground">
-      <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOn}"/>
-    </Style>
-  <!--Border -BackGround Focus and uncheckred-->
-    <Style Selector="ToggleSwitch:focus:unchecked /template/ Border#PART_BorderBackground">
-      <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchFillOn}"/>
-    </Style>
+    <Style Selector="ToggleSwitch:checked /template/ ContentPresenter#PART_OffContentPresenter"> 
+        <Setter Property="Opacity" Value="0"/>
+        <!--<Setter Property="IsHitTestVisible" Value="false"/>-->
+      </Style>
+  
+      <Style Selector="ToggleSwitch:checked /template/ ContentPresenter#PART_OnContentPresenter"> 
+        <Setter Property="Opacity" Value="1"/>
+        <!--<Setter Property="IsHitTestVisible" Value="true"/>-->
+      </Style>
       
       
-  <!--BackGround Focus + Mouseover-->
-     <Style Selector="ToggleSwitch:focus /template/ Border#PART_BorderBackground:pointerover">
-      <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnPointerOver}"/>
-    </Style>
-    
- <!--Control disabled-->
-    <Style Selector="ToggleSwitch:disabled">
-      <Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}"/>
-    </Style>
   
- 
-  <!--****** PRESSED ******-->
-       <!--Because of a bug in color animation flikkering apears --> 
-       <!--Implement later-->
-  
-        <!--<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>-->
-   
-   <!--****** iNDETERMINATE ******-->
-        <!--What should i do here?-->
+  <!--******** UNCHECKED *******-->
   
-        <!--<Style Selector="ToggleSwitch:indeterminate /template/ ContentControl#PART_TextBooleanValue">
-            <Setter Property="Content" Value="Not set"/>
-         </Style>-->
-        
-          <Style Selector="ToggleSwitch:indeterminate /template/ Border#PART_BorderBackground">
-             <Setter Property="Background" Value="White"/>
-         </Style>
-       
-      
-    <!--******** Mouse over of checked state *********-->
-   <!--Because of a bug in color animation flikkering apears --> 
-   <!--Implement later-->
+    <Style Selector="ToggleSwitch:checked /template/ Border#OuterBorder">
+     <Setter Property="Opacity" Value="1"/>
+   </Style>
+
+   <Style Selector="ToggleSwitch:checked /template/ Ellipse#SwitchKnobOff">
+     <Setter Property="Opacity" Value="1"/>
+   </Style>
+
+   <Style Selector="ToggleSwitch:checked /template/ Ellipse#SwitchKnobOn">
+     <Setter Property="Opacity" Value="0"/>
+   </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>-->
+   <Style Selector="ToggleSwitch:checked  /template/ Ellipse#SwitchKnobBounds"> 
+        <Setter Property="Opacity" Value="1"/>
+        <!--<Setter Property="IsHitTestVisible" Value="false"/>-->
+      </Style>
 
+   <Style Selector="ToggleSwitch:checked /template/ ContentPresenter#PART_OffContentPresenter">
+     <Setter Property="Opacity" Value="1"/>
+   </Style>
+
+  <Style Selector="ToggleSwitch:checked /template/ ContentPresenter#PART_OnContentPresenter">
+    <Setter Property="Opacity" Value="0"/>
    
-<Styles.Resources>
   
-   <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>     <!-- ""  -->
-
-</Styles.Resources>
+  </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>
+   
+ 
+ </Styles.Resources>
 
 </Styles>