From 8563ad93c14723de2882b1402543d63b4697af42 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Sun, 1 Dec 2024 17:19:09 +0800
Subject: [PATCH] feat: redesign ButtonToggleSwitch.

(cherry picked from commit 3c8854f9de99baffd70d96ff50fcb8364d37af81)
---
 .../Pages/ToggleSwitchDemo.axaml              | 83 ++++++++++-------
 .../Themes/ToggleSwitch.axaml                 | 54 ++---------
 demo/Semi.Avalonia.Demo/Views/MainView.axaml  |  5 +-
 src/Semi.Avalonia/Controls/ToggleSwitch.axaml | 91 +++++++++++++++----
 4 files changed, 132 insertions(+), 101 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml
index 1a23866..ed66fc1 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml
@@ -8,22 +8,23 @@
     d:DesignWidth="800"
     mc:Ignorable="d">
     <StackPanel Spacing="8" Margin="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 Orientation="Horizontal">
+            <StackPanel>
+                <ToggleSwitch />
+                <ToggleSwitch IsChecked="True" />
+            </StackPanel>
+            <StackPanel>
+                <ToggleSwitch IsEnabled="False" />
+                <ToggleSwitch IsChecked="True" IsEnabled="False" />
+            </StackPanel>
+        </StackPanel>
+        <StackPanel Orientation="Horizontal">
+            <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" />
+            <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" IsChecked="True"/>
+            <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" IsEnabled="False" />
+            <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" IsEnabled="False" IsChecked="True" />
+        </StackPanel>
+
         <StackPanel Orientation="Horizontal">
             <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small" />
             <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small" IsChecked="True" />
@@ -44,8 +45,8 @@
         </StackPanel>
 
         <StackPanel Orientation="Horizontal">
-            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开"/>
-            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="〇" OnContent="｜"/>
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="〇" OnContent="｜" />
         </StackPanel>
         <StackPanel Orientation="Horizontal">
             <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开" IsChecked="True" />
@@ -60,21 +61,35 @@
             <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="〇" OnContent="｜" Classes="Large" IsChecked="True" />
         </StackPanel>
 
-        <ToggleSwitch Theme="{DynamicResource ButtonToggleSwitch}">
-            <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 Orientation="Horizontal">
+            <ToggleSwitch
+                HorizontalAlignment="Left"
+                Padding="8"
+                Theme="{DynamicResource ButtonToggleSwitch}"
+                Foreground="{DynamicResource ButtonDefaultTertiaryForeground}">
+                <ToggleSwitch.Content>
+                    <PathIcon
+                        Theme="{DynamicResource InnerPathIcon}"
+                        Data="M5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5C2 3.34315 3.34315 2 5 2ZM6 4C5.44772 4 5 4.44772 5 5V19C5 19.5523 5.44772 20 6 20H9C9.55229 20 10 19.5523 10 19V5C10 4.44772 9.55229 4 9 4H6Z" />
+                </ToggleSwitch.Content>
+            </ToggleSwitch>
+            <ToggleSwitch
+                HorizontalAlignment="Left"
+                Padding="8"
+                Theme="{DynamicResource ButtonToggleSwitch}"
+                Foreground="{DynamicResource ButtonDefaultTertiaryForeground}">
+                <ToggleSwitch.OnContent>
+                    <PathIcon
+                        Theme="{DynamicResource InnerPathIcon}"
+                        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" />
+                </ToggleSwitch.OnContent>
+                <ToggleSwitch.OffContent>
+                    <PathIcon
+                        Theme="{DynamicResource InnerPathIcon}"
+                        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" />
+                </ToggleSwitch.OffContent>
+            </ToggleSwitch>
+        </StackPanel>
+
     </StackPanel>
 </UserControl>
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Themes/ToggleSwitch.axaml b/demo/Semi.Avalonia.Demo/Themes/ToggleSwitch.axaml
index 98e1ce6..f3b0485 100644
--- a/demo/Semi.Avalonia.Demo/Themes/ToggleSwitch.axaml
+++ b/demo/Semi.Avalonia.Demo/Themes/ToggleSwitch.axaml
@@ -1,15 +1,8 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <ControlTheme x:Key="ThemeToggleSwitch" TargetType="ToggleSwitch">
-        <Setter Property="HorizontalAlignment" Value="Center" />
-        <Setter Property="VerticalAlignment" Value="Center" />
-        <Setter Property="HorizontalContentAlignment" Value="Center" />
-        <Setter Property="VerticalContentAlignment" Value="Center" />
+    <ControlTheme x:Key="ThemeToggleSwitch"
+                  BasedOn="{StaticResource ButtonToggleSwitch}"
+                  TargetType="ToggleSwitch">
         <Setter Property="Padding" Value="8" />
