Merge pull request #481 from irihitech/switch

Enhance ToggleSwitch
2024-12-02 12:02:32 +08:00 · 2024-12-02 12:02:32 +08:00 · a8cdf5688b
commit a8cdf5688b
parent 266fdade35 3c8854f9de
5 changed files with 217 additions and 158 deletions
--- 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>
--- 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>
--- 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">
--- a/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
+++ b/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
@ -3,22 +3,45 @@
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:CompileBindings="True">
    <Design.PreviewWith>
-        <StackPanel Margin="20">
-            <ToggleSwitch
-                Content="Content"
-                OffContent="OffContent"
-                OnContent="OnContent" />
-        </StackPanel>
+        <ThemeVariantScope RequestedThemeVariant="Dark">
+            <StackPanel Spacing="8" Background="{DynamicResource SemiBackground0Color}">
+                <StackPanel Orientation="Horizontal">
+                    <ToggleSwitch Classes="Small" />
+                    <ToggleSwitch Classes="Small" IsChecked="True" />
+                </StackPanel>
+                <StackPanel Orientation="Horizontal">
+                    <ToggleSwitch />
+                    <ToggleSwitch IsChecked="True" />
+                </StackPanel>
+                <StackPanel Orientation="Horizontal">
+                    <ToggleSwitch Classes="Large" />
+                    <ToggleSwitch Classes="Large" IsChecked="True" />
+                </StackPanel>
+                <StackPanel Orientation="Horizontal">
+                    <ToggleSwitch Theme="{DynamicResource SimpleToggleSwitch}" OnContent="是" OffContent="否" Classes="Small" />
+                    <ToggleSwitch Theme="{DynamicResource SimpleToggleSwitch}" OnContent="是" OffContent="否" Classes="Small" IsChecked="True" />
+                </StackPanel>
+                <StackPanel Orientation="Horizontal">
+                    <ToggleSwitch Theme="{DynamicResource SimpleToggleSwitch}" OnContent="是" OffContent="否" />
+                    <ToggleSwitch Theme="{DynamicResource SimpleToggleSwitch}" OnContent="是" OffContent="否" IsChecked="True" />
+                </StackPanel>
+                <StackPanel Orientation="Horizontal">
+                    <ToggleSwitch Theme="{DynamicResource SimpleToggleSwitch}" OnContent="是" OffContent="否" Classes="Large" />
+                    <ToggleSwitch Theme="{DynamicResource SimpleToggleSwitch}" OnContent="是" OffContent="否" Classes="Large" IsChecked="True" />
+                </StackPanel>
+            </StackPanel>
+        </ThemeVariantScope>
    </Design.PreviewWith>
    <ControlTheme x:Key="{x:Type ToggleSwitch}" TargetType="ToggleSwitch">
        <Setter Property="HorizontalAlignment" Value="Left" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="HorizontalContentAlignment" Value="Left" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="Cursor" Value="Hand" />
        <Setter Property="FocusAdorner">
            <FocusAdornerTemplate>
                <Border Theme="{DynamicResource AdornerLayerBorder}"
-                        CornerRadius="{DynamicResource ToggleSwitchIndicatorCornerRadius}"/>
+                        CornerRadius="{DynamicResource ToggleSwitchIndicatorCornerRadius}" />
            </FocusAdornerTemplate>
        </Setter>
        <Setter Property="KnobTransitions">
@ -32,9 +55,7 @@
        <Setter Property="Template">
            <ControlTemplate TargetType="ToggleSwitch">
                <Grid
-                    Background="{TemplateBinding Background}"
-                    Cursor="Hand"
-                    RowDefinitions="Auto,*"
+                    RowDefinitions="Auto, *"
                    ColumnDefinitions="Auto, *">
                    <ContentPresenter
                        Name="PART_ContentPresenter"
@ -53,9 +74,10 @@
                        TemplatedControl.IsTemplateFocusTarget="True"
                        Width="{DynamicResource ToggleSwitchDefaultWidth}"
                        Height="{DynamicResource ToggleSwitchDefaultHeight}"
+                        BackgroundSizing="OuterBorderEdge"
                        BorderBrush="{DynamicResource ToggleSwitchDefaultBorderBrush}"
-                        BorderThickness="1"
-                        CornerRadius="{DynamicResource ToggleSwitchIndicatorCornerRadius}">
+                        BorderThickness="{DynamicResource ToggleSwitchDefaultBorderThickness}"
+                        CornerRadius="{DynamicResource ToggleSwitchDefaultCornerRadius}">
                        <Border.Transitions>
                            <Transitions>
                                <BrushTransition Property="Background" Duration="0:0:0.2" />
