From ab3d88a6d13cec611c53650ae7ee91cd68611dd1 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Fri, 8 Nov 2024 05:12:52 +0800
Subject: [PATCH] feat: design an AdornerLayer for Solid Button.

(cherry picked from commit 1250d45ad8b9b550047c70d9f6291be95769ae75)
---
 src/Semi.Avalonia/Controls/AdornerLayer.axaml | 12 +++-
 src/Semi.Avalonia/Controls/Button.axaml       |  6 ++
 .../Controls/DropDownButton.axaml             |  6 ++
 src/Semi.Avalonia/Controls/RepeatButton.axaml |  6 ++
 src/Semi.Avalonia/Controls/SplitButton.axaml  | 62 +++++++++++--------
 src/Semi.Avalonia/Controls/ToggleButton.axaml |  6 ++
 src/Semi.Avalonia/Controls/ToggleSwitch.axaml | 20 +++---
 .../Themes/Dark/AdornerLayer.axaml            |  3 +-
 .../Themes/Dark/ToggleButton.axaml            | 14 ++---
 .../Themes/Light/AdornerLayer.axaml           |  3 +-
 .../Themes/Light/ToggleButton.axaml           |  2 +-
 .../Themes/Shared/AdornerLayer.axaml          |  1 +
 .../Themes/Shared/ToggleSwitch.axaml          |  1 +
 13 files changed, 94 insertions(+), 48 deletions(-)

diff --git a/src/Semi.Avalonia/Controls/AdornerLayer.axaml b/src/Semi.Avalonia/Controls/AdornerLayer.axaml
index 03a7694..9162d85 100644
--- a/src/Semi.Avalonia/Controls/AdornerLayer.axaml
+++ b/src/Semi.Avalonia/Controls/AdornerLayer.axaml
@@ -5,9 +5,17 @@
     <ControlTheme x:Key="{x:Type AdornerLayer}" TargetType="AdornerLayer">
         <Setter Property="DefaultFocusAdorner">
             <FocusAdornerTemplate>
-                <Border BorderThickness="{DynamicResource AdornerLayerBorderThickness}"
-                        BorderBrush="{DynamicResource AdornerLayerStroke}" />
+                <Border Theme="{DynamicResource AdornerLayerBorder}" />
             </FocusAdornerTemplate>
         </Setter>
     </ControlTheme>
+
+    <ControlTheme x:Key="AdornerLayerBorder" TargetType="Border">
+        <Setter Property="BorderThickness" Value="{DynamicResource AdornerLayerBorderThickness}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource AdornerLayerBorderBrush}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource AdornerLayerCornerRadius}" />
+        <Style Selector="^.Solid">
+            <Setter Property="BorderBrush" Value="{DynamicResource AdornerLayerSolidBorderBrush}" />
+        </Style>
+    </ControlTheme>
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Controls/Button.axaml b/src/Semi.Avalonia/Controls/Button.axaml
index e32ea29..190bf22 100644
--- a/src/Semi.Avalonia/Controls/Button.axaml
+++ b/src/Semi.Avalonia/Controls/Button.axaml
@@ -102,6 +102,12 @@
         x:Key="SolidButton"
         BasedOn="{StaticResource {x:Type Button}}"
         TargetType="Button">
+        <Setter Property="FocusAdorner">
+            <FocusAdornerTemplate>
+                <Border Theme="{DynamicResource AdornerLayerBorder}"
+                        Classes="Solid" />
+            </FocusAdornerTemplate>
+        </Setter>
         <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
             <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
             <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
diff --git a/src/Semi.Avalonia/Controls/DropDownButton.axaml b/src/Semi.Avalonia/Controls/DropDownButton.axaml
index 9268d01..a423121 100644
--- a/src/Semi.Avalonia/Controls/DropDownButton.axaml
+++ b/src/Semi.Avalonia/Controls/DropDownButton.axaml
@@ -126,6 +126,12 @@
         x:Key="SolidDropDownButton"
         BasedOn="{StaticResource {x:Type DropDownButton}}"
         TargetType="DropDownButton">