-        <Setter Property="Background" Value="Transparent" />
-        <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultBorderBrush}" />
-        <Setter Property="BorderThickness" Value="{DynamicResource ButtonBorderThickness}" />
-        <Setter Property="CornerRadius" Value="{DynamicResource ButtonCornerRadius}" />
-        <Setter Property="Cursor" Value="Hand" />
         <Setter Property="OnContentTemplate">
             <DataTemplate>
                 <PathIcon Theme="{StaticResource InnerPathIcon}" Data="{Binding}" />
@@ -20,48 +13,17 @@
                 <PathIcon Theme="{StaticResource InnerPathIcon}" Data="{Binding}" />
             </DataTemplate>
         </Setter>
-        <Setter Property="Template">
-            <ControlTemplate TargetType="ToggleSwitch">
-                <Border
-                    Name="Background"
-                    Padding="{TemplateBinding Padding}"
-                    Background="{TemplateBinding Background}"
-                    BorderBrush="{TemplateBinding BorderBrush}"
-                    BorderThickness="{TemplateBinding BorderThickness}"
-                    CornerRadius="{TemplateBinding CornerRadius}">
-                    <Panel>
-                        <Panel Name="PART_SwitchKnob" />
-                        <Panel Name="PART_MovingKnobs" />
-                        <ContentPresenter
-                            Name="PART_OnContentPresenter"
-                            IsVisible="{TemplateBinding IsChecked}"
-                            Content="{TemplateBinding OnContent}"
-                            ContentTemplate="{TemplateBinding OnContentTemplate}" />
-                        <ContentPresenter
-                            Name="PART_OffContentPresenter"
-                            IsVisible="{TemplateBinding IsChecked, Converter={x:Static BoolConverters.Not}}"
-                            Content="{TemplateBinding OffContent}"
-                            ContentTemplate="{TemplateBinding OffContentTemplate}" />
-                    </Panel>
-                </Border>
-            </ControlTemplate>
+        <Setter Property="ContentTemplate">
+            <DataTemplate>
+                <PathIcon Theme="{StaticResource InnerPathIcon}" Data="{Binding}" />
+            </DataTemplate>
         </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="SplitViewToggleSwitch"
                   BasedOn="{StaticResource ThemeToggleSwitch}"
                   TargetType="ToggleSwitch">
-        <Setter Property="Width" Value="32" />
-        <Setter Property="Height" Value="32" />
-        <Setter Property="OnContent"
+        <Setter Property="Content"
                 Value="M5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5C2 3.34315 3.34315 2 5 2ZM6 4C5.44772 4 5 4.44772 5 5V19C5 19.5523 5.44772 20 6 20H9C9.55229 20 10 19.5523 10 19V5C10 4.44772 9.55229 4 9 4H6Z" />
-        <Setter Property="OffContent" Value="{Binding $self.OnContent}" />
     </ControlTheme>
 </ResourceDictionary>
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Views/MainView.axaml b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
index de2b2f5..961a24d 100644
--- a/demo/Semi.Avalonia.Demo/Views/MainView.axaml
+++ b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
@@ -52,14 +52,11 @@
                     <StackPanel.Styles>
                         <Style Selector="Button">
                             <Setter Property="Theme" Value="{DynamicResource BorderlessButton}" />
-                            <Setter Property="Width" Value="32" />
-                            <Setter Property="Height" Value="32" />
+                            <Setter Property="Padding" Value="8" />
                             <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultTertiaryForeground}" />
                         </Style>
                         <Style Selector="ToggleSwitch">
                             <Setter Property="Theme" Value="{DynamicResource ThemeToggleSwitch}" />
-                            <Setter Property="Width" Value="32" />
-                            <Setter Property="Height" Value="32" />
                             <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultTertiaryForeground}" />
                         </Style>
                         <Style Selector="PathIcon">
diff --git a/src/Semi.Avalonia/Controls/ToggleSwitch.axaml b/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
index 3b31abe..e2e4478 100644
--- a/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
+++ b/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
@@ -263,6 +263,7 @@
         TargetType="ToggleSwitch">
         <Setter Property="OnContent" Value="{x:Null}" />
         <Setter Property="OffContent" Value="{x:Null}" />
+        <Setter Property="Content" Value="{x:Null}" />
         <Setter Property="FontSize" Value="{DynamicResource SimpleToggleSwitchFontSize}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="ToggleSwitch">
@@ -370,48 +371,104 @@
         </Style>
     </ControlTheme>
 
