From 3af7e2f29a3ac2d55d6266849c07de8bfdd0ba7f Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Tue, 6 Aug 2024 16:38:45 +0800
Subject: [PATCH] feat: add OnContent & OffContent to SimpleToggleSwitch.

---
 .../Pages/ToggleSwitchDemo.axaml              | 25 +++++--
 src/Semi.Avalonia/Controls/ToggleSwitch.axaml | 68 ++++++++++++++-----
 .../Themes/Dark/ToggleSwitch.axaml            |  3 +
 .../Themes/Light/ToggleSwitch.axaml           |  3 +
 .../Themes/Shared/ToggleSwitch.axaml          |  2 +
 5 files changed, 79 insertions(+), 22 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml
index 94299c2..1a23866 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml
@@ -26,9 +26,9 @@
             OnContent="OnContent" />
         <StackPanel Orientation="Horizontal">
             <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small" />
-            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small" IsChecked="True"/>
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small" IsChecked="True" />
             <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small Loading" />
-            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small Loading" IsChecked="True"/>
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small Loading" IsChecked="True" />
         </StackPanel>
         <StackPanel Orientation="Horizontal">
             <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" />
@@ -38,9 +38,26 @@
         </StackPanel>
         <StackPanel Orientation="Horizontal">
             <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Large" />
-            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Large" IsChecked="True"/>
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Large" IsChecked="True" />
             <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Large Loading" />
-            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Large Loading" IsChecked="True"/>
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Large Loading" IsChecked="True" />
+        </StackPanel>
+
+        <StackPanel Orientation="Horizontal">
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开"/>
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="〇" OnContent="｜"/>
+        </StackPanel>
+        <StackPanel Orientation="Horizontal">
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开" IsChecked="True" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="〇" OnContent="｜" IsChecked="True" />
+        </StackPanel>
+        <StackPanel Orientation="Horizontal">
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开" Classes="Large" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="〇" OnContent="｜" Classes="Large" />
+        </StackPanel>
+        <StackPanel Orientation="Horizontal">
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开" Classes="Large" IsChecked="True" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="〇" OnContent="｜" Classes="Large" IsChecked="True" />
         </StackPanel>
 
         <ToggleSwitch Theme="{DynamicResource ButtonToggleSwitch}">
diff --git a/src/Semi.Avalonia/Controls/ToggleSwitch.axaml b/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
index 8bb8bc6..0ea882c 100644
--- a/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
+++ b/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
@@ -278,29 +278,29 @@
         x:Key="SimpleToggleSwitch"
         BasedOn="{StaticResource {x:Type ToggleSwitch}}"
         TargetType="ToggleSwitch">
+        <Setter Property="OnContent" Value="{x:Null}" />
+        <Setter Property="OffContent" Value="{x:Null}" />
+        <Setter Property="FontSize" Value="{DynamicResource SimpleToggleSwitchFontSize}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="ToggleSwitch">
-                <Grid
+                <Border
+                    x:Name="SwitchBackgroundBorder"
                     Background="{TemplateBinding Background}"
                     Cursor="Hand"
-                    ColumnDefinitions="Auto, *">
+                    Width="{DynamicResource ToggleSwitchDefaultWidth}"
+                    Height="{DynamicResource ToggleSwitchDefaultHeight}"
+                    CornerRadius="100">
+                    <Border.Transitions>
+                        <Transitions>
+                            <BrushTransition Property="Background" Duration="0:0:0.2" />
+                        </Transitions>
+                    </Border.Transitions>
                     <Grid
-                        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>
+                        ColumnDefinitions="*,*">
                         <Canvas
                             x:Name="PART_SwitchKnob"
+                            Grid.Column="0"
+                            Grid.ColumnSpan="2"
                             Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
                             Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
                             HorizontalAlignment="Left">
@@ -347,9 +347,41 @@
                                 </Arc>
                             </Grid>
                         </Canvas>