+        <Setter Property="FocusAdorner">
+            <FocusAdornerTemplate>
+                <Border Theme="{DynamicResource AdornerLayerBorder}"
+                        Classes="Solid" />
+            </FocusAdornerTemplate>
+        </Setter>
         <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
         <Style Selector="^ /template/ Border#RootBorder">
             <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
diff --git a/src/Semi.Avalonia/Controls/RepeatButton.axaml b/src/Semi.Avalonia/Controls/RepeatButton.axaml
index e51a0ef..65ee991 100644
--- a/src/Semi.Avalonia/Controls/RepeatButton.axaml
+++ b/src/Semi.Avalonia/Controls/RepeatButton.axaml
@@ -97,6 +97,12 @@
         x:Key="SolidRepeatButton"
         BasedOn="{StaticResource {x:Type RepeatButton}}"
         TargetType="RepeatButton">
+        <Setter Property="FocusAdorner">
+            <FocusAdornerTemplate>
+                <Border Theme="{DynamicResource AdornerLayerBorder}"
+                        Classes="Solid" />
+            </FocusAdornerTemplate>
+        </Setter>
         <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
             <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
             <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
diff --git a/src/Semi.Avalonia/Controls/SplitButton.axaml b/src/Semi.Avalonia/Controls/SplitButton.axaml
index c412797..1207772 100644
--- a/src/Semi.Avalonia/Controls/SplitButton.axaml
+++ b/src/Semi.Avalonia/Controls/SplitButton.axaml
@@ -68,31 +68,6 @@
                     ClipToBounds="True"
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <DockPanel>
-                        <Button
-                            Name="PART_SecondaryButton"
-                            Padding="4,0"
-                            VerticalAlignment="Stretch"
-                            HorizontalContentAlignment="Center"
-                            VerticalContentAlignment="Center"
-                            BorderThickness="{TemplateBinding BorderThickness}"
-                            CornerRadius="0"
-                            DockPanel.Dock="Right"
-                            Focusable="False"
-                            KeyboardNavigation.IsTabStop="False"
-                            Theme="{DynamicResource SemiSplitButtonElement}">
-                            <PathIcon
-                                Width="12"
-                                Height="12"
-                                Data="{DynamicResource SplitButtonIconGlyph}"
-                                Foreground="{Binding $parent[Button].Foreground}" />
-                        </Button>
-                        <Rectangle
-                            Name="SeparatorBorder"
-                            Width="{DynamicResource SplitButtonSeparatorWidth}"
-                            VerticalAlignment="Stretch"
-                            DockPanel.Dock="Right"
-                            Fill="{TemplateBinding BorderBrush}"
-                            StrokeThickness="0" />
                         <Button
                             Name="PART_PrimaryButton"
                             Padding="{TemplateBinding Padding}"
@@ -106,12 +81,33 @@
                             Content="{TemplateBinding Content}"
                             ContentTemplate="{TemplateBinding ContentTemplate}"
                             CornerRadius="0"
-                            Focusable="False"
                             FontFamily="{TemplateBinding FontFamily}"
                             FontSize="{TemplateBinding FontSize}"
                             FontWeight="{TemplateBinding FontWeight}"
-                            KeyboardNavigation.IsTabStop="False"
+                            DockPanel.Dock="Left"
                             Theme="{DynamicResource SemiSplitButtonElement}" />
+                        <Rectangle
+                            Name="SeparatorBorder"
+                            Width="{DynamicResource SplitButtonSeparatorWidth}"
+                            VerticalAlignment="Stretch"
+                            DockPanel.Dock="Left"
+                            Fill="{TemplateBinding BorderBrush}"
+                            StrokeThickness="0" />
+                        <Button
+                            Name="PART_SecondaryButton"
+                            Padding="4,0"
+                            VerticalAlignment="Stretch"
+                            HorizontalContentAlignment="Center"
+                            VerticalContentAlignment="Center"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="0"
+                            Theme="{DynamicResource SemiSplitButtonElement}">
+                            <PathIcon
+                                Width="12"
+                                Height="12"
+                                Data="{DynamicResource SplitButtonIconGlyph}"
+                                Foreground="{Binding $parent[Button].Foreground}" />
+                        </Button>
                     </DockPanel>
                 </Border>
             </ControlTemplate>
