From 4ba289f63c4b615ab5b4149f5e8004bf79c0610c Mon Sep 17 00:00:00 2001
From: oZ-Zo <50652175+oz-zo@users.noreply.github.com>
Date: Wed, 12 Feb 2020 17:04:15 +0300
Subject: [PATCH] Add toggle switch design

---
 .../Controls/HamburgerCategoryButton.xaml     |   2 +-
 .../HamburgerCategoryFlashButton.xaml         |   2 +-
 .../W10SS_GUI/Controls/ToggleSwitch.xaml      | 208 ++++++++++++++++++
 .../W10SS_GUI/Controls/ToggleSwitch.xaml.cs   |  42 ++++
 .../Controls/TogglesCategoryPanel.xaml        |   2 +-
 W10SS_GUI_2/W10SS_GUI/MainWindow.xaml         |   8 +-
 W10SS_GUI_2/W10SS_GUI/MainWindow.xaml.cs      |   2 +-
 .../W10SS_GUI/Resource/controlsSize.xaml      |   8 +-
 W10SS_GUI_2/W10SS_GUI/Resource/fonts.xaml     |  13 +-
 W10SS_GUI_2/W10SS_GUI/W10SS_GUI.csproj        |   7 +
 10 files changed, 280 insertions(+), 14 deletions(-)
 create mode 100644 W10SS_GUI_2/W10SS_GUI/Controls/ToggleSwitch.xaml
 create mode 100644 W10SS_GUI_2/W10SS_GUI/Controls/ToggleSwitch.xaml.cs

diff --git a/W10SS_GUI_2/W10SS_GUI/Controls/HamburgerCategoryButton.xaml b/W10SS_GUI_2/W10SS_GUI/Controls/HamburgerCategoryButton.xaml
index aa7bebe3..bd5fe7ed 100644
--- a/W10SS_GUI_2/W10SS_GUI/Controls/HamburgerCategoryButton.xaml
+++ b/W10SS_GUI_2/W10SS_GUI/Controls/HamburgerCategoryButton.xaml
@@ -56,7 +56,7 @@
             </StackPanel.Triggers>
 
             <StackPanel Name="hamburgerContainer" Orientation="Horizontal">
-                <TextBlock Name="textIcon" FontFamily="{StaticResource textHamburgerCategoryButtonIcon}" FontSize="{DynamicResource  buttonHamburgerIconsSize}"                     
+                <TextBlock Name="textIcon" FontFamily="{StaticResource fontHamburgerCategoryButtonIcon}" FontSize="{DynamicResource  buttonHamburgerIconsSize}"                     
                            Margin="10 0 10 0" 
                            VerticalAlignment="Center"
                            Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type UserControl}}, Path=Icon}"/>
diff --git a/W10SS_GUI_2/W10SS_GUI/Controls/HamburgerCategoryFlashButton.xaml b/W10SS_GUI_2/W10SS_GUI/Controls/HamburgerCategoryFlashButton.xaml
index 7fc9d52d..5a960ac3 100644
--- a/W10SS_GUI_2/W10SS_GUI/Controls/HamburgerCategoryFlashButton.xaml
+++ b/W10SS_GUI_2/W10SS_GUI/Controls/HamburgerCategoryFlashButton.xaml
@@ -67,7 +67,7 @@
             </StackPanel.Triggers>
 
             <StackPanel Name="hamburgerContainer" Orientation="Horizontal">
-                <TextBlock Name="textIcon" FontFamily="{StaticResource textHamburgerCategoryFlashButtonIcon}" FontSize="{DynamicResource  buttonHamburgerIconsSize}"                     
+                <TextBlock Name="textIcon" FontFamily="{StaticResource fontHamburgerCategoryFlashButtonIcon}" FontSize="{DynamicResource  buttonHamburgerIconsSize}"                     
                            Margin="10 0 10 0" 
                            VerticalAlignment="Center"
                            Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type UserControl}}, Path=Icon}"/>
