From a614002ead63bffd4bd295a976bb4d85d0bee859 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Tue, 16 Jul 2024 22:29:35 +0800
Subject: [PATCH] feat: add size Classes to ToggleSwitch.

(cherry picked from commit d3c909a83ccb6a0a58c5b61793ca4a8fbd3e765d)
---
 .../Pages/ToggleSwitchDemo.axaml              |  20 ++-
 src/Semi.Avalonia/Controls/ToggleSwitch.axaml | 128 ++++++++++--------
 .../Themes/Dark/ToggleSwitch.axaml            |   6 +-
 .../Themes/Light/ToggleSwitch.axaml           |   4 +-
 .../Themes/Shared/ToggleSwitch.axaml          |   3 +
 5 files changed, 92 insertions(+), 69 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml
index d48d7e2..d747949 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml
@@ -7,7 +7,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel Spacing="20">
+    <StackPanel Spacing="8" Margin="20">
         <ToggleSwitch
             Content="Content"
             OffContent="OffContent"
@@ -24,11 +24,19 @@
             IsEnabled="False"
             OffContent="OffContent"
             OnContent="OnContent" />
-        <ToggleSwitch
-            Theme="{DynamicResource SimpleToggleSwitch}"
-            Content="Content"
-            OffContent="OffContent"
-            OnContent="OnContent" />
+        <StackPanel Orientation="Horizontal">
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small" IsChecked="True"/>
+        </StackPanel>
+        <StackPanel Orientation="Horizontal">
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" IsChecked="True" />
+        </StackPanel>
+        <StackPanel Orientation="Horizontal">
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Large" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Large" IsChecked="True"/>
+        </StackPanel>
+
         <ToggleSwitch Theme="{DynamicResource ButtonToggleSwitch}">
             <ToggleSwitch.OnContent>
                 <PathIcon
diff --git a/src/Semi.Avalonia/Controls/ToggleSwitch.axaml b/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
index e125555..5f7a8ae 100644
--- a/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
+++ b/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
@@ -36,8 +36,7 @@
                         VerticalAlignment="Top"
                         Content="{TemplateBinding Content}"
                         ContentTemplate="{TemplateBinding ContentTemplate}"
-                        IsVisible="{TemplateBinding Content,
-                                                    Converter={x:Static ObjectConverters.IsNotNull}}"
+                        IsVisible="{TemplateBinding Content, Converter={x:Static ObjectConverters.IsNotNull}}"
                         RecognizesAccessKey="True" />
                     <Grid
                         Grid.Row="1"
@@ -48,38 +47,34 @@
                             Grid.ColumnSpan="2"
                             TemplatedControl.IsTemplateFocusTarget="True" />
                         <Border
-                            Name="SwitchBackgroundBorder"
+                            x:Name="SwitchBackgroundBorder"
                             Grid.Column="0"
-                            Width="40"
-                            Height="20"
+                            Width="{DynamicResource ToggleSwitchDefaultWidth}"
+                            Height="{DynamicResource ToggleSwitchDefaultHeight}"
                             CornerRadius="100">
                             <Border.Transitions>
                                 <Transitions>
                                     <BrushTransition Property="Background" Duration="0:0:0.2" />
                                 </Transitions>
                             </Border.Transitions>
+                            <Canvas
+                                x:Name="PART_SwitchKnob"
+                                Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
+                                Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
+                                HorizontalAlignment="Left">
+                                <Grid
+                                    x:Name="PART_MovingKnobs"
+                                    Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
+                                    Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
+                                    Margin="{DynamicResource ToggleSwitchIndicatorDefaultMargin}">
+                                    <Border
+                                        x:Name="SwitchKnobIndicator"
+                                        Background="White"
+                                        BoxShadow="0 0 1 1 #222E3238"
+                                        CornerRadius="100" />
+                                </Grid>
+                            </Canvas>
                         </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"
@@ -154,6 +149,36 @@
                 <Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerCheckedDisabledBackground}" />
             </Style>
         </Style>
+        <Style Selector="^.Small">
+            <Style Selector="^ /template/ Border#SwitchBackgroundBorder">
+                <Setter Property="Width" Value="{DynamicResource ToggleSwitchSmallWidth}" />
+                <Setter Property="Height" Value="{DynamicResource ToggleSwitchSmallHeight}" />
+            </Style>
+            <Style Selector="^ /template/ Canvas#PART_SwitchKnob">
+                <Setter Property="Width" Value="{DynamicResource ToggleSwitchIndicatorSmallWidth}" />
+                <Setter Property="Height" Value="{DynamicResource ToggleSwitchIndicatorSmallWidth}" />
+            </Style>
+            <Style Selector="^ /template/ Grid#PART_MovingKnobs">
+                <Setter Property="Width" Value="{DynamicResource ToggleSwitchIndicatorSmallWidth}" />
+                <Setter Property="Height" Value="{DynamicResource ToggleSwitchIndicatorSmallWidth}" />
+                <Setter Property="Margin" Value="{DynamicResource ToggleSwitchIndicatorSmallMargin}"/>
+            </Style>
+        </Style>
+        <Style Selector="^.Large">
+            <Style Selector="^ /template/ Border#SwitchBackgroundBorder">
+                <Setter Property="Width" Value="{DynamicResource ToggleSwitchLargeWidth}" />
+                <Setter Property="Height" Value="{DynamicResource ToggleSwitchLargeHeight}" />
+            </Style>
+            <Style Selector="^ /template/ Canvas#PART_SwitchKnob">
+                <Setter Property="Width" Value="{DynamicResource ToggleSwitchIndicatorLargeWidth}" />
+                <Setter Property="Height" Value="{DynamicResource ToggleSwitchIndicatorLargeWidth}" />
+            </Style>
+            <Style Selector="^ /template/ Grid#PART_MovingKnobs">
+                <Setter Property="Width" Value="{DynamicResource ToggleSwitchIndicatorLargeWidth}" />
+                <Setter Property="Height" Value="{DynamicResource ToggleSwitchIndicatorLargeWidth}" />
+                <Setter Property="Margin" Value="{DynamicResource ToggleSwitchIndicatorLargeMargin}"/>
+            </Style>
+        </Style>
     </ControlTheme>
 
     <ControlTheme
