From 20f421f6fc8eab23853a768cb0c7158d3d8836cf Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Wed, 22 Feb 2023 17:37:39 +0800
Subject: [PATCH 1/4] feat: add SimpleToggleSwitch theme.

---
 .../Pages/ToggleSwitchDemo.axaml              | 18 +++++-
 src/Semi.Avalonia/Controls/ToggleSwitch.axaml | 55 +++++++++++++++----
 2 files changed, 60 insertions(+), 13 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml
index 086858a..bdca376 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml
@@ -24,5 +24,21 @@
             IsEnabled="False"
             OffContent="OffContent"
             OnContent="OnContent" />
+        <ToggleSwitch Theme="{DynamicResource SimpleToggleSwitch}">
+            <ToggleSwitch.OnContent>
+                <PathIcon
+                    Width="16"
+                    Height="16"
+                    Data="M3.55 19.09L4.96 20.5L6.76 18.71L5.34 17.29M12 6C8.69 6 6 8.69 6 12S8.69 18 12 18 18 15.31 18 12C18 8.68 15.31 6 12 6M20 13H23V11H20M17.24 18.71L19.04 20.5L20.45 19.09L18.66 17.29M20.45 5L19.04 3.6L17.24 5.39L18.66 6.81M13 1H11V4H13M6.76 5.39L4.96 3.6L3.55 5L5.34 6.81L6.76 5.39M1 13H4V11H1M13 20H11V23H13"
+                    Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
+            </ToggleSwitch.OnContent>
+            <ToggleSwitch.OffContent>
+                <PathIcon
+                    Width="16"
+                    Height="16"
+                    Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM17 15C17.476 15 17.9408 14.9525 18.3901 14.862C17.296 17.3011 14.8464 19 12 19C8.13401 19 5 15.866 5 12C5 8.60996 7.40983 5.78277 10.6099 5.13803C10.218 6.01173 10 6.98041 10 8C10 11.866 13.134 15 17 15Z"
+                    Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
+            </ToggleSwitch.OffContent>
+        </ToggleSwitch>
     </StackPanel>
-</UserControl>
+</UserControl>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Controls/ToggleSwitch.axaml b/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
index d61f215..2e8be23 100644
--- a/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
+++ b/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
@@ -123,17 +123,22 @@
                 <Setter Property="ContentPresenter.IsVisible" Value="True" />
             </Style>
             <Style Selector="^ /template/ Border#SwitchBackgroundBorder">
-                <Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerUnCheckedDefaultBackground}" />
+                <Setter Property="Border.Background"
+                        Value="{DynamicResource ToggleSwitchContainerUnCheckedDefaultBackground}" />
             </Style>
             <Style Selector="^:pointerover /template/ Border#SwitchBackgroundBorder">
-                <Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerUnCheckedPointerOverBackground}" />
+                <Setter Property="Border.Background"
+                        Value="{DynamicResource ToggleSwitchContainerUnCheckedPointerOverBackground}" />
             </Style>
             <Style Selector="^:pressed /template/ Border#SwitchBackgroundBorder">
-                <Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerUnCheckedPressedBackground}" />
+                <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.Background"
+                        Value="{DynamicResource ToggleSwitchContainerUnCheckedDisabledBackground}" />
+                <Setter Property="Border.BorderBrush"
+                        Value="{DynamicResource ToggleSwitchContainerUnCheckedDisabledBorderBrush}" />
                 <Setter Property="Border.BorderThickness" Value="1" />
             </Style>
         </Style>
@@ -146,19 +151,45 @@
                 <Setter Property="ContentPresenter.IsVisible" Value="False" />
             </Style>
             <Style Selector="^ /template/ Border#SwitchBackgroundBorder">
-                <Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerCheckedDefaultBackground}" />
+                <Setter Property="Border.Background"
+                        Value="{DynamicResource ToggleSwitchContainerCheckedDefaultBackground}" />
             </Style>
             <Style Selector="^:pointerover /template/ Border#SwitchBackgroundBorder">
-                <Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerCheckedPointerOverBackground}" />
+                <Setter Property="Border.Background"
+                        Value="{DynamicResource ToggleSwitchContainerCheckedPointerOverBackground}" />
             </Style>
             <Style Selector="^:pressed /template/ Border#SwitchBackgroundBorder">
