feat: design an AdornerLayer for Solid Button.

This commit is contained in:
Zhang Dian 2024-11-08 05:12:52 +08:00
parent 90dfa3ba8a
commit 1250d45ad8
14 changed files with 92 additions and 49 deletions

View File

@ -5,9 +5,17 @@
<ControlTheme x:Key="{x:Type AdornerLayer}" TargetType="AdornerLayer"> <ControlTheme x:Key="{x:Type AdornerLayer}" TargetType="AdornerLayer">
<Setter Property="DefaultFocusAdorner"> <Setter Property="DefaultFocusAdorner">
<FocusAdornerTemplate> <FocusAdornerTemplate>
<Border BorderThickness="{DynamicResource AdornerLayerBorderThickness}" <Border Theme="{DynamicResource AdornerLayerBorder}" />
BorderBrush="{DynamicResource AdornerLayerStroke}" />
</FocusAdornerTemplate> </FocusAdornerTemplate>
</Setter> </Setter>
</ControlTheme> </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> </ResourceDictionary>

View File

@ -102,6 +102,12 @@
x:Key="SolidButton" x:Key="SolidButton"
BasedOn="{StaticResource {x:Type Button}}" BasedOn="{StaticResource {x:Type Button}}"
TargetType="Button"> TargetType="Button">
<Setter Property="FocusAdorner">
<FocusAdornerTemplate>
<Border Theme="{DynamicResource AdornerLayerBorder}"
Classes="Solid" />
</FocusAdornerTemplate>
</Setter>
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter"> <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" /> <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
<Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" /> <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />

View File

@ -125,6 +125,12 @@
x:Key="SolidDropDownButton" x:Key="SolidDropDownButton"
BasedOn="{StaticResource {x:Type DropDownButton}}" BasedOn="{StaticResource {x:Type DropDownButton}}"
TargetType="DropDownButton"> TargetType="DropDownButton">
<Setter Property="FocusAdorner">
<FocusAdornerTemplate>
<Border Theme="{DynamicResource AdornerLayerBorder}"
Classes="Solid" />
</FocusAdornerTemplate>
</Setter>
<Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" /> <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
<Style Selector="^ /template/ Border#RootBorder"> <Style Selector="^ /template/ Border#RootBorder">
<Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" /> <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />

View File

@ -97,6 +97,12 @@
x:Key="SolidRepeatButton" x:Key="SolidRepeatButton"
BasedOn="{StaticResource {x:Type RepeatButton}}" BasedOn="{StaticResource {x:Type RepeatButton}}"
TargetType="RepeatButton"> TargetType="RepeatButton">
<Setter Property="FocusAdorner">
<FocusAdornerTemplate>
<Border Theme="{DynamicResource AdornerLayerBorder}"
Classes="Solid" />
</FocusAdornerTemplate>
</Setter>
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter"> <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" /> <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
<Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" /> <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />

View File

@ -68,31 +68,6 @@
ClipToBounds="True" ClipToBounds="True"
CornerRadius="{TemplateBinding CornerRadius}"> CornerRadius="{TemplateBinding CornerRadius}">
<DockPanel> <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 <Button
Name="PART_PrimaryButton" Name="PART_PrimaryButton"
Padding="{TemplateBinding Padding}" Padding="{TemplateBinding Padding}"
@ -106,12 +81,33 @@
Content="{TemplateBinding Content}" Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" ContentTemplate="{TemplateBinding ContentTemplate}"
CornerRadius="0" CornerRadius="0"
Focusable="False"
FontFamily="{TemplateBinding FontFamily}" FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}" FontSize="{TemplateBinding FontSize}"
FontWeight="{TemplateBinding FontWeight}" FontWeight="{TemplateBinding FontWeight}"
KeyboardNavigation.IsTabStop="False" DockPanel.Dock="Left"
Theme="{DynamicResource SemiSplitButtonElement}" /> 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> </DockPanel>
</Border> </Border>
</ControlTemplate> </ControlTemplate>
@ -149,6 +145,12 @@
</Style> </Style>
<Style Selector="^:checked"> <Style Selector="^:checked">
<Style Selector="^ /template/ Button"> <Style Selector="^ /template/ Button">
<Setter Property="FocusAdorner">
<FocusAdornerTemplate>
<Border Theme="{DynamicResource AdornerLayerBorder}"
Classes="Solid" />
</FocusAdornerTemplate>
</Setter>
<Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" /> <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
<Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" /> <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
<Style Selector="^:pointerover"> <Style Selector="^:pointerover">
@ -233,6 +235,12 @@
BasedOn="{StaticResource {x:Type SplitButton}}" BasedOn="{StaticResource {x:Type SplitButton}}"
TargetType="SplitButton"> TargetType="SplitButton">
<Style Selector="^ /template/ Button"> <Style Selector="^ /template/ Button">
<Setter Property="FocusAdorner">
<FocusAdornerTemplate>
<Border Theme="{DynamicResource AdornerLayerBorder}"
Classes="Solid" />
</FocusAdornerTemplate>
</Setter>
<Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" /> <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
<Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" /> <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />

View File