@@ -205,49 +230,40 @@
                 <Grid
                     Background="{TemplateBinding Background}"
                     Cursor="Hand"
-                    RowDefinitions="*">
+                    ColumnDefinitions="Auto, *">
                     <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>
+                        Grid.Column="0"
+                        Grid.ColumnSpan="2"
+                        TemplatedControl.IsTemplateFocusTarget="True" />
+                    <Border
+                        x:Name="SwitchBackgroundBorder"
+                        Grid.Column="0"
+                        Width="{DynamicResource ToggleSwitchDefaultWidth}"
+                        Height="{DynamicResource ToggleSwitchDefaultHeight}"
+                        CornerRadius="100">
+                        <Border.Transitions>
+                            <Transitions>
+                                <BrushTransition Property="Background" Duration="0:0:0.2" />
+                            </Transitions>
+                        </Border.Transitions>
                         <Canvas
                             x:Name="PART_SwitchKnob"
-                            Grid.Column="0"
-                            Width="20"
-                            Height="20"
+                            Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
+                            Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
                             HorizontalAlignment="Left">
                             <Grid
                                 x:Name="PART_MovingKnobs"
-                                Width="20"
-                                Height="20">
+                                Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
+                                Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
+                                Margin="{DynamicResource ToggleSwitchIndicatorDefaultMargin}">
                                 <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>
+                    </Border>
                 </Grid>
             </ControlTemplate>
         </Setter>
diff --git a/src/Semi.Avalonia/Themes/Dark/ToggleSwitch.axaml b/src/Semi.Avalonia/Themes/Dark/ToggleSwitch.axaml
index 0d3ce91..e087b2f 100644
--- a/src/Semi.Avalonia/Themes/Dark/ToggleSwitch.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/ToggleSwitch.axaml
@@ -4,12 +4,10 @@
     <SolidColorBrush x:Key="ToggleSwitchContainerUnCheckedPressedBackground" Opacity="0.20" Color="White" />
     <SolidColorBrush x:Key="ToggleSwitchContainerUnCheckedDisabledBackground" Color="Transparent" />
 
-    <SolidColorBrush x:Key="ToggleSwitchContainerUnCheckedDisabledBorderBrush" Opacity="0.09" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="ToggleSwitchContainerUnCheckedDisabledBorderBrush" Opacity="0.16" Color="#F9F9F9" />
 
-    <SolidColorBrush x:Key="ToggleSwitchContainerCheckedDefaultBackground" Color="#5FB346" />
+    <SolidColorBrush x:Key="ToggleSwitchContainerCheckedDefaultBackground" Color="#5DC264" />
     <SolidColorBrush x:Key="ToggleSwitchContainerCheckedPointeroverBackground" Color="#7FD184" />
     <SolidColorBrush x:Key="ToggleSwitchContainerCheckedPressedBackground" Color="#A6E1A8" />
     <SolidColorBrush x:Key="ToggleSwitchContainerCheckedDisabledBackground" Color="#277731" />
-
-    <SolidColorBrush x:Key="ToggleSwitchIndicatorBorderBrush" Opacity="0.09" Color="#F9F9F9" />
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/Light/ToggleSwitch.axaml b/src/Semi.Avalonia/Themes/Light/ToggleSwitch.axaml
index a01024b..f1807ce 100644
--- a/src/Semi.Avalonia/Themes/Light/ToggleSwitch.axaml
+++ b/src/Semi.Avalonia/Themes/Light/ToggleSwitch.axaml
@@ -6,10 +6,8 @@
 
     <SolidColorBrush x:Key="ToggleSwitchContainerUnCheckedDisabledBorderBrush" Opacity="0.09" Color="#1C1F23" />
 
-    <SolidColorBrush x:Key="ToggleSwitchContainerCheckedDefaultBackground" Color="#5FB346" />
+    <SolidColorBrush x:Key="ToggleSwitchContainerCheckedDefaultBackground" Color="#3BB346" />
     <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" />
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/Shared/ToggleSwitch.axaml b/src/Semi.Avalonia/Themes/Shared/ToggleSwitch.axaml
index 2212e67..16a1e78 100644
--- a/src/Semi.Avalonia/Themes/Shared/ToggleSwitch.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/ToggleSwitch.axaml
@@ -8,6 +8,9 @@
     <x:Double x:Key="ToggleSwitchIndicatorDefaultWidth">18</x:Double>
     <x:Double x:Key="ToggleSwitchIndicatorSmallWidth">12</x:Double>
     <x:Double x:Key="ToggleSwitchIndicatorLargeWidth">24</x:Double>
+    <Thickness x:Key="ToggleSwitchIndicatorDefaultMargin">2 0 0 0</Thickness>
+    <Thickness x:Key="ToggleSwitchIndicatorSmallMargin">1 0 0 0</Thickness>
+    <Thickness x:Key="ToggleSwitchIndicatorLargeMargin">3 0 0 0</Thickness>
 
     <x:Double x:Key="ToggleSwitchDefaultFontSize">12</x:Double>
     <x:Double x:Key="ToggleSwitchLargeFontSize">14</x:Double>