Merge pull request #4069 from JamRemco/master

ToggleSwitch

samples/ControlCatalog/Pages/ToolTipPage.xaml

@@ -18,7 +18,7 @@
                     ToolTip.Tip="This is a ToolTip">
                 <TextBlock>Hover Here</TextBlock>
             </Border>
-            <CheckBox Grid.Column="1"
+            <ToggleSwitch Grid.Column="1"
                       Margin="5"
                       Grid.Row="0"
                       IsChecked="{Binding ElementName=Border, Path=(ToolTip.IsOpen)}"

src/Avalonia.Controls/ToggleSwitch.cs

@@ -0,0 +1,105 @@
+using Avalonia.Controls.Primitives;
+using Avalonia.Controls.Templates;
+using Avalonia.LogicalTree;
+
+namespace Avalonia.Controls
+{
+    /// <summary>
+    /// A Toggle Switch control.
+    /// </summary>
+    public class ToggleSwitch : ToggleButton
+    {
+        static ToggleSwitch()
+        {
+            OffContentProperty.Changed.AddClassHandler<ToggleSwitch>((x, e) => x.OffContentChanged(e));
+            OnContentProperty.Changed.AddClassHandler<ToggleSwitch>((x, e) => x.OnContentChanged(e));
+        }
+
+        /// <summary>
+        /// Defines the <see cref="OffContent"/> property.
+        /// </summary>
+        public static readonly StyledProperty<object> OffContentProperty =
+         AvaloniaProperty.Register<ToggleSwitch, object>(nameof(OffContent), defaultValue: "Off");
+
+        /// <summary>
+        /// Defines the <see cref="OffContentTemplate"/> property.
+        /// </summary>
+        public static readonly StyledProperty<IDataTemplate> OffContentTemplateProperty =
+            AvaloniaProperty.Register<ToggleSwitch, IDataTemplate>(nameof(OffContentTemplate));
+
+        /// <summary>
+        /// Defines the <see cref="OnContent"/> property.
+        /// </summary>
+        public static readonly StyledProperty<object> OnContentProperty =
+            AvaloniaProperty.Register<ToggleSwitch, object>(nameof(OnContent), defaultValue: "On");
+
+        /// <summary>
+        /// Defines the <see cref="OnContentTemplate"/> property.
+        /// </summary>
+        public static readonly StyledProperty<IDataTemplate> OnContentTemplateProperty =
+            AvaloniaProperty.Register<ToggleSwitch, IDataTemplate>(nameof(OnContentTemplate));
+
+        /// <summary>
+        /// Gets or Sets the Content that is displayed when in the On State.
+        /// </summary>
+        public object OnContent
+        {
+            get { return GetValue(OnContentProperty); }
+            set { SetValue(OnContentProperty, value); }
+        }
+
+        /// <summary>
+        /// Gets or Sets the Content that is displayed when in the Off State.
+        /// </summary>
+        public object OffContent
+        {
+            get { return GetValue(OffContentProperty); }
+            set { SetValue(OffContentProperty, value); }
+        }
+
+        /// <summary>
+        /// Gets or Sets the <see cref="IDataTemplate"/> used to display the <see cref="OffContent"/>.
+        /// </summary>
+        public IDataTemplate OffContentTemplate
+        {
+            get { return GetValue(OffContentTemplateProperty); }
+            set { SetValue(OffContentTemplateProperty, value); }
+        }
+
+        /// <summary>
+        /// Gets or Sets the <see cref="IDataTemplate"/> used to display the <see cref="OnContent"/>.
+        /// </summary>
+        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);
+            }
+        }
+    }
+}
+

src/Avalonia.Themes.Default/DefaultTheme.xaml

@@ -52,4 +52,5 @@
   <StyleInclude Source="resm:Avalonia.Themes.Default.WindowNotificationManager.xaml?assembly=Avalonia.Themes.Default"/>
   <StyleInclude Source="resm:Avalonia.Themes.Default.NotificationCard.xaml?assembly=Avalonia.Themes.Default"/>
   <StyleInclude Source="resm:Avalonia.Themes.Default.NativeMenuBar.xaml?assembly=Avalonia.Themes.Default"/>