@ -66,7 +88,7 @@
                            Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
                            Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
                            HorizontalAlignment="Left">
-                            <Grid
+                            <Panel
                                Name="PART_MovingKnobs"
                                Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
                                Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
@ -79,7 +101,7 @@
                                <Arc
                                    Name="SwitchKnobLoadingIndicator"
                                    IsVisible="False"
-                                    StrokeThickness="2"
+                                    StrokeThickness="{DynamicResource ToggleSwitchLoadingIndicatorDefaultStrokeThickness}"
                                    StartAngle="0"
                                    SweepAngle="140"
                                    StrokeJoin="Round"
@ -107,7 +129,7 @@
                                        </Style>
                                    </Arc.Styles>
                                </Arc>
-                            </Grid>
+                            </Panel>
                        </Canvas>
                    </Border>

@ -156,7 +178,6 @@
            <Style Selector="^:disabled /template/ Border#SwitchBackgroundBorder">
                <Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerUnCheckedDisabledBackground}" />
                <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchContainerUnCheckedDisabledBorderBrush}" />
-                <Setter Property="BorderThickness" Value="1" />
            </Style>
        </Style>

@ -200,15 +221,16 @@
            <Style Selector="^ /template/ Border#SwitchBackgroundBorder">
                <Setter Property="Width" Value="{DynamicResource ToggleSwitchSmallWidth}" />
                <Setter Property="Height" Value="{DynamicResource ToggleSwitchSmallHeight}" />
+                <Setter Property="CornerRadius" Value="{DynamicResource ToggleSwitchSmallCornerRadius}" />
            </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">
+            <Style Selector="^ /template/ Panel#PART_MovingKnobs">
                <Setter Property="Width" Value="{DynamicResource ToggleSwitchIndicatorSmallWidth}" />
                <Setter Property="Height" Value="{DynamicResource ToggleSwitchIndicatorSmallWidth}" />
-                <Setter Property="Margin" Value="{DynamicResource ToggleSwitchIndicatorSmallMargin}"/>
+                <Setter Property="Margin" Value="{DynamicResource ToggleSwitchIndicatorSmallMargin}" />
            </Style>
            <Style Selector="^ /template/ Arc#SwitchKnobLoadingIndicator">
                <Setter Property="StrokeThickness" Value="{DynamicResource ToggleSwitchLoadingIndicatorSmallStrokeThickness}" />
@ -218,15 +240,16 @@
            <Style Selector="^ /template/ Border#SwitchBackgroundBorder">
                <Setter Property="Width" Value="{DynamicResource ToggleSwitchLargeWidth}" />
                <Setter Property="Height" Value="{DynamicResource ToggleSwitchLargeHeight}" />
+                <Setter Property="CornerRadius" Value="{DynamicResource ToggleSwitchLargeCornerRadius}" />
            </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">
+            <Style Selector="^ /template/ Panel#PART_MovingKnobs">
                <Setter Property="Width" Value="{DynamicResource ToggleSwitchIndicatorLargeWidth}" />
                <Setter Property="Height" Value="{DynamicResource ToggleSwitchIndicatorLargeWidth}" />
-                <Setter Property="Margin" Value="{DynamicResource ToggleSwitchIndicatorLargeMargin}"/>
+                <Setter Property="Margin" Value="{DynamicResource ToggleSwitchIndicatorLargeMargin}" />
            </Style>
            <Style Selector="^ /template/ Arc#SwitchKnobLoadingIndicator">
                <Setter Property="StrokeThickness" Value="{DynamicResource ToggleSwitchLoadingIndicatorLargeStrokeThickness}" />
@ -234,69 +257,25 @@
        </Style>
    </ControlTheme>

