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 Disabled
</Button> </Button>
</StackPanel> </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> <TextBlock>Borderless</TextBlock>
<StackPanel Orientation="Horizontal" Spacing="20"> <StackPanel Orientation="Horizontal" Spacing="20">
<Button Classes="Primary" Theme="{DynamicResource BorderlessButton}">Primary</Button> <Button Classes="Primary" Theme="{DynamicResource BorderlessButton}">Primary</Button>
@ -96,9 +106,11 @@
<StackPanel Orientation="Horizontal" Spacing="8"> <StackPanel Orientation="Horizontal" Spacing="8">
<DropDownButton Content="Default" Classes="Success"/> <DropDownButton Content="Default" Classes="Success"/>
<DropDownButton Content="Solid" Theme="{DynamicResource SolidDropDownButton}" 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="Borderless" Theme="{DynamicResource BorderlessDropDownButton}" Classes="Success"/>
<DropDownButton Content="Default" Classes="Success" IsEnabled="False"/> <DropDownButton Content="Default" Classes="Success" IsEnabled="False"/>
<DropDownButton Content="Solid" Theme="{DynamicResource SolidDropDownButton}" 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"/> <DropDownButton Content="Borderless" Theme="{DynamicResource BorderlessDropDownButton}" Classes="Success" IsEnabled="False"/>
</StackPanel> </StackPanel>
<StackPanel Orientation="Horizontal" Spacing="8"> <StackPanel Orientation="Horizontal" Spacing="8">
@ -119,11 +131,13 @@
</StackPanel> </StackPanel>
<StackPanel Orientation="Horizontal" Spacing="8"> <StackPanel Orientation="Horizontal" Spacing="8">
<SplitButton Content="Default" Classes="Success" /> <SplitButton Content="Default" Classes="Success" />
<SplitButton Theme="{DynamicResource SolidSplitButton}" Content="Solid" Classes="Success" /> <SplitButton Content="Solid" Theme="{DynamicResource SolidSplitButton}" Classes="Success" />
<SplitButton Theme="{DynamicResource BorderlessSplitButton}" Content="Borderless" 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 Content="Default" Classes="Success" IsEnabled="False" />
<SplitButton Theme="{DynamicResource SolidSplitButton}" Content="Solid" Classes="Success" IsEnabled="False" /> <SplitButton Content="Solid" Theme="{DynamicResource SolidSplitButton}" Classes="Success" IsEnabled="False" />
<SplitButton Theme="{DynamicResource BorderlessSplitButton}" Content="Borderless" 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>
<StackPanel Orientation="Horizontal" Spacing="8"> <StackPanel Orientation="Horizontal" Spacing="8">
<SplitButton Classes="Small" Content="Small" /> <SplitButton Classes="Small" Content="Small" />

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

@ -48,7 +48,7 @@
<Style Selector="^:pressed"> <Style Selector="^:pressed">
<Setter Property="RenderTransform" Value="scale(0.98)" /> <Setter Property="RenderTransform" Value="scale(0.98)" />
</Style> </Style>
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter"> <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="BorderBrush" Value="{TemplateBinding BorderBrush}" /> <Setter Property="BorderBrush" Value="{TemplateBinding BorderBrush}" />
<Setter Property="Background" Value="{TemplateBinding Background}" /> <Setter Property="Background" Value="{TemplateBinding Background}" />
@ -216,6 +216,38 @@
</Style> </Style>
</ControlTheme> </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 <ControlTheme
x:Key="BorderlessButton" x:Key="BorderlessButton"
BasedOn="{StaticResource {x:Type Button}}" BasedOn="{StaticResource {x:Type Button}}"
@ -254,4 +286,4 @@
<Setter Property="Foreground" Value="{DynamicResource ButtonInputInnerPressedForeground}" /> <Setter Property="Foreground" Value="{DynamicResource ButtonInputInnerPressedForeground}" />
</Style> </Style>
</ControlTheme> </ControlTheme>
</ResourceDictionary> </ResourceDictionary>

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