diff --git a/W10SS_GUI_2/W10SS_GUI/Controls/ToggleSwitch.xaml b/W10SS_GUI_2/W10SS_GUI/Controls/ToggleSwitch.xaml
new file mode 100644
index 00000000..8c5c8d87
--- /dev/null
+++ b/W10SS_GUI_2/W10SS_GUI/Controls/ToggleSwitch.xaml
@@ -0,0 +1,208 @@
+<UserControl x:Class="W10SS_GUI.Controls.ToggleSwitch"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
+             xmlns:local="clr-namespace:W10SS_GUI.Controls"
+             mc:Ignorable="d" 
+             d:DesignHeight="{StaticResource toggleSwitchHeight}" d:DesignWidth="{StaticResource toggleSwitchWidth}">
+    <UserControl.Resources>
+        <!--#region Brushes -->
+
+        <SolidColorBrush x:Key="RadioButton.Static.Background" Color="#FFFFFFFF"/>
+        <SolidColorBrush x:Key="RadioButton.Static.Border" Color="#FF333333"/>
+        <SolidColorBrush x:Key="RadioButton.Static.Glyph" Color="#FF333333"/>
+
+        <SolidColorBrush x:Key="RadioButton.MouseOver.Background" Color="#FFFFFFFF"/>
+        <SolidColorBrush x:Key="RadioButton.MouseOver.Border" Color="#FF000000"/>
+        <SolidColorBrush x:Key="RadioButton.MouseOver.Glyph" Color="#FF000000"/>
+
+        <SolidColorBrush x:Key="RadioButton.MouseOver.On.Background" Color="#3F51B5"/>
+        <SolidColorBrush x:Key="RadioButton.MouseOver.On.Border" Color="#3F51B5"/>
+        <SolidColorBrush x:Key="RadioButton.MouseOver.On.Glyph" Color="#FFFFFFFF"/>
+
+        <SolidColorBrush x:Key="RadioButton.Disabled.Background" Color="#FFFFFFFF"/>
+        <SolidColorBrush x:Key="RadioButton.Disabled.Border" Color="#FF999999"/>
+        <SolidColorBrush x:Key="RadioButton.Disabled.Glyph" Color="#FF999999"/>
+
+        <SolidColorBrush x:Key="RadioButton.Disabled.On.Background" Color="#FFCCCCCC"/>
+        <SolidColorBrush x:Key="RadioButton.Disabled.On.Border" Color="#FFCCCCCC"/>
+        <SolidColorBrush x:Key="RadioButton.Disabled.On.Glyph" Color="#FFA3A3A3"/>
+
+        <SolidColorBrush x:Key="RadioButton.Pressed.Background" Color="#FF999999"/>
+        <SolidColorBrush x:Key="RadioButton.Pressed.Border" Color="#FF999999"/>
+        <SolidColorBrush x:Key="RadioButton.Pressed.Glyph" Color="#FFFFFFFF"/>
+
+        <SolidColorBrush x:Key="RadioButton.Checked.Background" Color="#3F51B5"/>
+        <SolidColorBrush x:Key="RadioButton.Checked.Border" Color="#3F51B5"/>
+        <SolidColorBrush x:Key="RadioButton.Checked.Glyph" Color="#FFFFFFFF"/>
+
+        <!--#endregion-->
+        
+        <!--#region Toggle Switch Style-->
+        <Style TargetType="{x:Type ToggleButton}">
+            <Setter Property="HorizontalAlignment" Value="Left"/>
+            <Setter Property="Margin" Value="10 0 10 0" />
+            <Setter Property="Background" Value="{StaticResource RadioButton.Static.Background}"/>
+            <Setter Property="BorderBrush" Value="{StaticResource RadioButton.Static.Border}"/>
+            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
+            <Setter Property="HorizontalContentAlignment" Value="Left"/>
+            <Setter Property="BorderThickness" Value="1"/>
+            <Setter Property="SnapsToDevicePixels" Value="True"/>
+            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="{x:Type ToggleButton}">
+                        <Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
+                              Width="44" Height="20"
+                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
+                            
+                            <Border x:Name="normalBorder" Opacity="1" BorderThickness="2" CornerRadius="10"
+										BorderBrush="{TemplateBinding BorderBrush}" Background="{StaticResource RadioButton.Static.Background}"/>
+                            <Border x:Name="checkedBorder" Opacity="0" BorderThickness="2" CornerRadius="10"
+										BorderBrush="{StaticResource  RadioButton.Checked.Border}" Background="{StaticResource RadioButton.Checked.Background}"/>
+                            <Border x:Name="hoverBorder" Opacity="0" BorderThickness="2" CornerRadius="10"
+										BorderBrush="{StaticResource RadioButton.MouseOver.Border}" Background="{StaticResource RadioButton.MouseOver.Background}"/>
+                            <Border x:Name="pressedBorder" Opacity="0" BorderThickness="2" CornerRadius="10"
+										BorderBrush="{StaticResource RadioButton.Pressed.Border}" Background="{StaticResource RadioButton.Pressed.Background}"/>
+                            <Border x:Name="disabledBorder" Opacity="0" BorderThickness="2" CornerRadius="10"
+										BorderBrush="{StaticResource RadioButton.Disabled.Border}" Background="{StaticResource RadioButton.Disabled.Background}"/>
+                            <Ellipse x:Name="optionMark"
+										 Height="10" Width="10" Fill="{StaticResource RadioButton.Static.Glyph}" StrokeThickness="0" 
+										 VerticalAlignment="Center" Margin="5,0" RenderTransformOrigin="0.5,0.5">
+                                <Ellipse.RenderTransform>
+                                    <TransformGroup>
+                                        <ScaleTransform/>
+                                        <SkewTransform/>
+                                        <RotateTransform/>
+                                        <TranslateTransform X="-12"/>
+                                    </TransformGroup>
+                                </Ellipse.RenderTransform>
+                            </Ellipse>
+                            <Ellipse x:Name="optionMarkOn" Opacity="0"
+										 Height="10" Width="10" Fill="{StaticResource RadioButton.Checked.Glyph}" StrokeThickness="0" 
+										 VerticalAlignment="Center" Margin="5,0" RenderTransformOrigin="0.5,0.5">
+                                <Ellipse.RenderTransform>
+                                    <TransformGroup>
+                                        <ScaleTransform/>
+                                        <SkewTransform/>
+                                        <RotateTransform/>
+                                        <TranslateTransform X="12"/>
+                                    </TransformGroup>
+                                </Ellipse.RenderTransform>
+                            </Ellipse>
+
+                            <VisualStateManager.VisualStateGroups>
+                                <VisualStateGroup x:Name="CommonStates">
+                                    <VisualState x:Name="Normal"/>
+                                    <VisualState x:Name="MouseOver">
+                                        <Storyboard>
+                                            <DoubleAnimation To="0" Duration="0:0:0.2" Storyboard.TargetName="normalBorder" Storyboard.TargetProperty="(UIElement.Opacity)"/>
+                                            <DoubleAnimation To="1" Duration="0:0:0.2" Storyboard.TargetName="hoverBorder" Storyboard.TargetProperty="(UIElement.Opacity)"/>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="optionMark" Storyboard.TargetProperty="Fill" Duration="0:0:0.2">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButton.MouseOver.Glyph}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="optionMarkOn" Storyboard.TargetProperty="Fill" Duration="0:0:0.2">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButton.MouseOver.On.Glyph}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                        </Storyboard>
+                                    </VisualState>
+                                    <VisualState x:Name="Pressed">
+                                        <Storyboard>
+                                            <DoubleAnimation To="1" Duration="0" Storyboard.TargetName="pressedBorder" Storyboard.TargetProperty="(UIElement.Opacity)"/>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="optionMark" Storyboard.TargetProperty="Fill" Duration="0">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButton.Pressed.Glyph}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                        </Storyboard>
+                                    </VisualState>
+                                    <VisualState x:Name="Disabled">
+                                        <Storyboard>
+                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="checkedBorder" Storyboard.TargetProperty="BorderBrush">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButton.Disabled.On.Border}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="checkedBorder" Storyboard.TargetProperty="Background">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButton.Disabled.On.Background}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <DoubleAnimation To="1" Duration="0" Storyboard.TargetName="disabledBorder" Storyboard.TargetProperty="(UIElement.Opacity)"/>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="optionMark" Storyboard.TargetProperty="Fill" Duration="0">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButton.Disabled.Glyph}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="optionMarkOn" Storyboard.TargetProperty="Fill" Duration="0">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButton.Disabled.On.Glyph}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                        </Storyboard>
+                                    </VisualState>
+                                </VisualStateGroup>
+                                <VisualStateGroup x:Name="CheckStates">
+                                    <VisualState x:Name="Unchecked"/>
+                                    <VisualState x:Name="Checked">
+                                        <Storyboard>
+                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="optionMark" Storyboard.TargetProperty="Fill" Duration="0">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButton.Static.Glyph}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <DoubleAnimationUsingKeyFrames Duration="0:0:0.5" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="optionMark">
+                                                <EasingDoubleKeyFrame KeyTime="0" Value="12"/>
+                                            </DoubleAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="optionMark" Storyboard.TargetProperty="Fill">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButton.Checked.Glyph}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="hoverBorder" Storyboard.TargetProperty="BorderBrush">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButton.MouseOver.On.Border}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="hoverBorder" Storyboard.TargetProperty="Background">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButton.MouseOver.On.Background}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <DoubleAnimation To="1" Duration="0" Storyboard.TargetName="optionMarkOn" Storyboard.TargetProperty="(UIElement.Opacity)"/>
+                                            <DoubleAnimation To="1" Duration="0" Storyboard.TargetName="checkedBorder" Storyboard.TargetProperty="(UIElement.Opacity)"/>
+                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="disabledBorder" Storyboard.TargetProperty="BorderBrush">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButton.Disabled.On.Border}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="disabledBorder" Storyboard.TargetProperty="Background">
+                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButton.Disabled.On.Background}"/>
+                                            </ObjectAnimationUsingKeyFrames>
+                                        </Storyboard>
+                                    </VisualState>
+                                    <VisualState x:Name="Indeterminate"/>
+                                </VisualStateGroup>
+                                <VisualStateGroup x:Name="FocusStates">
+                                    <VisualState x:Name="Unfocused"/>
+                                    <VisualState x:Name="Focused"/>
+                                </VisualStateGroup>
+                            </VisualStateManager.VisualStateGroups>
+                        </Grid>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
+        <!--#endregion Toggle Switch Style-->        
+    </UserControl.Resources>
+
+    <Grid Name="gridToggleSwitch"    
+          Width="{StaticResource toggleSwitchWidth}" 
+          Height="{StaticResource toggleSwitchHeight}" 
+          Background="{DynamicResource windowBackground}"
+          HorizontalAlignment="Left">
+
+        <TextBlock Name="iconToggleSwitch" FontFamily="{StaticResource fontToggleIcon}"
+                   Width="{StaticResource toggleSwitchIconsWidth}"
+                   FontSize="{DynamicResource toggleSwitchIconsFontSize}"
+                   Margin="10 0 10 0"
+                   VerticalAlignment="Center"
+                   HorizontalAlignment="Left"
+                   Text="&#xE1CD;"/>
+
+        <TextBlock Name="textToggleSwitchHeader" FontFamily="{StaticResource fontToggleSwitchHeader}"                   
+                   MaxHeight="{StaticResource toggleSwitchHeaderMaxHeight}"
+                   TextWrapping="Wrap"
+                   VerticalAlignment="Center"
+                   HorizontalAlignment="Left"
+                   Margin="45 10 60 10"
+                   Text="Do not use sign-in info to automatically finish setting up device after an update or restart" />
+
+        <ToggleButton Name="toggleSwitch"
+                      VerticalAlignment="Center" 
+                      HorizontalAlignment="Right"
+                      IsChecked="{Binding RelativeSource={RelativeSource AncestorType={x:Type UserControl}}, Path=IsChecked}"/>
+
+    </Grid>
+</UserControl>
diff --git a/W10SS_GUI_2/W10SS_GUI/Controls/ToggleSwitch.xaml.cs b/W10SS_GUI_2/W10SS_GUI/Controls/ToggleSwitch.xaml.cs
new file mode 100644
index 00000000..a9326fd4
--- /dev/null
+++ b/W10SS_GUI_2/W10SS_GUI/Controls/ToggleSwitch.xaml.cs
@@ -0,0 +1,42 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Navigation;
+using System.Windows.Shapes;
+
+namespace W10SS_GUI.Controls
+{
+    /// <summary>
+    /// Логика взаимодействия для ToggleSwitch.xaml
+    /// </summary>
+    public partial class ToggleSwitch : UserControl
+    {
+        public ToggleSwitch()
+        {
+            InitializeComponent();
+        }
+
+
+
+        public bool IsChecked
+        {
+            get { return (bool)GetValue(IsCheckedProperty); }
+            set { SetValue(IsCheckedProperty, value); }
+        }
+
+        // Using a DependencyProperty as the backing store for IsChecked.  This enables animation, styling, binding, etc...
+        public static readonly DependencyProperty IsCheckedProperty =
+            DependencyProperty.Register("IsChecked", typeof(bool), typeof(ToggleSwitch), new PropertyMetadata(default(bool)));
+
+
+    }
+}
diff --git a/W10SS_GUI_2/W10SS_GUI/Controls/TogglesCategoryPanel.xaml b/W10SS_GUI_2/W10SS_GUI/Controls/TogglesCategoryPanel.xaml
index a202ca79..3557271d 100644
--- a/W10SS_GUI_2/W10SS_GUI/Controls/TogglesCategoryPanel.xaml
+++ b/W10SS_GUI_2/W10SS_GUI/Controls/TogglesCategoryPanel.xaml
@@ -19,7 +19,7 @@
 
             <TextBlock Name="textTogglesHeader" 
                        FontSize="{StaticResource togglesCategoryPanelHeaderFontSize}"