-    <ControlTheme
-        x:Key="ButtonToggleSwitch"
-        BasedOn="{StaticResource {x:Type ToggleSwitch}}"
-        TargetType="ToggleSwitch">
-        <Setter Property="Padding" Value="8" />
-        <Setter Property="CornerRadius" Value="3" />
-        <Setter Property="Background" Value="Transparent" />
-        <Setter Property="FocusAdorner">
-            <FocusAdornerTemplate>
-                <Border Theme="{StaticResource AdornerLayerBorder}" />
-            </FocusAdornerTemplate>
-        </Setter>
-        <Setter Property="Template">
-            <ControlTemplate TargetType="ToggleSwitch">
-                <Border
-                    Name="Background"
-                    Padding="{TemplateBinding Padding}"
-                    Background="{TemplateBinding Background}"
-                    CornerRadius="{TemplateBinding CornerRadius}"
-                    Cursor="Hand">
-                    <Panel>
-                        <Panel Name="PART_SwitchKnob" />
-                        <Panel Name="PART_MovingKnobs" />
-                        <ContentPresenter
-                            Name="PART_OnContentPresenter"
-                            Margin="{DynamicResource ToggleSwitchOnContentMargin}"
-                            Content="{TemplateBinding OnContent}"
-                            ContentTemplate="{TemplateBinding OnContentTemplate}" />
-                        <ContentPresenter
-                            Name="PART_OffContentPresenter"
-                            Margin="{DynamicResource ToggleSwitchOnContentMargin}"
-                            Content="{TemplateBinding OffContent}"
-                            ContentTemplate="{TemplateBinding OffContentTemplate}" />
-                    </Panel>
-                </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">
        <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">
                <Border
                    Name="SwitchBackgroundBorder"
                    Background="{TemplateBinding Background}"
-                    Cursor="Hand"
                    Width="{DynamicResource ToggleSwitchDefaultWidth}"
                    Height="{DynamicResource ToggleSwitchDefaultHeight}"
+                    BackgroundSizing="OuterBorderEdge"
                    BorderBrush="{DynamicResource ToggleSwitchDefaultBorderBrush}"
-                    BorderThickness="1"
-                    CornerRadius="{DynamicResource ToggleSwitchIndicatorCornerRadius}">
+                    BorderThickness="{DynamicResource ToggleSwitchDefaultBorderThickness}"
+                    CornerRadius="{DynamicResource ToggleSwitchDefaultCornerRadius}">
                    <Border.Transitions>
                        <Transitions>
                            <BrushTransition Property="Background" Duration="0:0:0.2" />
@ -311,7 +290,7 @@
                            Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
                            Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
                            HorizontalAlignment="Left">
-                            <Grid
+                            <Panel
                                Name="PART_MovingKnobs"
                                Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
                                Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
@ -324,7 +303,7 @@
                                <Arc
                                    Name="SwitchKnobLoadingIndicator"
                                    IsVisible="False"
-                                    StrokeThickness="2"
+                                    StrokeThickness="{DynamicResource ToggleSwitchLoadingIndicatorDefaultStrokeThickness}"
                                    StartAngle="0"
                                    SweepAngle="140"
                                    StrokeJoin="Round"
@ -352,7 +331,7 @@
                                        </Style>
                                    </Arc.Styles>
                                </Arc>
-                            </Grid>
+                            </Panel>
                        </Canvas>
                        <ContentPresenter
                            Name="PART_OnContentPresenter"
@ -391,4 +370,105 @@
            </Style>
        </Style>
    </ControlTheme>
+
+    <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="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}"
+                    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}" />
+                        <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="^: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 /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>
--- a/src/Semi.Avalonia/Themes/Shared/ToggleSwitch.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/ToggleSwitch.axaml
@ -5,13 +5,18 @@
    <x:Double x:Key="ToggleSwitchDefaultWidth">40</x:Double>
    <x:Double x:Key="ToggleSwitchSmallWidth">26</x:Double>
    <x:Double x:Key="ToggleSwitchLargeWidth">54</x:Double>
+    <Thickness x:Key="ToggleSwitchDefaultBorderThickness">1</Thickness>
+    <CornerRadius x:Key="ToggleSwitchDefaultCornerRadius">12</CornerRadius>
+    <CornerRadius x:Key="ToggleSwitchSmallCornerRadius">8</CornerRadius>
+    <CornerRadius x:Key="ToggleSwitchLargeCornerRadius">16</CornerRadius>
    <CornerRadius x:Key="ToggleSwitchIndicatorCornerRadius">100</CornerRadius>
    <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>
+    <Thickness x:Key="ToggleSwitchIndicatorDefaultMargin">1 0 0 0</Thickness>
+    <Thickness x:Key="ToggleSwitchIndicatorSmallMargin">0</Thickness>
+    <Thickness x:Key="ToggleSwitchIndicatorLargeMargin">2 0 0 0</Thickness>
+    <x:Double x:Key="ToggleSwitchLoadingIndicatorDefaultStrokeThickness">2</x:Double>
    <x:Double x:Key="ToggleSwitchLoadingIndicatorSmallStrokeThickness">1</x:Double>
    <x:Double x:Key="ToggleSwitchLoadingIndicatorLargeStrokeThickness">3</x:Double>