zhaoyushun1999/Semi.Avalonia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: design an AdornerLayer for Solid Button.

Browse Source 
(cherry picked from commit 1250d45ad8b9b550047c70d9f6291be95769ae75)
This commit is contained in:
Zhang Dian 2024-11-08 05:12:52 +08:00
parent 3a6fe152ae
commit ab3d88a6d1
13 changed files with 94 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/Semi.Avalonia/Controls/AdornerLayer.axaml
View File

@ -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>

6
src/Semi.Avalonia/Controls/Button.axaml
View File

@ -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}" />

6
src/Semi.Avalonia/Controls/DropDownButton.axaml
View File

@ -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}" />

6
src/Semi.Avalonia/Controls/RepeatButton.axaml
View File

@ -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}" />

62
src/Semi.Avalonia/Controls/SplitButton.axaml
View File

@ -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}" />

6
src/Semi.Avalonia/Controls/ToggleButton.axaml
View File

@ -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">

20
src/Semi.Avalonia/Controls/ToggleSwitch.axaml
View File

@ -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"

3
src/Semi.Avalonia/Themes/Dark/AdornerLayer.axaml
View File

@ -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>

14
src/Semi.Avalonia/Themes/Dark/ToggleButton.axaml
View File

@ -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" />

3
src/Semi.Avalonia/Themes/Light/AdornerLayer.axaml
View File

@ -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>

2
src/Semi.Avalonia/Themes/Light/ToggleButton.axaml
View File

@ -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" />

1
src/Semi.Avalonia/Themes/Shared/AdornerLayer.axaml
View File

@ -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>

1
src/Semi.Avalonia/Themes/Shared/ToggleSwitch.axaml
View File

@ -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>