-                <Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerCheckedPressedBackground}" />
+                <Setter Property="Border.Background"
+                        Value="{DynamicResource ToggleSwitchContainerCheckedPressedBackground}" />
             </Style>
             <Style Selector="^:disabled /template/ Border#SwitchBackgroundBorder">
-                <Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerCheckedDisabledBackground}" />
+                <Setter Property="Border.Background"
+                        Value="{DynamicResource ToggleSwitchContainerCheckedDisabledBackground}" />
             </Style>
         </Style>
-
-
     </ControlTheme>
-</ResourceDictionary>
+
+    <ControlTheme x:Key="SimpleToggleSwitch" BasedOn="{StaticResource {x:Type ToggleSwitch}}" TargetType="ToggleSwitch">
+        <Setter Property="Template">
+            <ControlTemplate TargetType="ToggleSwitch">
+                <Grid
+                    Background="Transparent"
+                    Cursor="Hand"
+                    ColumnDefinitions="Auto">
+                    <Grid x:Name="PART_SwitchKnob" />
+                    <Grid x:Name="PART_MovingKnobs" />
+                    <ContentPresenter
+                        x:Name="PART_OnContentPresenter"
+                        Margin="{DynamicResource ToggleSwitchOnContentMargin}"
+                        Content="{TemplateBinding OnContent}"
+                        ContentTemplate="{TemplateBinding OnContentTemplate}" />
+                    <ContentPresenter
+                        x:Name="PART_OffContentPresenter"
+                        Margin="{DynamicResource ToggleSwitchOnContentMargin}"
+                        Content="{TemplateBinding OffContent}"
+                        ContentTemplate="{TemplateBinding OffContentTemplate}" />
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>
\ No newline at end of file

From fa19b9e89a49531d5f4ec3c1f432863f65ea2917 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Thu, 23 Feb 2023 13:26:18 +0800
Subject: [PATCH 2/4] feat: add CustomToggleSwitch and SimpleToggleSwitch

---
 .../Pages/ToggleSwitchDemo.axaml              |  7 ++-
 src/Semi.Avalonia/Controls/ToggleSwitch.axaml | 56 ++++++++++++++++++-
 2 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml
index bdca376..4dcc965 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml
@@ -24,7 +24,12 @@
             IsEnabled="False"
             OffContent="OffContent"
             OnContent="OnContent" />
-        <ToggleSwitch Theme="{DynamicResource SimpleToggleSwitch}">
+        <ToggleSwitch
+            Theme="{DynamicResource SimpleToggleSwitch}"
+            Content="Content"
+            OffContent="OffContent"
+            OnContent="OnContent" />
+        <ToggleSwitch Theme="{DynamicResource CustomToggleSwitch}">
             <ToggleSwitch.OnContent>
                 <PathIcon
                     Width="16"
diff --git a/src/Semi.Avalonia/Controls/ToggleSwitch.axaml b/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
index 2e8be23..1846e72 100644
--- a/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
+++ b/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
@@ -169,7 +169,7 @@
         </Style>
     </ControlTheme>
 
-    <ControlTheme x:Key="SimpleToggleSwitch" BasedOn="{StaticResource {x:Type ToggleSwitch}}" TargetType="ToggleSwitch">
+    <ControlTheme x:Key="CustomToggleSwitch" BasedOn="{StaticResource {x:Type ToggleSwitch}}" TargetType="ToggleSwitch">
         <Setter Property="Template">
             <ControlTemplate TargetType="ToggleSwitch">
                 <Grid
@@ -192,4 +192,58 @@
             </ControlTemplate>
         </Setter>
     </ControlTheme>
+
+    <ControlTheme x:Key="SimpleToggleSwitch" BasedOn="{StaticResource {x:Type ToggleSwitch}}" TargetType="ToggleSwitch">
+        <Setter Property="Template">
+            <ControlTemplate TargetType="ToggleSwitch">
+                <Grid
+                    Background="{TemplateBinding Background}"
+                    Cursor="Hand"
+                    RowDefinitions="*">
+                    <Grid
+                        Grid.Row="0"
+                        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>
+                    </Grid>
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
 </ResourceDictionary>
\ No newline at end of file

From c8e58e3dbf26a73423e12e56fae9eadf52058625 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Thu, 23 Feb 2023 20:52:02 +0800
Subject: [PATCH 3/4] fix: rename theme.