+  <StyleInclude Source="resm:Avalonia.Themes.Default.ToggleSwitch.xaml?assembly=Avalonia.Themes.Default"/>
 </Styles>

src/Avalonia.Themes.Default/ToggleSwitch.xaml

@@ -0,0 +1,294 @@
+<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" >
+        <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 HorizontalContentAlignment="Left"
+          Content="Enable automatic Updates?"
+          OffContent="Uit"
+          OnContent="Aan"
+          VerticalAlignment="Bottom"/>
+      </StackPanel>
+
+      <StackPanel Spacing="12">
+        <TextBlock
+          Text="Previewer"
+          Classes="h1"/>
+        <TextBlock
+          Text="The previewer Shows a preview off your code, this could slow down your system"
+          TextWrapping="Wrap"/>
+        <ToggleSwitch
+          Content="Previewer"
+          IsChecked="True" />
+      </StackPanel>
+    </StackPanel>
+  </Design.PreviewWith>
+
+  <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="Template">
+      <ControlTemplate>
+        <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"
+              TemplatedControl.IsTemplateFocusTarget="True"
+              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}"/>
+
+            <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="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>
+
+  <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.2" Easing="CubicEaseOut"/>
+      </Transitions>
+    </Setter>
+  </Style>
+
+  <!-- PointerOverState -->
+  <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>
+
+  <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>
+
+  <!-- PressedState -->
+  <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>
+
+  <!-- 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>
+
+  <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>
+
+  <Style Selector="ToggleSwitch:disabled /template/ Border#SwitchKnobBounds">
+    <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnDisabled}"/>
+    <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnDisabled}"/>
+  </Style>
+
+  <!-- CheckedState -->
+  <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"/>
+  </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"/>
+  </Style>
+
+  <Style Selector="ToggleSwitch:checked /template/ ContentPresenter#PART_OffContentPresenter">
+    <Setter Property="Opacity" Value="0"/>
+  </Style>
+
+  <Style Selector="ToggleSwitch:checked /template/ ContentPresenter#PART_OnContentPresenter">
+    <Setter Property="Opacity" Value="1"/>
+  </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>
+
+  <Style Selector="ToggleSwitch:unchecked /template/ Ellipse#SwitchKnobOff">
+    <Setter Property="Opacity" Value="1"/>
+  </Style>
+
+  <Style Selector="ToggleSwitch:unchecked /template/ Ellipse#SwitchKnobOn">
+    <Setter Property="Opacity" Value="0"/>
+  </Style>
+
+  <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>

src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml

@@ -1,5 +1,5 @@
-<Style xmlns="https://github.com/avaloniaui" 
+<Style xmlns="https://github.com/avaloniaui"
-  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
+  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:sys="clr-namespace:System;assembly=netstandard">
   <Style.Resources>
     <!-- Resources for Button.xaml -->
@@ -62,7 +62,7 @@
     <SolidColorBrush x:Key="RepeatButtonPointerOverForegroundThemeBrush" Color="#FFFFFFFF" />
     <SolidColorBrush x:Key="RepeatButtonPressedBackgroundThemeBrush" Color="#FFFFFFFF" />
     <SolidColorBrush x:Key="RepeatButtonPressedForegroundThemeBrush" Color="#FF000000" />
-    
+
     <!-- Resources for ToggleButton.xaml -->
     <Thickness x:Key="ToggleButtonBorderThemeThickness">1</Thickness>
     <StaticResource x:Key="ToggleButtonBackground" ResourceKey="SystemControlBackgroundBaseLowBrush" />
@@ -300,7 +300,8 @@
     <StaticResource x:Key="MenuFlyoutPresenterBackground" ResourceKey="SystemControlTransientBackgroundBrush" />
     <StaticResource x:Key="MenuFlyoutPresenterBorderBrush" ResourceKey="SystemControlTransientBorderBrush" />
     <Thickness x:Key="MenuFlyoutPresenterBorderThemeThickness">1</Thickness>