-                       FontFamily="{StaticResource textTogglesHeaderFontFamily}"
+                       FontFamily="{StaticResource fontTogglesPanelHeader}"
                        Margin="{Binding RelativeSource={RelativeSource AncestorType={x:Type UserControl}}, Path=HeaderMargin}"                           
                        VerticalAlignment="Center"
                        Text="{DynamicResource textHamburgerPrivacy}"/>
diff --git a/W10SS_GUI_2/W10SS_GUI/MainWindow.xaml b/W10SS_GUI_2/W10SS_GUI/MainWindow.xaml
index c0818b93..01ed9607 100644
--- a/W10SS_GUI_2/W10SS_GUI/MainWindow.xaml
+++ b/W10SS_GUI_2/W10SS_GUI/MainWindow.xaml
@@ -11,7 +11,7 @@
         MinWidth="{StaticResource windowMinWidth}"
         Height="{StaticResource windowHeight}"        
         Width="{StaticResource windowWidth}" 
-        FontFamily="{StaticResource windowFontFamily}"
+        FontFamily="{StaticResource fontWindow}"
         FontSize="{DynamicResource windowFontSize}" TextOptions.TextFormattingMode="Display" 
         WindowStartupLocation="CenterScreen" SnapsToDevicePixels="True" 
         ResizeMode="CanResize" ShowInTaskbar="True"