---
 demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml | 2 +-
 src/Semi.Avalonia/Controls/ToggleSwitch.axaml        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml
index 4dcc965..d48d7e2 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml
@@ -29,7 +29,7 @@
             Content="Content"
             OffContent="OffContent"
             OnContent="OnContent" />
-        <ToggleSwitch Theme="{DynamicResource CustomToggleSwitch}">
+        <ToggleSwitch Theme="{DynamicResource ButtonToggleSwitch}">
             <ToggleSwitch.OnContent>
                 <PathIcon
                     Width="16"
diff --git a/src/Semi.Avalonia/Controls/ToggleSwitch.axaml b/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
index 1846e72..c5547f3 100644
--- a/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
+++ b/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
@@ -169,7 +169,7 @@
         </Style>
     </ControlTheme>
 
-    <ControlTheme x:Key="CustomToggleSwitch" BasedOn="{StaticResource {x:Type ToggleSwitch}}" TargetType="ToggleSwitch">
+    <ControlTheme x:Key="ButtonToggleSwitch" BasedOn="{StaticResource {x:Type ToggleSwitch}}" TargetType="ToggleSwitch">
         <Setter Property="Template">
             <ControlTemplate TargetType="ToggleSwitch">
                 <Grid

From 6af2d9008d6a89c03a01ceb5ac04d18ebf423f77 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Thu, 23 Feb 2023 21:28:33 +0800
Subject: [PATCH 4/4] feat: add :pointerover and :pressed style

---
 src/Semi.Avalonia/Controls/ToggleSwitch.axaml | 44 ++++++++++++-------
 1 file changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/Semi.Avalonia/Controls/ToggleSwitch.axaml b/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
index c5547f3..792ed36 100644
--- a/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
+++ b/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
@@ -172,25 +172,37 @@
     <ControlTheme x:Key="ButtonToggleSwitch" BasedOn="{StaticResource {x:Type ToggleSwitch}}" TargetType="ToggleSwitch">
         <Setter Property="Template">
             <ControlTemplate TargetType="ToggleSwitch">
-                <Grid
-                    Background="Transparent"
+                <Border
+                    Name="Background"
                     Cursor="Hand"
-                    ColumnDefinitions="Auto">
-                    <Grid x:Name="PART_SwitchKnob" />
-                    <Grid x:Name="PART_MovingKnobs" />
-                    <ContentPresenter
-                        x:Name="PART_OnContentPresenter"
-                        Margin="{DynamicResource ToggleSwitchOnContentMargin}"
-                        Content="{TemplateBinding OnContent}"
-                        ContentTemplate="{TemplateBinding OnContentTemplate}" />
-                    <ContentPresenter
-                        x:Name="PART_OffContentPresenter"
-                        Margin="{DynamicResource ToggleSwitchOnContentMargin}"
-                        Content="{TemplateBinding OffContent}"
-                        ContentTemplate="{TemplateBinding OffContentTemplate}" />
-                </Grid>
+                    Padding="8"
+                    Background="{TemplateBinding Background}"
+                    CornerRadius="3">
+                    <Grid
+                        Background="Transparent"
+                        ColumnDefinitions="Auto">
+                        <Grid x:Name="PART_SwitchKnob" />
+                        <Grid x:Name="PART_MovingKnobs" />
+                        <ContentPresenter
+                            x:Name="PART_OnContentPresenter"
+                            Margin="{DynamicResource ToggleSwitchOnContentMargin}"
+                            Content="{TemplateBinding OnContent}"
+                            ContentTemplate="{TemplateBinding OnContentTemplate}" />
+                        <ContentPresenter
+                            x:Name="PART_OffContentPresenter"
+                            Margin="{DynamicResource ToggleSwitchOnContentMargin}"
+                            Content="{TemplateBinding OffContent}"
+                            ContentTemplate="{TemplateBinding OffContentTemplate}" />
+                    </Grid>
+                </Border>
             </ControlTemplate>
         </Setter>
+        <Style Selector="^:pointerover">
+            <Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
+        </Style>
+        <Style Selector="^:pressed">
+            <Setter Property="Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
+        </Style>
     </ControlTheme>
 
     <ControlTheme x:Key="SimpleToggleSwitch" BasedOn="{StaticResource {x:Type ToggleSwitch}}" TargetType="ToggleSwitch">