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

feat: add Outline Theme to Button.

Browse Source
This commit is contained in:
Zhang Dian 2024-07-14 22:26:59 +08:00
parent 915c45c21f
commit 6a94e403c9
6 changed files with 148 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
demo/Semi.Avalonia.Demo/Pages/ButtonDemo.axaml
View File

@ -64,6 +64,16 @@
Disabled
</Button>
</StackPanel>
<TextBlock>Outline</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="20">
<Button Classes="Primary" Theme="{DynamicResource OutlineButton}">Primary</Button>
<Button Classes="Secondary" Theme="{DynamicResource OutlineButton}">Secondary</Button>
<Button Classes="Tertiary" Theme="{DynamicResource OutlineButton}">Tertiary</Button>
<Button Classes="Success" Theme="{DynamicResource OutlineButton}">Success</Button>
<Button Classes="Warning" Theme="{DynamicResource OutlineButton}">Warning</Button>
<Button Classes="Danger" Theme="{DynamicResource OutlineButton}">Danger</Button>
<Button Classes="Danger" Theme="{DynamicResource OutlineButton}" IsEnabled="False">Disabled</Button>
</StackPanel>
<TextBlock>Borderless</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="20">
<Button Classes="Primary" Theme="{DynamicResource BorderlessButton}">Primary</Button>
@ -96,9 +106,11 @@
<StackPanel Orientation="Horizontal" Spacing="8">
<DropDownButton Content="Default" Classes="Success"/>
<DropDownButton Content="Solid" Theme="{DynamicResource SolidDropDownButton}" Classes="Success"/>
<DropDownButton Content="Outline" Theme="{DynamicResource OutlineDropDownButton}" Classes="Success"/>
<DropDownButton Content="Borderless" Theme="{DynamicResource BorderlessDropDownButton}" Classes="Success"/>
<DropDownButton Content="Default" Classes="Success" IsEnabled="False"/>
<DropDownButton Content="Solid" Theme="{DynamicResource SolidDropDownButton}" Classes="Success" IsEnabled="False"/>
<DropDownButton Content="Outline" Theme="{DynamicResource OutlineDropDownButton}" Classes="Success" IsEnabled="False"/>
<DropDownButton Content="Borderless" Theme="{DynamicResource BorderlessDropDownButton}" Classes="Success" IsEnabled="False"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="8">
@ -119,11 +131,13 @@
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="8">
<SplitButton Content="Default" Classes="Success" />
<SplitButton Theme="{DynamicResource SolidSplitButton}" Content="Solid" Classes="Success" />
<SplitButton Theme="{DynamicResource BorderlessSplitButton}" Content="Borderless" Classes="Success" />
<SplitButton Content="Solid" Theme="{DynamicResource SolidSplitButton}" Classes="Success" />
<SplitButton Content="Outline" Theme="{DynamicResource OutlineSplitButton}" Classes="Success" />
<SplitButton Content="Borderless" Theme="{DynamicResource BorderlessSplitButton}" Classes="Success" />
<SplitButton Content="Default" Classes="Success" IsEnabled="False" />
<SplitButton Theme="{DynamicResource SolidSplitButton}" Content="Solid" Classes="Success" IsEnabled="False" />
<SplitButton Theme="{DynamicResource BorderlessSplitButton}" Content="Borderless" Classes="Success" IsEnabled="False" />
<SplitButton Content="Solid" Theme="{DynamicResource SolidSplitButton}" Classes="Success" IsEnabled="False" />
<SplitButton Content="Outline" Theme="{DynamicResource OutlineSplitButton}" Classes="Success" IsEnabled="False" />
<SplitButton Content="Borderless" Theme="{DynamicResource BorderlessSplitButton}" Classes="Success" IsEnabled="False" />
</StackPanel>
<StackPanel Orientation="Horizontal" Spacing="8">
<SplitButton Classes="Small" Content="Small" />

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