-    <!-- Resources for Windows.UI.Xaml.Controls.MenuFlyoutItem --><!--
+    <!-- Resources for MenuFlyoutItem -->
+    <!--
     <StaticResource x:Key="MenuFlyoutItemRevealBackground" ResourceKey="SystemControlTransparentRevealBackgroundBrush" />
     <StaticResource x:Key="MenuFlyoutItemRevealBackgroundPointerOver" ResourceKey="SystemControlHighlightListLowRevealBackgroundBrush" />
     <StaticResource x:Key="MenuFlyoutItemRevealBackgroundPressed" ResourceKey="SystemControlHighlightListMediumRevealBackgroundBrush" />
@@ -309,7 +310,9 @@
     <StaticResource x:Key="MenuFlyoutItemRevealBorderBrushPressed" ResourceKey="SystemControlTransparentRevealBorderBrush" />
     <StaticResource x:Key="MenuFlyoutItemRevealBorderBrushPointerOver" ResourceKey="SystemControlTransparentRevealBorderBrush" />
     <StaticResource x:Key="MenuFlyoutItemRevealBorderBrushDisabled" ResourceKey="SystemControlTransparentBrush" />
-    --><!-- Resources for Windows.UI.Xaml.Controls.ToggleMenuFlyoutItem --><!--
+    -->
+    <!-- Resources for ToggleMenuFlyoutItem -->
+    <!--
     <StaticResource x:Key="ToggleMenuFlyoutItemRevealBackground" ResourceKey="SystemControlTransparentRevealBackgroundBrush" />
     <StaticResource x:Key="ToggleMenuFlyoutItemRevealBackgroundPointerOver" ResourceKey="SystemControlHighlightListLowRevealBackgroundBrush" />
     <StaticResource x:Key="ToggleMenuFlyoutItemRevealBackgroundPressed" ResourceKey="SystemControlHighlightListMediumRevealBackgroundBrush" />
@@ -318,7 +321,9 @@
     <StaticResource x:Key="ToggleMenuFlyoutItemRevealBorderBrushPressed" ResourceKey="SystemControlTransparentRevealBorderBrush" />
     <StaticResource x:Key="ToggleMenuFlyoutItemRevealBorderBrushPointerOver" ResourceKey="SystemControlTransparentRevealBorderBrush" />
     <StaticResource x:Key="ToggleMenuFlyoutItemRevealBorderBrushDisabled" ResourceKey="SystemControlTransparentBrush" />
-    --><!-- Resources for Windows.UI.Xaml.Controls.MenuFlyoutSubItem --><!--
+    -->
+    <!-- Resources for MenuFlyoutSubItem -->
+    <!--
     <StaticResource x:Key="MenuFlyoutSubItemRevealBackground" ResourceKey="SystemControlTransparentRevealBackgroundBrush" />
     <StaticResource x:Key="MenuFlyoutSubItemRevealBackgroundPointerOver" ResourceKey="SystemControlHighlightListLowRevealBackgroundBrush" />
     <StaticResource x:Key="MenuFlyoutSubItemRevealBackgroundPressed" ResourceKey="SystemControlHighlightAccentRevealBackgroundBrush" />
@@ -532,7 +537,7 @@
     <SolidColorBrush x:Key="RadioButtonPressedBorderThemeBrush" Color="#FFFFFFFF" />
     <SolidColorBrush x:Key="RadioButtonPressedForegroundThemeBrush" Color="#FF000000" />
     <SolidColorBrush x:Key="RadioButtonContentPointerOverForegroundThemeBrush" Color="{DynamicResource SystemColorHighlightTextColor}" />
-    
+
     <!-- Resources for Slider.xaml -->
     <x:Double x:Key="SliderOutsideTickBarThemeHeight">4</x:Double>
     <x:Double x:Key="SliderTrackThemeHeight">2</x:Double>
