feat: design an AdornerLayer for Solid Button.

irihitech · Nov 7, 2024 · 1250d45 · 1250d45
1 parent 90dfa3b
commit 1250d45
Show file tree

Hide file tree

Showing 14 changed files with 92 additions and 49 deletions.
diff --git 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>
diff --git 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
@@ -125,6 +125,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
@@ -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
@@ -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">
@@ -233,6 +235,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
@@ -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}" />
             <Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonPrimaryCheckedBorderBrush}" />

diff --git 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">
@@ -56,7 +55,7 @@
                         Height="{DynamicResource ToggleSwitchDefaultHeight}"
                         BorderBrush="{DynamicResource ToggleSwitchDefaultBorderBrush}"
                         BorderThickness="1"
-                        CornerRadius="100">
+                        CornerRadius="{DynamicResource ToggleSwitchIndicatorCornerRadius}">
                         <Border.Transitions>
                             <Transitions>
                                 <BrushTransition Property="Background" Duration="0:0:0.2" />
@@ -76,7 +75,7 @@
                                     Name="SwitchKnobIndicator"
                                     Background="White"
                                     BoxShadow="0 0 1 1 #222E3238"
-                                    CornerRadius="100" />
+                                    CornerRadius="{DynamicResource ToggleSwitchIndicatorCornerRadius}" />
                                 <Arc
                                     Name="SwitchKnobLoadingIndicator"
                                     IsVisible="False"
@@ -244,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">
@@ -298,7 +296,7 @@
                     Height="{DynamicResource ToggleSwitchDefaultHeight}"
                     BorderBrush="{DynamicResource ToggleSwitchDefaultBorderBrush}"
                     BorderThickness="1"
-                    CornerRadius="100">
+                    CornerRadius="{DynamicResource ToggleSwitchIndicatorCornerRadius}">
                     <Border.Transitions>
                         <Transitions>
                             <BrushTransition Property="Background" Duration="0:0:0.2" />
@@ -322,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
@@ -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>
diff --git a/src/Semi.Avalonia/Themes/Dark/ToggleButton.axaml b/src/Semi.Avalonia/Themes/Dark/ToggleButton.axaml
@@ -42,16 +42,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/HighContrast/AdornerLayer.axaml b/src/Semi.Avalonia/Themes/HighContrast/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="{StaticResource WindowTextColor}" />
+    <SolidColorBrush x:Key="AdornerLayerBorderBrush" Color="{StaticResource WindowTextColor}" />
+    <SolidColorBrush x:Key="AdornerSolidLayerBorderBrush" Color="{StaticResource WindowTextColor}" />
 </ResourceDictionary>
diff --git 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>
diff --git a/src/Semi.Avalonia/Themes/Light/ToggleButton.axaml b/src/Semi.Avalonia/Themes/Light/ToggleButton.axaml
@@ -51,7 +51,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
@@ -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>
diff --git 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>