@@ -148,7 +148,8 @@
         <!--#endregion Hamburger Panel-->
 
         <!--#region Toggles Category Panels -->
-        <Grid Name="gridTogglesCategoryPanels" Grid.Column="1">
+        <Grid Name="gridTogglesCategoryPanels" Grid.Column="1"
+              VerticalAlignment="Top">
 
             <uc:TogglesCategoryPanel x:Name="panelTogglesCategoryPrivacy"
                                      Width="{Binding ElementName=gridTogglesCategoryPanels, Path=ActualWidth}"
@@ -157,8 +158,7 @@
                                      HeaderMargin="20 0 20 6"
                                      Tag="{StaticResource tagCategoryPrivacy}"/>
 
-
-
+            
 
 
 
diff --git a/W10SS_GUI_2/W10SS_GUI/MainWindow.xaml.cs b/W10SS_GUI_2/W10SS_GUI/MainWindow.xaml.cs
index d56df08a..21a9820b 100644
--- a/W10SS_GUI_2/W10SS_GUI/MainWindow.xaml.cs
+++ b/W10SS_GUI_2/W10SS_GUI/MainWindow.xaml.cs
@@ -24,7 +24,7 @@ namespace W10SS_GUI
     {
         public MainWindow()
         {
-            InitializeComponent();
+            InitializeComponent();            
         }        
 
         private void Window_Initialized(object sender, EventArgs e)
diff --git a/W10SS_GUI_2/W10SS_GUI/Resource/controlsSize.xaml b/W10SS_GUI_2/W10SS_GUI/Resource/controlsSize.xaml
index 84b787e4..200c539e 100644
--- a/W10SS_GUI_2/W10SS_GUI/Resource/controlsSize.xaml
+++ b/W10SS_GUI_2/W10SS_GUI/Resource/controlsSize.xaml
@@ -21,6 +21,12 @@
     <system:Double x:Key="togglesCategoryPanelHeaderHeight">40</system:Double>
     <system:Double x:Key="togglesCategoryPanelHeaderFontSize">20</system:Double>
 
+    <system:Double x:Key="toggleSwitchWidth">500</system:Double>
+    <system:Double x:Key="toggleSwitchHeight">70</system:Double>
+    <system:Double x:Key="toggleSwitchIconsFontSize">24</system:Double>
+    <system:Double x:Key="toggleSwitchIconsWidth">25</system:Double>    
+    <system:Double x:Key="toggleSwitchHeaderMaxHeight">55</system:Double>
+
+
 
-    
 </ResourceDictionary>
\ No newline at end of file
diff --git a/W10SS_GUI_2/W10SS_GUI/Resource/fonts.xaml b/W10SS_GUI_2/W10SS_GUI/Resource/fonts.xaml
index b0977018..2934621c 100644
--- a/W10SS_GUI_2/W10SS_GUI/Resource/fonts.xaml
+++ b/W10SS_GUI_2/W10SS_GUI/Resource/fonts.xaml
@@ -3,9 +3,12 @@
                     xmlns:local="clr-namespace:W10SS_GUI.Resource"
                     xmlns:system="clr-namespace:System;assembly=mscorlib">
 
-    <FontFamily x:Key="textTogglesHeaderFontFamily">Calibri</FontFamily>
-    <FontFamily x:Key="textHamburgerCategoryButtonIcon">Segoe MDL2 Assets</FontFamily>
-    <FontFamily x:Key="textHamburgerCategoryFlashButtonIcon">Segoe MDL2 Assets</FontFamily>
-    <FontFamily x:Key="windowFontFamily">Segoe UI</FontFamily>
-    
+    <FontFamily x:Key="fontTogglesPanelHeader">Calibri</FontFamily>
+    <FontFamily x:Key="fontHamburgerCategoryButtonIcon">Segoe MDL2 Assets</FontFamily>
+    <FontFamily x:Key="fontHamburgerCategoryFlashButtonIcon">Segoe MDL2 Assets</FontFamily>
+    <FontFamily x:Key="fontWindow">Segoe UI</FontFamily>
+
+    <FontFamily x:Key="fontToggleIcon">Segoe MDL2 Assets</FontFamily>
+    <FontFamily x:Key="fontToggleSwitchHeader">Calibri</FontFamily>
+
 </ResourceDictionary>
\ No newline at end of file
diff --git a/W10SS_GUI_2/W10SS_GUI/W10SS_GUI.csproj b/W10SS_GUI_2/W10SS_GUI/W10SS_GUI.csproj
index d3c9956a..9b4385ef 100644
--- a/W10SS_GUI_2/W10SS_GUI/W10SS_GUI.csproj
+++ b/W10SS_GUI_2/W10SS_GUI/W10SS_GUI.csproj
@@ -75,6 +75,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="Controls\ToggleSwitch.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Resource\animations.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
@@ -116,6 +120,9 @@
     <Compile Include="Controls\TogglesCategoryPanel.xaml.cs">
       <DependentUpon>TogglesCategoryPanel.xaml</DependentUpon>
     </Compile>
+    <Compile Include="Controls\ToggleSwitch.xaml.cs">
+      <DependentUpon>ToggleSwitch.xaml</DependentUpon>
+    </Compile>
     <Compile Include="MainWindow.xaml.cs">
       <DependentUpon>MainWindow.xaml</DependentUpon>
       <SubType>Code</SubType>