@ -96,6 +96,12 @@
</Style> </Style>
<Style Selector="^:checked"> <Style Selector="^:checked">
<Setter Property="FocusAdorner">
<FocusAdornerTemplate>
<Border Theme="{DynamicResource AdornerLayerBorder}"
Classes="Solid" />
</FocusAdornerTemplate>
</Setter>
<Setter Property="Foreground" Value="{DynamicResource ToggleButtonCheckedForeground}" /> <Setter Property="Foreground" Value="{DynamicResource ToggleButtonCheckedForeground}" />
<Setter Property="Background" Value="{DynamicResource ToggleButtonPrimaryCheckedBackground}" /> <Setter Property="Background" Value="{DynamicResource ToggleButtonPrimaryCheckedBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonPrimaryCheckedBorderBrush}" /> <Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonPrimaryCheckedBorderBrush}" />

View File

@ -17,9 +17,8 @@
<Setter Property="VerticalContentAlignment" Value="Center" /> <Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="FocusAdorner"> <Setter Property="FocusAdorner">
<FocusAdornerTemplate> <FocusAdornerTemplate>
<Border BorderThickness="{DynamicResource AdornerLayerBorderThickness}" <Border Theme="{DynamicResource AdornerLayerBorder}"
BorderBrush="{DynamicResource AdornerLayerStroke}" CornerRadius="{DynamicResource ToggleSwitchIndicatorCornerRadius}"/>
CornerRadius="100"/>
</FocusAdornerTemplate> </FocusAdornerTemplate>
</Setter> </Setter>
<Setter Property="KnobTransitions"> <Setter Property="KnobTransitions">
@ -56,7 +55,7 @@
Height="{DynamicResource ToggleSwitchDefaultHeight}" Height="{DynamicResource ToggleSwitchDefaultHeight}"
BorderBrush="{DynamicResource ToggleSwitchDefaultBorderBrush}" BorderBrush="{DynamicResource ToggleSwitchDefaultBorderBrush}"
BorderThickness="1" BorderThickness="1"
CornerRadius="100"> CornerRadius="{DynamicResource ToggleSwitchIndicatorCornerRadius}">
<Border.Transitions> <Border.Transitions>
<Transitions> <Transitions>
<BrushTransition Property="Background" Duration="0:0:0.2" /> <BrushTransition Property="Background" Duration="0:0:0.2" />
@ -76,7 +75,7 @@
Name="SwitchKnobIndicator" Name="SwitchKnobIndicator"
Background="White" Background="White"
BoxShadow="0 0 1 1 #222E3238" BoxShadow="0 0 1 1 #222E3238"
CornerRadius="100" /> CornerRadius="{DynamicResource ToggleSwitchIndicatorCornerRadius}" />
<Arc <Arc
Name="SwitchKnobLoadingIndicator" Name="SwitchKnobLoadingIndicator"
IsVisible="False" IsVisible="False"
@ -244,8 +243,7 @@
<Setter Property="Background" Value="Transparent" /> <Setter Property="Background" Value="Transparent" />
<Setter Property="FocusAdorner"> <Setter Property="FocusAdorner">
<FocusAdornerTemplate> <FocusAdornerTemplate>
<Border BorderThickness="{DynamicResource AdornerLayerBorderThickness}" <Border Theme="{StaticResource AdornerLayerBorder}" />
BorderBrush="{DynamicResource AdornerLayerStroke}" />
</FocusAdornerTemplate> </FocusAdornerTemplate>
</Setter> </Setter>
<Setter Property="Template"> <Setter Property="Template">
@ -298,7 +296,7 @@
Height="{DynamicResource ToggleSwitchDefaultHeight}" Height="{DynamicResource ToggleSwitchDefaultHeight}"
BorderBrush="{DynamicResource ToggleSwitchDefaultBorderBrush}" BorderBrush="{DynamicResource ToggleSwitchDefaultBorderBrush}"
BorderThickness="1" BorderThickness="1"
CornerRadius="100"> CornerRadius="{DynamicResource ToggleSwitchIndicatorCornerRadius}">
<Border.Transitions> <Border.Transitions>
<Transitions> <Transitions>
<BrushTransition Property="Background" Duration="0:0:0.2" /> <BrushTransition Property="Background" Duration="0:0:0.2" />
@ -322,7 +320,7 @@
Name="SwitchKnobIndicator" Name="SwitchKnobIndicator"
Background="White" Background="White"
BoxShadow="0 0 1 1 #222E3238" BoxShadow="0 0 1 1 #222E3238"
CornerRadius="100" /> CornerRadius="{DynamicResource ToggleSwitchIndicatorCornerRadius}" />
<Arc <Arc
Name="SwitchKnobLoadingIndicator" Name="SwitchKnobLoadingIndicator"
IsVisible="False" IsVisible="False"

View File

@ -1,3 +1,4 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <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> </ResourceDictionary>

View File