@@ -149,6 +145,12 @@
         </Style>
         <Style Selector="^:checked">
             <Style Selector="^ /template/ Button">
+                <Setter Property="FocusAdorner">
+                    <FocusAdornerTemplate>
+                        <Border Theme="{DynamicResource AdornerLayerBorder}"
+                                Classes="Solid" />
+                    </FocusAdornerTemplate>
+                </Setter>
                 <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
                 <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
                 <Style Selector="^:pointerover">
@@ -232,6 +234,12 @@
         BasedOn="{StaticResource {x:Type SplitButton}}"
         TargetType="SplitButton">
         <Style Selector="^ /template/ Button">
+            <Setter Property="FocusAdorner">
+                <FocusAdornerTemplate>
+                    <Border Theme="{DynamicResource AdornerLayerBorder}"
+                            Classes="Solid" />
+                </FocusAdornerTemplate>
+            </Setter>
             <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
             <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
 
diff --git a/src/Semi.Avalonia/Controls/ToggleButton.axaml b/src/Semi.Avalonia/Controls/ToggleButton.axaml
index 86dcf60..4acb73d 100644
--- a/src/Semi.Avalonia/Controls/ToggleButton.axaml
+++ b/src/Semi.Avalonia/Controls/ToggleButton.axaml
@@ -96,6 +96,12 @@
         </Style>
 
         <Style Selector="^:checked">
+            <Setter Property="FocusAdorner">
+                <FocusAdornerTemplate>
+                    <Border Theme="{DynamicResource AdornerLayerBorder}"
+                            Classes="Solid" />
+                </FocusAdornerTemplate>
+            </Setter>
             <Setter Property="Foreground" Value="{DynamicResource ToggleButtonCheckedForeground}" />
             <Setter Property="Background" Value="{DynamicResource ToggleButtonPrimaryCheckedBackground}" />
             <Style Selector="^.Primary">
diff --git a/src/Semi.Avalonia/Controls/ToggleSwitch.axaml b/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
index 40fded7..65255d5 100644
--- a/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
+++ b/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
@@ -17,9 +17,8 @@
         <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="FocusAdorner">
             <FocusAdornerTemplate>
-                <Border BorderThickness="{DynamicResource AdornerLayerBorderThickness}"
-                        BorderBrush="{DynamicResource AdornerLayerStroke}" 
-                        CornerRadius="100"/>
+                <Border Theme="{DynamicResource AdornerLayerBorder}"
+                        CornerRadius="{DynamicResource ToggleSwitchIndicatorCornerRadius}"/>
             </FocusAdornerTemplate>
         </Setter>
         <Setter Property="KnobTransitions">
@@ -54,7 +53,9 @@
                         TemplatedControl.IsTemplateFocusTarget="True"
                         Width="{DynamicResource ToggleSwitchDefaultWidth}"
                         Height="{DynamicResource ToggleSwitchDefaultHeight}"
-                        CornerRadius="100">
+                        BorderBrush="{DynamicResource ToggleSwitchDefaultBorderBrush}"
+                        BorderThickness="1"
+                        CornerRadius="{DynamicResource ToggleSwitchIndicatorCornerRadius}">
                         <Border.Transitions>
                             <Transitions>
                                 <BrushTransition Property="Background" Duration="0:0:0.2" />
@@ -74,7 +75,7 @@
                                     Name="SwitchKnobIndicator"
                                     Background="White"
                                     BoxShadow="0 0 1 1 #222E3238"
-                                    CornerRadius="100" />
+                                    CornerRadius="{DynamicResource ToggleSwitchIndicatorCornerRadius}" />
                                 <Arc
                                     Name="SwitchKnobLoadingIndicator"
                                     IsVisible="False"
@@ -242,8 +243,7 @@
         <Setter Property="Background" Value="Transparent" />
         <Setter Property="FocusAdorner">
             <FocusAdornerTemplate>
