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

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

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

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

@ -239,13 +239,47 @@
</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" />

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

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

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

@ -71,6 +71,16 @@
<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" />

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

@ -71,6 +71,16 @@
<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" />