-    <ControlTheme
-        x:Key="ButtonToggleSwitch"
-        BasedOn="{StaticResource {x:Type ToggleSwitch}}"
-        TargetType="ToggleSwitch">
-        <Setter Property="Padding" Value="8" />
-        <Setter Property="CornerRadius" Value="3" />
+    <ControlTheme x:Key="ButtonToggleSwitch" TargetType="ToggleSwitch">
+        <Setter Property="HorizontalAlignment" Value="Center" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="HorizontalContentAlignment" Value="Center" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="Padding" Value="{DynamicResource ButtonDefaultPadding}" />
         <Setter Property="Background" Value="Transparent" />
-        <Setter Property="FocusAdorner">
-            <FocusAdornerTemplate>
-                <Border Theme="{StaticResource AdornerLayerBorder}" />
-            </FocusAdornerTemplate>
-        </Setter>
+        <Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultBorderBrush}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource ButtonBorderThickness}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource ButtonCornerRadius}" />
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="OnContent" Value="{x:Null}" />
+        <Setter Property="OffContent" Value="{x:Null}" />
+        <Setter Property="Content" Value="{x:Null}" />
+        <Setter Property="MinHeight" Value="{DynamicResource ButtonDefaultHeight}" />
+        <Setter Property="FontSize" Value="{DynamicResource ButtonDefaultFontSize}" />
+        <Setter Property="FontWeight" Value="{DynamicResource ButtonDefaultFontWeight}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="ToggleSwitch">
                 <Border
                     Name="Background"
                     Padding="{TemplateBinding Padding}"
                     Background="{TemplateBinding Background}"
-                    CornerRadius="{TemplateBinding CornerRadius}"
-                    Cursor="Hand">
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
                     <Panel>
                         <Panel Name="PART_SwitchKnob" />
                         <Panel Name="PART_MovingKnobs" />
                         <ContentPresenter
                             Name="PART_OnContentPresenter"
-                            Margin="{DynamicResource ToggleSwitchOnContentMargin}"
+                            IsVisible="{TemplateBinding IsChecked}"
                             Content="{TemplateBinding OnContent}"
                             ContentTemplate="{TemplateBinding OnContentTemplate}" />
                         <ContentPresenter
                             Name="PART_OffContentPresenter"
-                            Margin="{DynamicResource ToggleSwitchOnContentMargin}"
+                            IsVisible="{TemplateBinding IsChecked, Converter={x:Static BoolConverters.Not}}"
                             Content="{TemplateBinding OffContent}"
                             ContentTemplate="{TemplateBinding OffContentTemplate}" />
+                        <ContentPresenter
+                            Name="PART_ContentPresenter"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}">
+                            <ContentPresenter.IsVisible>
+                                <MultiBinding Converter="{x:Static BoolConverters.And}">
+                                    <TemplateBinding Property="Content" Converter="{x:Static ObjectConverters.IsNotNull}" />
+                                    <TemplateBinding Property="OnContent" Converter="{x:Static ObjectConverters.IsNull}" />
+                                    <TemplateBinding Property="OffContent" Converter="{x:Static ObjectConverters.IsNull}" />
+                                </MultiBinding>
+                            </ContentPresenter.IsVisible>
+                        </ContentPresenter>
                     </Panel>
                 </Border>
             </ControlTemplate>
         </Setter>
-        <Style Selector="^:pointerover">
+
+        <Style Selector="^:pressed">
+            <Setter Property="RenderTransform" Value="scale(0.98)" />
+        </Style>
+
+        <Style Selector="^ /template/ Border#Background">
+            <Setter Property="BorderBrush" Value="{TemplateBinding BorderBrush}" />
+            <Setter Property="Background" Value="{TemplateBinding Background}" />
+        </Style>
+
+        <Style Selector="^:pointerover /template/ Border#Background">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultPointeroverBorderBrush}" />
             <Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
         </Style>
-        <Style Selector="^:pressed">
+
+        <Style Selector="^:pressed /template/ Border#Background">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultPressedBorderBrush}" />
             <Setter Property="Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
         </Style>
+
+        <Style Selector="^:disabled /template/ Border#Background">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" />
+            <!-- <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" /> -->
+        </Style>
+
+        <Style Selector="^.Large">
+            <Setter Property="MinHeight" Value="{DynamicResource ButtonLargeHeight}" />
+            <Setter Property="Padding" Value="{DynamicResource ButtonLargePadding}" />
+        </Style>
+        <Style Selector="^.Small">
+            <Setter Property="MinHeight" Value="{DynamicResource ButtonSmallHeight}" />
+            <Setter Property="Padding" Value="{DynamicResource ButtonSmallPadding}" />
+        </Style>
+
+        <Style Selector="^ /template/ Border#Background">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderlessBorderBrush}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonBorderlessBackground}" />
+        </Style>
+        <Style Selector="^:disabled /template/ Border#Background">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderlessBorderBrush}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonBorderlessBackground}" />
+            <!-- <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" /> -->
+        </Style>
     </ControlTheme>
 </ResourceDictionary>
\ No newline at end of file