-                    </Border>
-                </Grid>
+                        <ContentPresenter
+                            x:Name="PART_OnContentPresenter"
+                            Grid.Column="0"
+                            VerticalAlignment="Center"
+                            HorizontalAlignment="Center"
+                            FontSize="{TemplateBinding FontSize}"
+                            Foreground="{TemplateBinding Foreground}"
+                            Content="{TemplateBinding OnContent}"
+                            ContentTemplate="{TemplateBinding OnContentTemplate}" />
+                        <ContentPresenter
+                            x:Name="PART_OffContentPresenter"
+                            Grid.Column="1"
+                            VerticalAlignment="Center"
+                            HorizontalAlignment="Center"
+                            FontSize="{TemplateBinding FontSize}"
+                            Foreground="{TemplateBinding Foreground}"
+                            Content="{TemplateBinding OffContent}"
+                            ContentTemplate="{TemplateBinding OffContentTemplate}" />
+                    </Grid>
+                </Border>
             </ControlTemplate>
         </Setter>
+        <Style Selector="^:unchecked">
+            <Setter Property="Foreground" Value="{DynamicResource SimpleToggleSwitchContainerUnCheckedForeground}" />
+        </Style>
+        <Style Selector="^:checked">
+            <Setter Property="Foreground" Value="{DynamicResource SimpleToggleSwitchContainerCheckedForeground}" />
+        </Style>
+        <Style Selector="^.Small">
+            <Style Selector="^ /template/ ContentPresenter#PART_OnContentPresenter">
+                <Setter Property="IsVisible" Value="False" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_OffContentPresenter">
+                <Setter Property="IsVisible" Value="False" />
+            </Style>
+        </Style>
     </ControlTheme>
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/Dark/ToggleSwitch.axaml b/src/Semi.Avalonia/Themes/Dark/ToggleSwitch.axaml
index e087b2f..f5d6888 100644
--- a/src/Semi.Avalonia/Themes/Dark/ToggleSwitch.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/ToggleSwitch.axaml
@@ -10,4 +10,7 @@
     <SolidColorBrush x:Key="ToggleSwitchContainerCheckedPointeroverBackground" Color="#7FD184" />
     <SolidColorBrush x:Key="ToggleSwitchContainerCheckedPressedBackground" Color="#A6E1A8" />
     <SolidColorBrush x:Key="ToggleSwitchContainerCheckedDisabledBackground" Color="#277731" />
+
+    <SolidColorBrush x:Key="SimpleToggleSwitchContainerUnCheckedForeground" Opacity="0.6" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="SimpleToggleSwitchContainerCheckedForeground" Color="White" />
 </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 f1807ce..b86d9b1 100644
--- a/src/Semi.Avalonia/Themes/Light/ToggleSwitch.axaml
+++ b/src/Semi.Avalonia/Themes/Light/ToggleSwitch.axaml
@@ -10,4 +10,7 @@
     <SolidColorBrush x:Key="ToggleSwitchContainerCheckedPointeroverBackground" Color="#30953B" />
     <SolidColorBrush x:Key="ToggleSwitchContainerCheckedPressedBackground" Color="#25772F" />
     <SolidColorBrush x:Key="ToggleSwitchContainerCheckedDisabledBackground" Color="#A4E0A7" />
+
+    <SolidColorBrush x:Key="SimpleToggleSwitchContainerUnCheckedForeground" Opacity="0.62" Color="#1C1F23" />
+    <SolidColorBrush x:Key="SimpleToggleSwitchContainerCheckedForeground" Color="White" />
 </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 56a0b72..eaa89b4 100644
--- a/src/Semi.Avalonia/Themes/Shared/ToggleSwitch.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/ToggleSwitch.axaml
@@ -19,4 +19,6 @@
 
     <Thickness x:Key="ToggleSwitchHeaderMargin">8 4</Thickness>
     <Thickness x:Key="ToggleSwitchOnContentMargin">8 4</Thickness>
+
+    <x:Double x:Key="SimpleToggleSwitchFontSize">14</x:Double>
 </ResourceDictionary>
\ No newline at end of file