@ -239,17 +239,51 @@
</Style> </Style>
</ControlTheme> </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 <ControlTheme
x:Key="BorderlessDropDownButton" x:Key="BorderlessDropDownButton"
BasedOn="{StaticResource {x:Type DropDownButton}}" BasedOn="{StaticResource {x:Type DropDownButton}}"
TargetType="DropDownButton"> TargetType="DropDownButton">
<Style Selector="^ /template/ Border#RootBorder"> <Style Selector="^ /template/ Border#RootBorder">
<Setter Property="DropDownButton.Background" Value="Transparent" /> <Setter Property="Background" Value="Transparent" />
<Setter Property="DropDownButton.BorderBrush" Value="Transparent" /> <Setter Property="BorderBrush" Value="Transparent" />
</Style> </Style>
<Style Selector="^:disabled /template/ Border#RootBorder"> <Style Selector="^:disabled /template/ Border#RootBorder">
<Setter Property="BorderBrush" Value="Transparent" /> <Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Background" Value="Transparent" /> <Setter Property="Background" Value="Transparent" />
</Style> </Style>
</ControlTheme> </ControlTheme>
</ResourceDictionary> </ResourceDictionary>

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

@ -116,7 +116,7 @@
</Border> </Border>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
<Style Selector="^ /template/ Button"> <Style Selector="^ /template/ Button">
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultPrimaryForeground}" /> <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultPrimaryForeground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultBorderBrush}" /> <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultBorderBrush}" />
@ -130,7 +130,7 @@
<Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultPressedBorderBrush}" /> <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultPressedBorderBrush}" />
</Style> </Style>
</Style> </Style>
<Style Selector="^.Secondary /template/ Button"> <Style Selector="^.Secondary /template/ Button">
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultSecondaryForeground}" /> <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultSecondaryForeground}" />
@ -158,7 +158,7 @@
<Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPressedBackground}" /> <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPressedBackground}" />
</Style> </Style>
</Style> </Style>
<Style Selector="^.Secondary /template/ Button"> <Style Selector="^.Secondary /template/ Button">
<Setter Property="Background" Value="{DynamicResource ButtonSolidSecondaryBackground}" /> <Setter Property="Background" Value="{DynamicResource ButtonSolidSecondaryBackground}" />
<Style Selector="^:pointerover"> <Style Selector="^:pointerover">
@ -230,7 +230,7 @@
<Style Selector="^ /template/ Button"> <Style Selector="^ /template/ Button">
<Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" /> <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
<Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" /> <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
<Style Selector="^:pointerover"> <Style Selector="^:pointerover">
<Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPointeroverBackground}" /> <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPointeroverBackground}" />
</Style> </Style>
@ -306,6 +306,38 @@
</Style> </Style>
</ControlTheme> </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 <ControlTheme
x:Key="BorderlessSplitButton" x:Key="BorderlessSplitButton"
BasedOn="{StaticResource {x:Type SplitButton}}" BasedOn="{StaticResource {x:Type SplitButton}}"
@ -320,4 +352,4 @@
<Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" /> <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
</Style> </Style>
</ControlTheme> </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="ButtonSolidDangerPointeroverBorderBrush" Color="#FD9983" />
<SolidColorBrush x:Key="ButtonSolidDangerPressedBorderBrush" Color="#FDBEAC" /> <SolidColorBrush x:Key="ButtonSolidDangerPressedBorderBrush" Color="#FDBEAC" />
<!-- end Solid --> <!-- 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="ButtonInputInnerForeground" Color="#888D92" />
<SolidColorBrush x:Key="ButtonInputInnerPointeroverForeground" Color="#A7ABB0" /> <SolidColorBrush x:Key="ButtonInputInnerPointeroverForeground" Color="#A7ABB0" />
<SolidColorBrush x:Key="ButtonInputInnerPressedForeground" Color="#C6CACD" /> <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="ButtonSolidDangerPointeroverBorderBrush" Color="#D52515" />
<SolidColorBrush x:Key="ButtonSolidDangerPressedBorderBrush" Color="#B2140C" /> <SolidColorBrush x:Key="ButtonSolidDangerPressedBorderBrush" Color="#B2140C" />
<!-- end Solid --> <!-- 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="ButtonInputInnerForeground" Color="#6B7075" />
<SolidColorBrush x:Key="ButtonInputInnerPointeroverForeground" Color="#555B61" /> <SolidColorBrush x:Key="ButtonInputInnerPointeroverForeground" Color="#555B61" />
<SolidColorBrush x:Key="ButtonInputInnerPressedForeground" Color="#41464C" /> <SolidColorBrush x:Key="ButtonInputInnerPressedForeground" Color="#41464C" />