@ -42,16 +42,16 @@
<SolidColorBrush x:Key="ToggleButtonCheckedForeground" Color="White" /> <SolidColorBrush x:Key="ToggleButtonCheckedForeground" Color="White" />
<SolidColorBrush x:Key="ToggleButtonCheckedDisabledBackground" Color="#2E3238" /> <SolidColorBrush x:Key="ToggleButtonCheckedDisabledBackground" Color="#2E3238" />
<SolidColorBrush x:Key="ToggleButtonPrimaryIndeterminateBackground" Color="#053170" /> <SolidColorBrush x:Key="ToggleButtonPrimaryIndeterminateBackground" Opacity="0.2" Color="#54A9FF" />
<SolidColorBrush x:Key="ToggleButtonSecondaryIndeterminateBackground" Color="#003761" /> <SolidColorBrush x:Key="ToggleButtonSecondaryIndeterminateBackground" Opacity="0.2" Color="#40B4F3" />
<SolidColorBrush x:Key="ToggleButtonTertiaryIndeterminateBackground" Color="#1C1F23" /> <SolidColorBrush x:Key="ToggleButtonTertiaryIndeterminateBackground" Opacity="0.2" Color="#888D92" />
<SolidColorBrush x:Key="ToggleButtonSuccessIndeterminateBackground" Color="#123C19" /> <SolidColorBrush x:Key="ToggleButtonSuccessIndeterminateBackground" Opacity="0.2" Color="#5DC264" />
<SolidColorBrush x:Key="ToggleButtonWarningIndeterminateBackground" Color="#551F03" /> <SolidColorBrush x:Key="ToggleButtonWarningIndeterminateBackground" Opacity="0.2" Color="#FFAE43" />
<SolidColorBrush x:Key="ToggleButtonDangerIndeterminateBackground" Color="#6C090B" /> <SolidColorBrush x:Key="ToggleButtonDangerIndeterminateBackground" Opacity="0.2" Color="#FC725A" />
<SolidColorBrush x:Key="ToggleButtonPrimaryIndeterminateBorderBrush" Color="#54A9FF" /> <SolidColorBrush x:Key="ToggleButtonPrimaryIndeterminateBorderBrush" Color="#54A9FF" />
<SolidColorBrush x:Key="ToggleButtonSecondaryIndeterminateBorderBrush" Color="#40B4F3" /> <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="ToggleButtonSuccessIndeterminateBorderBrush" Color="#5DC264" />
<SolidColorBrush x:Key="ToggleButtonWarningIndeterminateBorderBrush" Color="#FFAE43" /> <SolidColorBrush x:Key="ToggleButtonWarningIndeterminateBorderBrush" Color="#FFAE43" />
<SolidColorBrush x:Key="ToggleButtonDangerIndeterminateBorderBrush" Color="#FC725A" /> <SolidColorBrush x:Key="ToggleButtonDangerIndeterminateBorderBrush" Color="#FC725A" />

View File

@ -1,3 +1,4 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <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> </ResourceDictionary>

View File

@ -1,3 +1,4 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <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> </ResourceDictionary>

View File

@ -51,7 +51,7 @@
<SolidColorBrush x:Key="ToggleButtonPrimaryIndeterminateBorderBrush" Color="#0077FA" /> <SolidColorBrush x:Key="ToggleButtonPrimaryIndeterminateBorderBrush" Color="#0077FA" />
<SolidColorBrush x:Key="ToggleButtonSecondaryIndeterminateBorderBrush" Color="#0095EE" /> <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="ToggleButtonSuccessIndeterminateBorderBrush" Color="#3BB346" />
<SolidColorBrush x:Key="ToggleButtonWarningIndeterminateBorderBrush" Color="#FC8800" /> <SolidColorBrush x:Key="ToggleButtonWarningIndeterminateBorderBrush" Color="#FC8800" />
<SolidColorBrush x:Key="ToggleButtonDangerIndeterminateBorderBrush" Color="#F93920" /> <SolidColorBrush x:Key="ToggleButtonDangerIndeterminateBorderBrush" Color="#F93920" />

View File

@ -1,3 +1,4 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Thickness x:Key="AdornerLayerBorderThickness">2</Thickness> <Thickness x:Key="AdornerLayerBorderThickness">2</Thickness>
<CornerRadius x:Key="AdornerLayerCornerRadius">3</CornerRadius>
</ResourceDictionary> </ResourceDictionary>

View File

@ -5,6 +5,7 @@
<x:Double x:Key="ToggleSwitchDefaultWidth">40</x:Double> <x:Double x:Key="ToggleSwitchDefaultWidth">40</x:Double>
<x:Double x:Key="ToggleSwitchSmallWidth">26</x:Double> <x:Double x:Key="ToggleSwitchSmallWidth">26</x:Double>
<x:Double x:Key="ToggleSwitchLargeWidth">54</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="ToggleSwitchIndicatorDefaultWidth">18</x:Double>
<x:Double x:Key="ToggleSwitchIndicatorSmallWidth">12</x:Double> <x:Double x:Key="ToggleSwitchIndicatorSmallWidth">12</x:Double>
<x:Double x:Key="ToggleSwitchIndicatorLargeWidth">24</x:Double> <x:Double x:Key="ToggleSwitchIndicatorLargeWidth">24</x:Double>