@@ -583,6 +588,65 @@
     <SolidColorBrush x:Key="SliderTrackPressedBackgroundThemeBrush" Color="#59FFFFFF" />
     <SolidColorBrush x:Key="SliderHeaderForegroundThemeBrush" Color="#FFFFFFFF" />
 
+    <!--ToggleSwitch-->
+    <Thickness x:Key="ToggleSwitchOnStrokeThickness">0</Thickness>
+    <Thickness x:Key="ToggleSwitchOuterBorderStrokeThickness">1</Thickness>
+    <StaticResource x:Key="ToggleSwitchContentForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="ToggleSwitchContentForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="ToggleSwitchHeaderForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="ToggleSwitchHeaderForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="ToggleSwitchContainerBackground" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ToggleSwitchContainerBackgroundPointerOver" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ToggleSwitchContainerBackgroundPressed" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ToggleSwitchContainerBackgroundDisabled" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ToggleSwitchFillOff" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ToggleSwitchFillOffPointerOver" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ToggleSwitchFillOffPressed" ResourceKey="SystemControlHighlightBaseMediumLowBrush" />
+    <StaticResource x:Key="ToggleSwitchFillOffDisabled" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ToggleSwitchStrokeOff" ResourceKey="SystemControlForegroundBaseMediumBrush" />
+    <StaticResource x:Key="ToggleSwitchStrokeOffPointerOver" ResourceKey="SystemControlHighlightBaseMediumHighBrush" />
+    <StaticResource x:Key="ToggleSwitchStrokeOffPressed" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="ToggleSwitchStrokeOffDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="ToggleSwitchFillOn" ResourceKey="SystemControlHighlightAccentBrush" />
+    <StaticResource x:Key="ToggleSwitchFillOnPointerOver" ResourceKey="SystemAccentColorLight1" />
+    <StaticResource x:Key="ToggleSwitchFillOnPressed" ResourceKey="SystemAccentColorDark1" />
+    <StaticResource x:Key="ToggleSwitchFillOnDisabled" ResourceKey="SystemControlDisabledBaseLowBrush" />
+    <StaticResource x:Key="ToggleSwitchStrokeOn" ResourceKey="SystemControlHighlightBaseHighBrush" />
+    <StaticResource x:Key="ToggleSwitchStrokeOnPointerOver" ResourceKey="SystemAccentColorLight1" />
+    <StaticResource x:Key="ToggleSwitchStrokeOnPressed" ResourceKey="SystemAccentColorDark1" />
+    <StaticResource x:Key="ToggleSwitchStrokeOnDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="ToggleSwitchKnobFillOff" ResourceKey="SystemControlHighlightBaseHighBrush" />
+    <StaticResource x:Key="ToggleSwitchKnobFillOffPointerOver" ResourceKey="SystemControlHighlightBaseHighBrush" />
+    <StaticResource x:Key="ToggleSwitchKnobFillOffPressed" ResourceKey="SystemControlHighlightBaseHighBrush" />
+    <StaticResource x:Key="ToggleSwitchKnobFillOffDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="ToggleSwitchKnobFillOn" ResourceKey="SystemControlHighlightAltChromeWhiteBrush" />
+    <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" />
+    <SolidColorBrush x:Key="ToggleSwitchCurtainPressedBackgroundThemeBrush" Color="#FF7E4FEC" />
+    <SolidColorBrush x:Key="ToggleSwitchDisabledForegroundThemeBrush" Color="#66FFFFFF" />
+    <SolidColorBrush x:Key="ToggleSwitchForegroundThemeBrush" Color="#FFFFFFFF" />
+    <SolidColorBrush x:Key="ToggleSwitchHeaderDisabledForegroundThemeBrush" Color="#66FFFFFF" />
+    <SolidColorBrush x:Key="ToggleSwitchHeaderForegroundThemeBrush" Color="#FFFFFFFF" />
+    <SolidColorBrush x:Key="ToggleSwitchOuterBorderBorderThemeBrush" Color="#59FFFFFF" />
+    <SolidColorBrush x:Key="ToggleSwitchOuterBorderDisabledBorderThemeBrush" Color="#33FFFFFF" />
+    <SolidColorBrush x:Key="ToggleSwitchThumbBackgroundThemeBrush" Color="#FFFFFFFF" />
+    <SolidColorBrush x:Key="ToggleSwitchThumbBorderThemeBrush" Color="#FFFFFFFF" />
+    <SolidColorBrush x:Key="ToggleSwitchThumbDisabledBackgroundThemeBrush" Color="#FF7E7E7E" />
+    <SolidColorBrush x:Key="ToggleSwitchThumbDisabledBorderThemeBrush" Color="#FF7E7E7E" />
+    <SolidColorBrush x:Key="ToggleSwitchThumbPointerOverBackgroundThemeBrush" Color="#FFFFFFFF" />
+    <SolidColorBrush x:Key="ToggleSwitchThumbPointerOverBorderThemeBrush" Color="#FFFFFFFF" />
+    <SolidColorBrush x:Key="ToggleSwitchThumbPressedBackgroundThemeBrush" Color="#FFFFFFFF" />
+    <SolidColorBrush x:Key="ToggleSwitchThumbPressedForegroundThemeBrush" Color="#FFFFFFFF" />
+    <SolidColorBrush x:Key="ToggleSwitchTrackBackgroundThemeBrush" Color="#42FFFFFF" />
+    <SolidColorBrush x:Key="ToggleSwitchTrackBorderThemeBrush" Color="Transparent" />
+    <SolidColorBrush x:Key="ToggleSwitchTrackDisabledBackgroundThemeBrush" Color="#1FFFFFFF" />
+    <SolidColorBrush x:Key="ToggleSwitchTrackPointerOverBackgroundThemeBrush" Color="#4AFFFFFF" />
+    <SolidColorBrush x:Key="ToggleSwitchTrackPressedBackgroundThemeBrush" Color="#59FFFFFF" />
+
     <!-- Resources for ToolTip.xaml -->
     <x:Double x:Key="ToolTipContentThemeFontSize">12</x:Double>
     <Thickness x:Key="ToolTipBorderThemeThickness">1</Thickness>

