From 3849d7efebe1089b6978710c3d4f28e5cdc55e5c Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Wed, 7 Aug 2024 12:07:56 +0800
Subject: [PATCH] feat: update ToggleSwitch AdornerLayer.

---
 src/Semi.Avalonia/Controls/ToggleSwitch.axaml | 193 +++++++++---------
 1 file changed, 99 insertions(+), 94 deletions(-)

diff --git a/src/Semi.Avalonia/Controls/ToggleSwitch.axaml b/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
index 0ea882c..f495b36 100644
--- a/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
+++ b/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
@@ -15,6 +15,13 @@
         <Setter Property="VerticalAlignment" Value="Center" />
         <Setter Property="HorizontalContentAlignment" Value="Left" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="FocusAdorner">
+            <FocusAdornerTemplate>
+                <Border BorderThickness="{DynamicResource AdornerLayerBorderThickness}"
+                        BorderBrush="{DynamicResource AdornerLayerStroke}" 
+                        CornerRadius="100"/>
+            </FocusAdornerTemplate>
+        </Setter>
         <Setter Property="KnobTransitions">
             <Transitions>
                 <DoubleTransition
@@ -28,107 +35,99 @@
                 <Grid
                     Background="{TemplateBinding Background}"
                     Cursor="Hand"
-                    RowDefinitions="Auto,*">
+                    RowDefinitions="Auto,*"
+                    ColumnDefinitions="Auto, *">
                     <ContentPresenter
                         x:Name="PART_ContentPresenter"
-                        Grid.Row="0"
+                        Grid.Row="0" Grid.Column="0"
+                        Grid.ColumnSpan="2"
                         Margin="{DynamicResource ToggleSwitchHeaderMargin}"
                         VerticalAlignment="Top"
                         Content="{TemplateBinding Content}"
                         ContentTemplate="{TemplateBinding ContentTemplate}"
                         IsVisible="{TemplateBinding Content, Converter={x:Static ObjectConverters.IsNotNull}}"
                         RecognizesAccessKey="True" />
-                    <Grid
-                        Grid.Row="1"
-                        Background="Transparent"
-                        ColumnDefinitions="Auto, *">
-                        <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>
-                            <Canvas
-                                x:Name="PART_SwitchKnob"
+
+                    <Border
+                        x:Name="SwitchBackgroundBorder"
+                        Grid.Row="1" Grid.Column="0"
+                        TemplatedControl.IsTemplateFocusTarget="True"
+                        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}"
-                                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" />
-                                    <Arc
-                                        x:Name="SwitchKnobLoadingIndicator"
-                                        IsVisible="False"
-                                        StrokeThickness="2"
-                                        StartAngle="0"
-                                        SweepAngle="140"
-                                        StrokeJoin="Round"
-                                        StrokeLineCap="Round">
-                                        <Arc.Stroke>
-                                            <ConicGradientBrush>
-                                                <GradientStops>
-                                                    <GradientStop Offset="0.1" Color="Transparent"/>
-                                                    <GradientStop Offset="0.7" Color="White"/>
-                                                </GradientStops>
-                                            </ConicGradientBrush>
-                                        </Arc.Stroke>
-                                        <Arc.Styles>
-                                            <Style Selector="Arc[IsVisible=True]">
-                                                <Style.Animations>
-                                                    <Animation IterationCount="Infinite" Duration="0:0:0.6">
-                                                        <KeyFrame Cue="0%">
-                                                            <Setter Property="RotateTransform.Angle" Value="0.0" />
-                                                        </KeyFrame>
-                                                        <KeyFrame Cue="100%">
-                                                            <Setter Property="RotateTransform.Angle" Value="360.0" />
-                                                        </KeyFrame>
-                                                    </Animation>
-                                                </Style.Animations>
-                                            </Style>
-                                        </Arc.Styles>
-                                    </Arc>
-                                </Grid>
-                            </Canvas>
-                        </Border>
+                                Margin="{DynamicResource ToggleSwitchIndicatorDefaultMargin}">
+                                <Border
+                                    x:Name="SwitchKnobIndicator"
+                                    Background="White"
+                                    BoxShadow="0 0 1 1 #222E3238"
+                                    CornerRadius="100" />
+                                <Arc
+                                    x:Name="SwitchKnobLoadingIndicator"
+                                    IsVisible="False"
+                                    StrokeThickness="2"
+                                    StartAngle="0"
+                                    SweepAngle="140"
+                                    StrokeJoin="Round"
+                                    StrokeLineCap="Round">
+                                    <Arc.Stroke>
+                                        <ConicGradientBrush>
+                                            <GradientStops>
+                                                <GradientStop Offset="0.1" Color="Transparent" />
+                                                <GradientStop Offset="0.7" Color="White" />
+                                            </GradientStops>
+                                        </ConicGradientBrush>
+                                    </Arc.Stroke>
+                                    <Arc.Styles>
+                                        <Style Selector="Arc[IsVisible=True]">
+                                            <Style.Animations>
+                                                <Animation IterationCount="Infinite" Duration="0:0:0.6">
+                                                    <KeyFrame Cue="0%">
+                                                        <Setter Property="RotateTransform.Angle" Value="0.0" />
+                                                    </KeyFrame>
+                                                    <KeyFrame Cue="100%">
+                                                        <Setter Property="RotateTransform.Angle" Value="360.0" />
+                                                    </KeyFrame>
+                                                </Animation>
+                                            </Style.Animations>
+                                        </Style>
+                                    </Arc.Styles>
+                                </Arc>
+                            </Grid>
+                        </Canvas>
+                    </Border>
 
