From 33eaa1edc740493303db95e7161747c7447b5e69 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Tue, 3 Jan 2023 22:38:41 +0800
Subject: [PATCH] feat: add ToggleSwitch

---
 src/Semi.Avalonia.Demo/MainWindow.axaml       |  18 +-
 .../Pages/ToggleSwitchDemo.axaml              |  28 +++
 .../Pages/ToggleSwitchDemo.axaml.cs           |  18 ++
 src/Semi.Avalonia/Controls/Controls.axaml     |   1 +
 src/Semi.Avalonia/Controls/ToggleSwitch.axaml | 161 ++++++++++++++++++
 src/Semi.Avalonia/Themes/Light/Light.axaml    |   1 +
 .../Themes/Light/ToggleSwitch.axaml           |  48 ++++++
 7 files changed, 270 insertions(+), 5 deletions(-)
 create mode 100644 src/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml
 create mode 100644 src/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml.cs
 create mode 100644 src/Semi.Avalonia/Controls/ToggleSwitch.axaml
 create mode 100644 src/Semi.Avalonia/Themes/Light/ToggleSwitch.axaml

diff --git a/src/Semi.Avalonia.Demo/MainWindow.axaml b/src/Semi.Avalonia.Demo/MainWindow.axaml
index e5a4b98..e71f05f 100644
--- a/src/Semi.Avalonia.Demo/MainWindow.axaml
+++ b/src/Semi.Avalonia.Demo/MainWindow.axaml
@@ -1,9 +1,14 @@
 <Window
-    x:Class="Semi.Avalonia.Demo.MainWindow" xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:pages="using:Semi.Avalonia.Demo.Pages"
-    Title="Semi.Demo" d:DesignHeight="450"
-    d:DesignWidth="800" mc:Ignorable="d">
+    x:Class="Semi.Avalonia.Demo.MainWindow"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:pages="using:Semi.Avalonia.Demo.Pages"
+    Title="Semi.Demo"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
     <TabControl Margin="8" TabStripPlacement="Left">
         <TabItem Header="Overview">
             <pages:Overview />
@@ -47,5 +52,8 @@
         <TabItem Header="Flyout">
             <pages:FlyoutDemo />
         </TabItem>
+        <TabItem Header="ToggleSwitch">
+            <pages:ToggleSwitchDemo />
+        </TabItem>
     </TabControl>
 </Window>