src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml

@@ -1,5 +1,5 @@
-<Style xmlns="https://github.com/avaloniaui" 
+<Style xmlns="https://github.com/avaloniaui"
-  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
+  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:sys="clr-namespace:System;assembly=netstandard">
   <Style.Resources>
     <!-- Resources for Button.xaml -->
@@ -299,7 +299,7 @@
     <StaticResource x:Key="MenuFlyoutPresenterBackground" ResourceKey="SystemControlTransientBackgroundBrush" />
     <StaticResource x:Key="MenuFlyoutPresenterBorderBrush" ResourceKey="SystemControlTransientBorderBrush" />
     <Thickness x:Key="MenuFlyoutPresenterBorderThemeThickness">1</Thickness>
-    <!-- Resources for Windows.UI.Xaml.Controls.MenuFlyoutItem -->
+    <!-- Resources for MenuFlyoutItem -->
     <!--<StaticResource x:Key="MenuFlyoutItemRevealBackground" ResourceKey="SystemControlTransparentRevealBackgroundBrush" />
     <StaticResource x:Key="MenuFlyoutItemRevealBackgroundPointerOver" ResourceKey="SystemControlHighlightListLowRevealBackgroundBrush" />
     <StaticResource x:Key="MenuFlyoutItemRevealBackgroundPressed" ResourceKey="SystemControlHighlightListMediumRevealBackgroundBrush" />
@@ -308,7 +308,9 @@
     <StaticResource x:Key="MenuFlyoutItemRevealBorderBrushPressed" ResourceKey="SystemControlTransparentRevealBorderBrush" />
     <StaticResource x:Key="MenuFlyoutItemRevealBorderBrushPointerOver" ResourceKey="SystemControlTransparentRevealBorderBrush" />
     <StaticResource x:Key="MenuFlyoutItemRevealBorderBrushDisabled" ResourceKey="SystemControlTransparentBrush" />