-                <Border BorderThickness="{DynamicResource AdornerLayerBorderThickness}"
-                        BorderBrush="{DynamicResource AdornerLayerStroke}" />
+                <Border Theme="{StaticResource AdornerLayerBorder}" />
             </FocusAdornerTemplate>
         </Setter>
         <Setter Property="Template">
@@ -294,7 +294,9 @@
                     Cursor="Hand"
                     Width="{DynamicResource ToggleSwitchDefaultWidth}"
                     Height="{DynamicResource ToggleSwitchDefaultHeight}"
-                    CornerRadius="100">
+                    BorderBrush="{DynamicResource ToggleSwitchDefaultBorderBrush}"
+                    BorderThickness="1"
+                    CornerRadius="{DynamicResource ToggleSwitchIndicatorCornerRadius}">
                     <Border.Transitions>
                         <Transitions>
                             <BrushTransition Property="Background" Duration="0:0:0.2" />
@@ -318,7 +320,7 @@
                                     Name="SwitchKnobIndicator"
                                     Background="White"
                                     BoxShadow="0 0 1 1 #222E3238"
-                                    CornerRadius="100" />
+                                    CornerRadius="{DynamicResource ToggleSwitchIndicatorCornerRadius}" />
                                 <Arc
                                     Name="SwitchKnobLoadingIndicator"
                                     IsVisible="False"
diff --git a/src/Semi.Avalonia/Themes/Dark/AdornerLayer.axaml b/src/Semi.Avalonia/Themes/Dark/AdornerLayer.axaml
index c380958..53e13c9 100644
--- a/src/Semi.Avalonia/Themes/Dark/AdornerLayer.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/AdornerLayer.axaml
@@ -1,3 +1,4 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <SolidColorBrush x:Key="AdornerLayerStroke" Opacity="0.4" Color="#54A9FF" />
+    <SolidColorBrush x:Key="AdornerLayerBorderBrush" Opacity="0.4" Color="#54A9FF" />
+    <SolidColorBrush x:Key="AdornerLayerSolidBorderBrush" Color="#F9F9F9" />
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/Dark/ToggleButton.axaml b/src/Semi.Avalonia/Themes/Dark/ToggleButton.axaml
index 3f05a77..6cb0a93 100644
--- a/src/Semi.Avalonia/Themes/Dark/ToggleButton.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/ToggleButton.axaml
@@ -38,16 +38,16 @@
     <SolidColorBrush x:Key="ToggleButtonCheckedForeground" Color="White" />
     <SolidColorBrush x:Key="ToggleButtonCheckedDisabledBackground" Color="#2E3238" />
 
-    <SolidColorBrush x:Key="ToggleButtonPrimaryIndeterminateBackground" Color="#053170" />
-    <SolidColorBrush x:Key="ToggleButtonSecondaryIndeterminateBackground" Color="#003761" />
-    <SolidColorBrush x:Key="ToggleButtonTertiaryIndeterminateBackground" Color="#1C1F23" />
-    <SolidColorBrush x:Key="ToggleButtonSuccessIndeterminateBackground" Color="#123C19" />
-    <SolidColorBrush x:Key="ToggleButtonWarningIndeterminateBackground" Color="#551F03" />
-    <SolidColorBrush x:Key="ToggleButtonDangerIndeterminateBackground" Color="#6C090B" />
+    <SolidColorBrush x:Key="ToggleButtonPrimaryIndeterminateBackground" Opacity="0.2" Color="#54A9FF" />
+    <SolidColorBrush x:Key="ToggleButtonSecondaryIndeterminateBackground" Opacity="0.2" Color="#40B4F3" />
+    <SolidColorBrush x:Key="ToggleButtonTertiaryIndeterminateBackground" Opacity="0.2" Color="#888D92" />
+    <SolidColorBrush x:Key="ToggleButtonSuccessIndeterminateBackground" Opacity="0.2" Color="#5DC264" />
+    <SolidColorBrush x:Key="ToggleButtonWarningIndeterminateBackground" Opacity="0.2" Color="#FFAE43" />
+    <SolidColorBrush x:Key="ToggleButtonDangerIndeterminateBackground" Opacity="0.2" Color="#FC725A" />
 
     <SolidColorBrush x:Key="ToggleButtonPrimaryIndeterminateBorderBrush" Color="#54A9FF" />
     <SolidColorBrush x:Key="ToggleButtonSecondaryIndeterminateBorderBrush" Color="#40B4F3" />