diff --git a/src/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml b/src/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml
new file mode 100644
index 0000000..e46c580
--- /dev/null
+++ b/src/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml
@@ -0,0 +1,28 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.ToggleSwitchDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <StackPanel Margin="20" Spacing="20">
+        <ToggleSwitch
+            Content="Content"
+            OffContent="OffContent"
+            OnContent="OnContent" />
+        <ToggleSwitch
+            Content="Content"
+            IsChecked="True"
+            IsEnabled="False"
+            OffContent="OffContent"
+            OnContent="OnContent" />
+        <ToggleSwitch
+            Content="Content"
+            IsChecked="False"
+            IsEnabled="False"
+            OffContent="OffContent"
+            OnContent="OnContent" />
+    </StackPanel>
+</UserControl>
diff --git a/src/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml.cs b/src/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml.cs
new file mode 100644
index 0000000..51b02b0
--- /dev/null
+++ b/src/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml.cs
@@ -0,0 +1,18 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class ToggleSwitchDemo : UserControl
+{
+    public ToggleSwitchDemo()
+    {
+        InitializeComponent();
+    }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+}
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Controls/Controls.axaml b/src/Semi.Avalonia/Controls/Controls.axaml
index 15f6d62..491abfe 100644
--- a/src/Semi.Avalonia/Controls/Controls.axaml
+++ b/src/Semi.Avalonia/Controls/Controls.axaml
@@ -18,6 +18,7 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/TabItem.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/TextBlock.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/TextBox.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Controls/ToggleSwitch.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/TreeView.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/UserControl.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/Window.axaml" />
diff --git a/src/Semi.Avalonia/Controls/ToggleSwitch.axaml b/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
new file mode 100644
index 0000000..b05fb51
--- /dev/null
+++ b/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
@@ -0,0 +1,161 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Design.PreviewWith>
+        <StackPanel Margin="20">
+            <ToggleSwitch
+                Content="Content"
+                OffContent="OffContent"
+                OnContent="OnContent" />
+        </StackPanel>
+    </Design.PreviewWith>
+    <ControlTheme x:Key="{x:Type ToggleSwitch}" TargetType="ToggleSwitch">
+        <Setter Property="Foreground" Value="{DynamicResource ToggleSwitchContentForeground}" />
+        <Setter Property="HorizontalAlignment" Value="Left" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="HorizontalContentAlignment" Value="Left" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="ToggleSwitch">
+                <Grid
+                    Background="{TemplateBinding Background}"
+                    Cursor="Hand"
+                    RowDefinitions="Auto,*">
+                    <ContentPresenter
+                        x:Name="PART_ContentPresenter"
+                        Grid.Row="0"
+                        Margin="{DynamicResource ToggleSwitchHeaderMargin}"
+                        VerticalAlignment="Top"
+                        Content="{TemplateBinding Content}"
+                        ContentTemplate="{TemplateBinding ContentTemplate}"
+                        RecognizesAccessKey="True" />
+                    <Grid
+                        Grid.Row="1"
+                        Background="Transparent"
+                        ColumnDefinitions="Auto, *">
+                        <Grid
+                            Grid.Column="0"
+                            Grid.ColumnSpan="2"
+                            TemplatedControl.IsTemplateFocusTarget="True" />
+                        <Border
+                            Name="SwitchBackgroundBorder"
+                            Grid.Column="0"
+                            Width="40"
+                            Height="20"
+                            CornerRadius="100">
+                            <Border.Transitions>
+                                <Transitions>
+                                    <BrushTransition Property="Background" Duration="0:0:0.2" />
+                                </Transitions>
+                            </Border.Transitions>
+                        </Border>
+                        <Canvas
+                            x:Name="PART_SwitchKnob"
+                            Grid.Column="0"
+                            Width="20"
+                            Height="20"
+                            HorizontalAlignment="Left">
+                            <Grid
+                                x:Name="PART_MovingKnobs"
+                                Width="20"
+                                Height="20">
+                                <Border
+                                    x:Name="SwitchKnobIndicator"
+                                    Width="14"
+                                    Height="14"
+                                    Background="White"
+                                    BorderBrush="{DynamicResource ToggleSwitchIndicatorBorderBrush}"
+                                    BorderThickness="0.5"
+                                    BoxShadow="0 0 1 1 #222E3238"
+                                    CornerRadius="100" />
+                            </Grid>
+                        </Canvas>
+
+                        <ContentPresenter
+                            x:Name="PART_OnContentPresenter"
+                            Grid.Column="1"
+                            Margin="{DynamicResource ToggleSwitchOnContentMargin}"
+                            HorizontalAlignment="Left"
+                            VerticalAlignment="Center"
+                            VerticalContentAlignment="Center"
+                            Content="{TemplateBinding OnContent}"
+                            ContentTemplate="{TemplateBinding OnContentTemplate}"
+                            IsVisible="True" />
+                        <ContentPresenter
+                            x:Name="PART_OffContentPresenter"
+                            Grid.Column="1"
+                            Margin="{DynamicResource ToggleSwitchOnContentMargin}"
+                            HorizontalAlignment="Right"
+                            VerticalAlignment="Center"
+                            VerticalContentAlignment="Center"
+                            Content="{TemplateBinding OffContent}"
+                            ContentTemplate="{TemplateBinding OffContentTemplate}"
+                            IsVisible="False" />
+
+                    </Grid>
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter:empty">
+            <Setter Property="Margin" Value="0" />
+        </Style>
+
+        <!--  NormalState  -->
+        <Style Selector="^:not(:dragging) /template/ Grid#PART_MovingKnobs">
+            <Setter Property="Transitions">
+                <Transitions>
+                    <DoubleTransition
+                        Easing="CubicEaseOut"
+                        Property="Canvas.Left"
+                        Duration="0:0:0.2" />
+                </Transitions>
+            </Setter>
+        </Style>
+
+        <Style Selector="^:unchecked">
+            <Style Selector="^ /template/ ContentPresenter#PART_OnContentPresenter">
+                <Setter Property="ContentPresenter.IsVisible" Value="False" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_OffContentPresenter">
+                <Setter Property="ContentPresenter.IsVisible" Value="True" />
+            </Style>
+            <Style Selector="^ /template/ Border#SwitchBackgroundBorder">
+                <Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerUnCheckedDefaultBackground}" />
+            </Style>
+            <Style Selector="^:pointerover /template/ Border#SwitchBackgroundBorder">
+                <Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerUnCheckedPointerOverBackground}" />
+            </Style>
+            <Style Selector="^:pressed /template/ Border#SwitchBackgroundBorder">
+                <Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerUnCheckedPressedBackground}" />
+            </Style>
+            <Style Selector="^:disabled /template/ Border#SwitchBackgroundBorder">
+                <Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerUnCheckedDisabledBackground}" />
+                <Setter Property="Border.BorderBrush" Value="{DynamicResource ToggleSwitchContainerUnCheckedDisabledBorderBrush}" />
+                <Setter Property="Border.BorderThickness" Value="1" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:checked">
+            <Style Selector="^ /template/ ContentPresenter#PART_OnContentPresenter">
+                <Setter Property="ContentPresenter.IsVisible" Value="True" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_OffContentPresenter">
+                <Setter Property="ContentPresenter.IsVisible" Value="False" />
+            </Style>
+            <Style Selector="^ /template/ Border#SwitchBackgroundBorder">
+                <Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerCheckedDefaultBackground}" />
+            </Style>
+            <Style Selector="^:pointerover /template/ Border#SwitchBackgroundBorder">
+                <Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerCheckedPointerOverBackground}" />
+            </Style>
+            <Style Selector="^:pressed /template/ Border#SwitchBackgroundBorder">
+                <Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerCheckedPressedBackground}" />
+            </Style>
+            <Style Selector="^:disabled /template/ Border#SwitchBackgroundBorder">
+                <Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerCheckedDisabledBackground}" />
+            </Style>
+        </Style>
+
+
+    </ControlTheme>
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Light/Light.axaml b/src/Semi.Avalonia/Themes/Light/Light.axaml
index 0a5a374..7aa456e 100644
--- a/src/Semi.Avalonia/Themes/Light/Light.axaml
+++ b/src/Semi.Avalonia/Themes/Light/Light.axaml
@@ -14,6 +14,7 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TabItem.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TextBlock.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TextBox.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ToggleSwitch.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TreeView.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Window.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Flyout.axaml" />
diff --git a/src/Semi.Avalonia/Themes/Light/ToggleSwitch.axaml b/src/Semi.Avalonia/Themes/Light/ToggleSwitch.axaml
new file mode 100644
index 0000000..b5b8a3e
--- /dev/null
+++ b/src/Semi.Avalonia/Themes/Light/ToggleSwitch.axaml
@@ -0,0 +1,48 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:sys="clr-namespace:System;assembly=System.Runtime">
+    <SolidColorBrush
+        x:Key="ToggleSwitchContainerUnCheckedDefaultBackground"
+        Opacity="0.05"
+        Color="#2E3238" />
+    <SolidColorBrush
+        x:Key="ToggleSwitchContainerUnCheckedPointerOverBackground"
+        Opacity="0.09"
+        Color="#2E3238" />
+    <SolidColorBrush
+        x:Key="ToggleSwitchContainerUnCheckedPressedBackground"
+        Opacity="0.13"
+        Color="#2E3238" />
+    <SolidColorBrush x:Key="ToggleSwitchContainerUnCheckedDisabledBackground" Color="Transparent" />
+
+    <SolidColorBrush
+        x:Key="ToggleSwitchContainerUnCheckedDisabledBorderBrush"
+        Opacity="0.09"
+        Color="#1C1F23" />
+
+    <SolidColorBrush x:Key="ToggleSwitchContainerCheckedDefaultBackground" Color="#5FB346" />
+    <SolidColorBrush x:Key="ToggleSwitchContainerCheckedPointerOverBackground" Color="#30953B" />
+    <SolidColorBrush x:Key="ToggleSwitchContainerCheckedPressedBackground" Color="#25772F" />
+    <SolidColorBrush x:Key="ToggleSwitchContainerCheckedDisabledBackground" Color="#A4E0A7" />
+
+    <SolidColorBrush
+        x:Key="ToggleSwitchIndicatorBorderBrush"
+        Opacity="0.09"
+        Color="#1C1F23" />
+    <sys:Double x:Key="SizeSwitchDefaultHeight">24</sys:Double>
+    <sys:Double x:Key="SizeSwitchSmallHeight">16</sys:Double>
+    <sys:Double x:Key="SizeSwitchLargeHeight">32</sys:Double>
+    <sys:Double x:Key="SizeSwitchDefaultWidth">40</sys:Double>
+    <sys:Double x:Key="SizeSwitchSmallWidth">26</sys:Double>
+    <sys:Double x:Key="SizeSwitchLargeWidth">54</sys:Double>
+    <sys:Double x:Key="SizeSwitchIndicatorDefaultWidth">18</sys:Double>
+    <sys:Double x:Key="SizeSwitchIndicatorSmallWidth">12</sys:Double>
+    <sys:Double x:Key="SizeSwitchIndicatorLargeWidth">24</sys:Double>
+
+    <sys:Double x:Key="SizeSwitchDefaultFontSize">12</sys:Double>
+    <sys:Double x:Key="SizeSwitchLargeFontSize">14</sys:Double>
+
+    <Thickness x:Key="ToggleSwitchHeaderMargin">8 4</Thickness>
+    <Thickness x:Key="ToggleSwitchOnContentMargin">8 4</Thickness>
+</ResourceDictionary>