-    --><!-- Resources for Windows.UI.Xaml.Controls.ToggleMenuFlyoutItem --><!--
+    -->
+    <!-- Resources for ToggleMenuFlyoutItem -->
+    <!--
     <StaticResource x:Key="ToggleMenuFlyoutItemRevealBackground" ResourceKey="SystemControlTransparentRevealBackgroundBrush" />
     <StaticResource x:Key="ToggleMenuFlyoutItemRevealBackgroundPointerOver" ResourceKey="SystemControlHighlightListLowRevealBackgroundBrush" />
     <StaticResource x:Key="ToggleMenuFlyoutItemRevealBackgroundPressed" ResourceKey="SystemControlHighlightListMediumRevealBackgroundBrush" />
@@ -317,7 +319,9 @@
     <StaticResource x:Key="ToggleMenuFlyoutItemRevealBorderBrushPressed" ResourceKey="SystemControlTransparentRevealBorderBrush" />
     <StaticResource x:Key="ToggleMenuFlyoutItemRevealBorderBrushPointerOver" ResourceKey="SystemControlTransparentRevealBorderBrush" />
     <StaticResource x:Key="ToggleMenuFlyoutItemRevealBorderBrushDisabled" ResourceKey="SystemControlTransparentBrush" />
-    --><!-- Resources for Windows.UI.Xaml.Controls.MenuFlyoutSubItem --><!--
+    -->
+    <!-- Resources for MenuFlyoutSubItem -->
+    <!--
     <StaticResource x:Key="MenuFlyoutSubItemRevealBackground" ResourceKey="SystemControlTransparentRevealBackgroundBrush" />
     <StaticResource x:Key="MenuFlyoutSubItemRevealBackgroundPointerOver" ResourceKey="SystemControlHighlightListLowRevealBackgroundBrush" />
     <StaticResource x:Key="MenuFlyoutSubItemRevealBackgroundPressed" ResourceKey="SystemControlHighlightAccentRevealBackgroundBrush" />
@@ -531,7 +535,7 @@
     <SolidColorBrush x:Key="RadioButtonPressedBorderThemeBrush" Color="#FF000000" />
     <SolidColorBrush x:Key="RadioButtonPressedForegroundThemeBrush" Color="#FFFFFFFF" />
     <SolidColorBrush x:Key="RadioButtonContentPointerOverForegroundThemeBrush" Color="{DynamicResource SystemColorHighlightTextColor}" />
-    
+
     <!-- Resources for Slider.xaml -->
     <x:Double x:Key="SliderOutsideTickBarThemeHeight">4</x:Double>
     <x:Double x:Key="SliderTrackThemeHeight">2</x:Double>
@@ -582,6 +586,65 @@
     <SolidColorBrush x:Key="SliderTrackPressedBackgroundThemeBrush" Color="#33000000" />
     <SolidColorBrush x:Key="SliderHeaderForegroundThemeBrush" Color="#FF000000" />
 