-    <SolidColorBrush x:Key="ToggleButtonTertiaryIndeterminateBorderBrush" Color="#888D92" />
+    <SolidColorBrush x:Key="ToggleButtonTertiaryIndeterminateBorderBrush" Opacity="0.8" Color="#F9F9F9" />
     <SolidColorBrush x:Key="ToggleButtonSuccessIndeterminateBorderBrush" Color="#5DC264" />
     <SolidColorBrush x:Key="ToggleButtonWarningIndeterminateBorderBrush" Color="#FFAE43" />
     <SolidColorBrush x:Key="ToggleButtonDangerIndeterminateBorderBrush" Color="#FC725A" />
diff --git a/src/Semi.Avalonia/Themes/Light/AdornerLayer.axaml b/src/Semi.Avalonia/Themes/Light/AdornerLayer.axaml
index 5060345..976e2f0 100644
--- a/src/Semi.Avalonia/Themes/Light/AdornerLayer.axaml
+++ b/src/Semi.Avalonia/Themes/Light/AdornerLayer.axaml
@@ -1,3 +1,4 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <SolidColorBrush x:Key="AdornerLayerStroke" Color="#98CDFD" />
+    <SolidColorBrush x:Key="AdornerLayerBorderBrush" Color="#98CDFD" />
+    <SolidColorBrush x:Key="AdornerLayerSolidBorderBrush" Color="#1C1F23" />
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/Light/ToggleButton.axaml b/src/Semi.Avalonia/Themes/Light/ToggleButton.axaml
index 2d27503..de31ffa 100644
--- a/src/Semi.Avalonia/Themes/Light/ToggleButton.axaml
+++ b/src/Semi.Avalonia/Themes/Light/ToggleButton.axaml
@@ -47,7 +47,7 @@
 
     <SolidColorBrush x:Key="ToggleButtonPrimaryIndeterminateBorderBrush" Color="#0077FA" />
     <SolidColorBrush x:Key="ToggleButtonSecondaryIndeterminateBorderBrush" Color="#0095EE" />
-    <SolidColorBrush x:Key="ToggleButtonTertiaryIndeterminateBorderBrush" Color="#6B7075" />
+    <SolidColorBrush x:Key="ToggleButtonTertiaryIndeterminateBorderBrush" Opacity="0.8" Color="#1C1F23" />
     <SolidColorBrush x:Key="ToggleButtonSuccessIndeterminateBorderBrush" Color="#3BB346" />
     <SolidColorBrush x:Key="ToggleButtonWarningIndeterminateBorderBrush" Color="#FC8800" />
     <SolidColorBrush x:Key="ToggleButtonDangerIndeterminateBorderBrush" Color="#F93920" />
diff --git a/src/Semi.Avalonia/Themes/Shared/AdornerLayer.axaml b/src/Semi.Avalonia/Themes/Shared/AdornerLayer.axaml
index a5119bf..d55d612 100644
--- a/src/Semi.Avalonia/Themes/Shared/AdornerLayer.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/AdornerLayer.axaml
@@ -1,3 +1,4 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <Thickness x:Key="AdornerLayerBorderThickness">2</Thickness>
+    <CornerRadius x:Key="AdornerLayerCornerRadius">3</CornerRadius>
 </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 eaa89b4..3c3895f 100644
--- a/src/Semi.Avalonia/Themes/Shared/ToggleSwitch.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/ToggleSwitch.axaml
@@ -5,6 +5,7 @@
     <x:Double x:Key="ToggleSwitchDefaultWidth">40</x:Double>
     <x:Double x:Key="ToggleSwitchSmallWidth">26</x:Double>
     <x:Double x:Key="ToggleSwitchLargeWidth">54</x:Double>
+    <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>