@ -48,7 +48,7 @@
<Style Selector="^:pressed">
<Setter Property="RenderTransform" Value="scale(0.98)" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="BorderBrush" Value="{TemplateBinding BorderBrush}" />
<Setter Property="Background" Value="{TemplateBinding Background}" />
@ -216,6 +216,38 @@
</Style>
</ControlTheme>
<ControlTheme
x:Key="OutlineButton"
BasedOn="{StaticResource {x:Type Button}}"
TargetType="Button">
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
</Style>
<Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{DynamicResource ButtonOutlinePointeroverBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
</Style>
<Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{DynamicResource ButtonOutlinePressedBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
</Style>
<Style Selector="^.Success /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineSuccessBorderBrush}" />
</Style>
<Style Selector="^.Warning /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineWarningBorderBrush}" />
</Style>
<Style Selector="^.Danger /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineDangerBorderBrush}" />
</Style>
<Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
</Style>
</ControlTheme>
<ControlTheme
x:Key="BorderlessButton"
BasedOn="{StaticResource {x:Type Button}}"
@ -254,4 +286,4 @@
<Setter Property="Foreground" Value="{DynamicResource ButtonInputInnerPressedForeground}" />
</Style>
</ControlTheme>
</ResourceDictionary>
</ResourceDictionary>

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

@ -239,17 +239,51 @@
</Style>
</ControlTheme>
<ControlTheme
x:Key="OutlineDropDownButton"
BasedOn="{StaticResource {x:Type DropDownButton}}"
TargetType="DropDownButton">
<Style Selector="^ /template/ Border#RootBorder">
<Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
</Style>
<Style Selector="^:pointerover /template/ Border#RootBorder">
<Setter Property="Background" Value="{DynamicResource ButtonOutlinePointeroverBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
</Style>
<Style Selector="^:pressed /template/ Border#RootBorder">
<Setter Property="Background" Value="{DynamicResource ButtonOutlinePressedBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
</Style>
<Style Selector="^.Success /template/ Border#RootBorder">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineSuccessBorderBrush}" />
</Style>
<Style Selector="^.Warning /template/ Border#RootBorder">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineWarningBorderBrush}" />
</Style>
<Style Selector="^.Danger /template/ Border#RootBorder">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineDangerBorderBrush}" />
</Style>
<Style Selector="^:disabled /template/ Border#RootBorder">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
</Style>
<Style Selector="^:disabled">
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
</Style>
</ControlTheme>
<ControlTheme
x:Key="BorderlessDropDownButton"
BasedOn="{StaticResource {x:Type DropDownButton}}"
TargetType="DropDownButton">
<Style Selector="^ /template/ Border#RootBorder">
<Setter Property="DropDownButton.Background" Value="Transparent" />
<Setter Property="DropDownButton.BorderBrush" Value="Transparent" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
</Style>
<Style Selector="^:disabled /template/ Border#RootBorder">
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Background" Value="Transparent" />
</Style>
</ControlTheme>
</ResourceDictionary>
</ResourceDictionary>

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

@ -116,7 +116,7 @@
</Border>
</ControlTemplate>
</Setter>
<Style Selector="^ /template/ Button">
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultPrimaryForeground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultBorderBrush}" />
@ -130,7 +130,7 @@
<Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultPressedBorderBrush}" />
</Style>
</Style>
<Style Selector="^.Secondary /template/ Button">
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultSecondaryForeground}" />
@ -158,7 +158,7 @@
<Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPressedBackground}" />
</Style>
</Style>
<Style Selector="^.Secondary /template/ Button">
<Setter Property="Background" Value="{DynamicResource ButtonSolidSecondaryBackground}" />
<Style Selector="^:pointerover">
@ -230,7 +230,7 @@
<Style Selector="^ /template/ Button">
<Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
<Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
<Style Selector="^:pointerover">
<Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPointeroverBackground}" />
</Style>
@ -306,6 +306,38 @@
</Style>
</ControlTheme>
<ControlTheme
x:Key="OutlineSplitButton"
BasedOn="{StaticResource {x:Type SplitButton}}"
TargetType="SplitButton">
<Style Selector="^ /template/ Button">
<Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
</Style>
<Style Selector="^:pointerover /template/ Button">
<Setter Property="Background" Value="{DynamicResource ButtonOutlinePointeroverBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
</Style>
<Style Selector="^:pressed /template/ Button">
<Setter Property="Background" Value="{DynamicResource ButtonOutlinePressedBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
</Style>
<Style Selector="^.Success /template/ Button">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineSuccessBorderBrush}" />
</Style>
<Style Selector="^.Warning /template/ Button">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineWarningBorderBrush}" />
</Style>
<Style Selector="^.Danger /template/ Button">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineDangerBorderBrush}" />
</Style>
<Style Selector="^:disabled /template/ Button">
<Setter Property="BorderBrush" Value="{DynamicResource ButtonOutlineBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource ButtonOutlineBackground}" />
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
</Style>
</ControlTheme>
<ControlTheme
x:Key="BorderlessSplitButton"
BasedOn="{StaticResource {x:Type SplitButton}}"
@ -320,4 +352,4 @@
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
</Style>
</ControlTheme>
</ResourceDictionary>
</ResourceDictionary>