+    <!--Recources ToggleSwitch-->
+    <Thickness x:Key="ToggleSwitchOnStrokeThickness">0</Thickness>
+    <Thickness x:Key="ToggleSwitchOuterBorderStrokeThickness">1</Thickness>
+    <StaticResource x:Key="ToggleSwitchContentForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="ToggleSwitchContentForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="ToggleSwitchHeaderForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="ToggleSwitchHeaderForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="ToggleSwitchContainerBackground" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ToggleSwitchContainerBackgroundPointerOver" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ToggleSwitchContainerBackgroundPressed" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ToggleSwitchContainerBackgroundDisabled" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ToggleSwitchFillOff" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ToggleSwitchFillOffPointerOver" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ToggleSwitchFillOffPressed" ResourceKey="SystemControlHighlightBaseMediumLowBrush" />
+    <StaticResource x:Key="ToggleSwitchFillOffDisabled" ResourceKey="SystemControlTransparentBrush" />
+    <StaticResource x:Key="ToggleSwitchStrokeOff" ResourceKey="SystemControlForegroundBaseMediumBrush" />
+    <StaticResource x:Key="ToggleSwitchStrokeOffPointerOver" ResourceKey="SystemControlHighlightBaseMediumHighBrush" />
+    <StaticResource x:Key="ToggleSwitchStrokeOffPressed" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="ToggleSwitchStrokeOffDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="ToggleSwitchFillOn" ResourceKey="SystemControlHighlightAccentBrush" />
+    <StaticResource x:Key="ToggleSwitchFillOnPointerOver" ResourceKey="SystemAccentColorLight1" />
+    <StaticResource x:Key="ToggleSwitchFillOnPressed" ResourceKey="SystemAccentColorDark1" />
+    <StaticResource x:Key="ToggleSwitchFillOnDisabled" ResourceKey="SystemControlDisabledBaseLowBrush" />
+    <StaticResource x:Key="ToggleSwitchStrokeOn" ResourceKey="SystemControlHighlightBaseHighBrush" />
+    <StaticResource x:Key="ToggleSwitchStrokeOnPointerOver" ResourceKey="SystemControlHighlightListAccentHighBrush" />
+    <StaticResource x:Key="ToggleSwitchStrokeOnPressed" ResourceKey="SystemControlHighlightBaseMediumBrush" />
+    <StaticResource x:Key="ToggleSwitchStrokeOnDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="ToggleSwitchKnobFillOff" ResourceKey="SystemControlForegroundBaseHighBrush" />
+    <StaticResource x:Key="ToggleSwitchKnobFillOffPointerOver" ResourceKey="SystemControlHighlightBaseHighBrush" />
+    <StaticResource x:Key="ToggleSwitchKnobFillOffPressed" ResourceKey="SystemControlHighlightBaseHighBrush" />
+    <StaticResource x:Key="ToggleSwitchKnobFillOffDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    <StaticResource x:Key="ToggleSwitchKnobFillOn" ResourceKey="SystemControlHighlightAltChromeWhiteBrush" />
+    <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" />
+    <SolidColorBrush x:Key="ToggleSwitchCurtainPressedBackgroundThemeBrush" Color="#FF7241E4" />
+    <SolidColorBrush x:Key="ToggleSwitchDisabledForegroundThemeBrush" Color="#66000000" />
+    <SolidColorBrush x:Key="ToggleSwitchForegroundThemeBrush" Color="#FF000000" />
+    <SolidColorBrush x:Key="ToggleSwitchHeaderDisabledForegroundThemeBrush" Color="#66000000" />
+    <SolidColorBrush x:Key="ToggleSwitchHeaderForegroundThemeBrush" Color="#FF000000" />
+    <SolidColorBrush x:Key="ToggleSwitchOuterBorderBorderThemeBrush" Color="#59000000" />
+    <SolidColorBrush x:Key="ToggleSwitchOuterBorderDisabledBorderThemeBrush" Color="#33000000" />
+    <SolidColorBrush x:Key="ToggleSwitchThumbBackgroundThemeBrush" Color="#FF000000" />
+    <SolidColorBrush x:Key="ToggleSwitchThumbBorderThemeBrush" Color="#FF000000" />
+    <SolidColorBrush x:Key="ToggleSwitchThumbDisabledBackgroundThemeBrush" Color="#FF929292" />
+    <SolidColorBrush x:Key="ToggleSwitchThumbDisabledBorderThemeBrush" Color="#FF929292" />
+    <SolidColorBrush x:Key="ToggleSwitchThumbPointerOverBackgroundThemeBrush" Color="#FF000000" />
+    <SolidColorBrush x:Key="ToggleSwitchThumbPointerOverBorderThemeBrush" Color="#FF000000" />
+    <SolidColorBrush x:Key="ToggleSwitchThumbPressedBackgroundThemeBrush" Color="#FF000000" />
+    <SolidColorBrush x:Key="ToggleSwitchThumbPressedForegroundThemeBrush" Color="#FF000000" />
+    <SolidColorBrush x:Key="ToggleSwitchTrackBackgroundThemeBrush" Color="#59000000" />
+    <SolidColorBrush x:Key="ToggleSwitchTrackBorderThemeBrush" Color="Transparent" />
+    <SolidColorBrush x:Key="ToggleSwitchTrackDisabledBackgroundThemeBrush" Color="#1F000000" />
+    <SolidColorBrush x:Key="ToggleSwitchTrackPointerOverBackgroundThemeBrush" Color="#4A000000" />
+    <SolidColorBrush x:Key="ToggleSwitchTrackPressedBackgroundThemeBrush" Color="#42000000" />
+
     <!-- Resources for ToolTip.xaml -->
     <x:Double x:Key="ToolTipContentThemeFontSize">12</x:Double>
     <Thickness x:Key="ToolTipBorderThemeThickness">1</Thickness>