-                        <ContentPresenter
-                            x:Name="PART_OnContentPresenter"
-                            Grid.Column="1"
-                            Margin="{DynamicResource ToggleSwitchOnContentMargin}"
-                            HorizontalAlignment="Left"
-                            VerticalAlignment="Center"
-                            VerticalContentAlignment="Center"
-                            Content="{TemplateBinding OnContent}"
-                            ContentTemplate="{TemplateBinding OnContentTemplate}"
-                            IsVisible="True" />
-                        <ContentPresenter
-                            x:Name="PART_OffContentPresenter"
-                            Grid.Column="1"
-                            Margin="{DynamicResource ToggleSwitchOnContentMargin}"
-                            HorizontalAlignment="Left"
-                            VerticalAlignment="Center"
-                            VerticalContentAlignment="Center"
-                            Content="{TemplateBinding OffContent}"
-                            ContentTemplate="{TemplateBinding OffContentTemplate}"
-                            IsVisible="False" />
-
-                    </Grid>
+                    <ContentPresenter
+                        x:Name="PART_OnContentPresenter"
+                        Grid.Row="1" Grid.Column="1"
+                        Margin="{DynamicResource ToggleSwitchOnContentMargin}"
+                        HorizontalAlignment="Left"
+                        VerticalAlignment="Center"
+                        VerticalContentAlignment="Center"
+                        Content="{TemplateBinding OnContent}"
+                        ContentTemplate="{TemplateBinding OnContentTemplate}" />
+                    <ContentPresenter
+                        x:Name="PART_OffContentPresenter"
+                        Grid.Row="1" Grid.Column="1"
+                        Margin="{DynamicResource ToggleSwitchOnContentMargin}"
+                        HorizontalAlignment="Left"
+                        VerticalAlignment="Center"
+                        VerticalContentAlignment="Center"
+                        Content="{TemplateBinding OffContent}"
+                        ContentTemplate="{TemplateBinding OffContentTemplate}" />
                 </Grid>
             </ControlTemplate>
         </Setter>
@@ -241,6 +240,12 @@
         <Setter Property="Padding" Value="8" />
         <Setter Property="CornerRadius" Value="3" />
         <Setter Property="Background" Value="Transparent" />
+        <Setter Property="FocusAdorner">
+            <FocusAdornerTemplate>
+                <Border BorderThickness="{DynamicResource AdornerLayerBorderThickness}"
+                        BorderBrush="{DynamicResource AdornerLayerStroke}" />
+            </FocusAdornerTemplate>
+        </Setter>
         <Setter Property="Template">
             <ControlTemplate TargetType="ToggleSwitch">
                 <Border
@@ -249,9 +254,9 @@
                     Background="{TemplateBinding Background}"
                     CornerRadius="{TemplateBinding CornerRadius}"
                     Cursor="Hand">
-                    <Grid ColumnDefinitions="Auto">
-                        <Grid x:Name="PART_SwitchKnob" />
-                        <Grid x:Name="PART_MovingKnobs" />
+                    <Panel>
+                        <Panel x:Name="PART_SwitchKnob" />
+                        <Panel x:Name="PART_MovingKnobs" />
                         <ContentPresenter
                             x:Name="PART_OnContentPresenter"
                             Margin="{DynamicResource ToggleSwitchOnContentMargin}"
@@ -262,7 +267,7 @@
                             Margin="{DynamicResource ToggleSwitchOnContentMargin}"
                             Content="{TemplateBinding OffContent}"
                             ContentTemplate="{TemplateBinding OffContentTemplate}" />
-                    </Grid>
+                    </Panel>
                 </Border>
             </ControlTemplate>
         </Setter>