12
src/Semi.Avalonia/Themes/Dark/Button.axaml
View File

@ -70,7 +70,17 @@
<SolidColorBrush x:Key="ButtonSolidDangerPointeroverBorderBrush" Color="#FD9983" />
<SolidColorBrush x:Key="ButtonSolidDangerPressedBorderBrush" Color="#FDBEAC" />
<!-- end Solid -->
<!-- Outline -->
<SolidColorBrush x:Key="ButtonOutlineBackground" Color="Transparent" />
<SolidColorBrush x:Key="ButtonOutlineBorderBrush" Opacity="0.08" Color="White" />
<SolidColorBrush x:Key="ButtonOutlinePointeroverBackground" Opacity="0.12" Color="White" />
<SolidColorBrush x:Key="ButtonOutlinePressedBackground" Opacity="0.16" Color="White" />
<SolidColorBrush x:Key="ButtonOutlineSuccessBorderBrush" Color="#5DC264" />
<SolidColorBrush x:Key="ButtonOutlineWarningBorderBrush" Color="#FFAE43" />
<SolidColorBrush x:Key="ButtonOutlineDangerBorderBrush" Color="#FC725A" />
<!-- end Outline -->
<SolidColorBrush x:Key="ButtonInputInnerForeground" Color="#888D92" />
<SolidColorBrush x:Key="ButtonInputInnerPointeroverForeground" Color="#A7ABB0" />
<SolidColorBrush x:Key="ButtonInputInnerPressedForeground" Color="#C6CACD" />

12
src/Semi.Avalonia/Themes/Light/Button.axaml
View File

@ -70,7 +70,17 @@
<SolidColorBrush x:Key="ButtonSolidDangerPointeroverBorderBrush" Color="#D52515" />
<SolidColorBrush x:Key="ButtonSolidDangerPressedBorderBrush" Color="#B2140C" />
<!-- end Solid -->
<!-- Outline -->
<SolidColorBrush x:Key="ButtonOutlineBackground" Color="Transparent" />
<SolidColorBrush x:Key="ButtonOutlineBorderBrush" Opacity="0.08" Color="#1C1F23" />
<SolidColorBrush x:Key="ButtonOutlinePointeroverBackground" Opacity="0.05" Color="#2E3238" />
<SolidColorBrush x:Key="ButtonOutlinePressedBackground" Opacity="0.09" Color="#2E3238" />
<SolidColorBrush x:Key="ButtonOutlineSuccessBorderBrush" Color="#3BB346" />
<SolidColorBrush x:Key="ButtonOutlineWarningBorderBrush" Color="#FC8800" />
<SolidColorBrush x:Key="ButtonOutlineDangerBorderBrush" Color="#F93920" />
<!-- end Outline -->
<SolidColorBrush x:Key="ButtonInputInnerForeground" Color="#6B7075" />
<SolidColorBrush x:Key="ButtonInputInnerPointeroverForeground" Color="#555B61" />
<SolidColorBrush x:Key="ButtonInputInnerPressedForeground" Color="#41464C" />