src/Avalonia.Themes.Fluent/FluentTheme.xaml

@@ -52,4 +52,5 @@
   <StyleInclude Source="resm:Avalonia.Themes.Fluent.WindowNotificationManager.xaml?assembly=Avalonia.Themes.Fluent"/>
   <StyleInclude Source="resm:Avalonia.Themes.Fluent.NotificationCard.xaml?assembly=Avalonia.Themes.Fluent"/>
   <StyleInclude Source="resm:Avalonia.Themes.Fluent.NativeMenuBar.xaml?assembly=Avalonia.Themes.Fluent"/>
+  <StyleInclude Source="resm:Avalonia.Themes.Fluent.ToggleSwitch.xaml?assembly=Avalonia.Themes.Fluent"/>
 </Styles>

src/Avalonia.Themes.Fluent/ToggleSwitch.xaml

@@ -0,0 +1,294 @@
+<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" >
+        <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 HorizontalContentAlignment="Left"
+          Content="Enable automatic Updates?"
+          OffContent="Uit"
+          OnContent="Aan"
+          VerticalAlignment="Bottom"/>
+      </StackPanel>
+
+      <StackPanel Spacing="12">
+        <TextBlock
+          Text="Previewer"
+          Classes="h1"/>
+        <TextBlock
+          Text="The previewer Shows a preview off your code, this could slow down your system"
+          TextWrapping="Wrap"/>
+        <ToggleSwitch
+          Content="Previewer"
+          IsChecked="True" />
+      </StackPanel>
+    </StackPanel>
+  </Design.PreviewWith>
+
+  <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="Template">
+      <ControlTemplate>
+        <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"
+              TemplatedControl.IsTemplateFocusTarget="True"
+              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}"/>
+
+            <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="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>
+
+  <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.2" Easing="CubicEaseOut"/>
+      </Transitions>
+    </Setter>
+  </Style>
+
+  <!-- PointerOverState -->
+  <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>
+
+  <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>
+
+  <!-- PressedState -->
+  <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>
+
+  <!-- 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>
+
+  <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>
+
+  <Style Selector="ToggleSwitch:disabled /template/ Border#SwitchKnobBounds">
+    <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnDisabled}"/>
+    <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnDisabled}"/>
+  </Style>
+
+  <!-- CheckedState -->
+  <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"/>
+  </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"/>
+  </Style>
+
+  <Style Selector="ToggleSwitch:checked /template/ ContentPresenter#PART_OffContentPresenter">
+    <Setter Property="Opacity" Value="0"/>
+  </Style>
+
+  <Style Selector="ToggleSwitch:checked /template/ ContentPresenter#PART_OnContentPresenter">
+    <Setter Property="Opacity" Value="1"/>
+  </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>
+
+  <Style Selector="ToggleSwitch:unchecked /template/ Ellipse#SwitchKnobOff">
+    <Setter Property="Opacity" Value="1"/>
+  </Style>
+
+  <Style Selector="ToggleSwitch:unchecked /template/ Ellipse#SwitchKnobOn">
+    <Setter Property="Opacity" Value="0"/>
+  </Style>
+
+  <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>