feat: add button related resources.

This commit is contained in:
rabbitism 2022-11-06 00:41:32 +08:00
parent 9a0b5c661e
commit 94b30bdb29
13 changed files with 157 additions and 54 deletions

View File

@ -2,13 +2,6 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Semi.Avalonia.Demo.App">
<Application.Styles>
<StyleInclude Source="avares://Semi.Avalonia/Themes/LightTheme.axaml"></StyleInclude>
</Application.Styles>
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="avares://Semi.Avalonia/Themes/DarkTheme.axaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>

View File

@ -2,11 +2,9 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:pages="using:Semi.Avalonia.Demo.Pages"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="Semi.Avalonia.Demo.MainWindow"
Title="Semi.Demo">
<StackPanel>
<Button>Primary</Button>
<Button>Secondary</Button>
</StackPanel>
<pages:ButtonDemo></pages:ButtonDemo>
</Window>

View File

@ -0,0 +1,14 @@
<UserControl xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="800"
d:DesignHeight="450"
x:Class="Semi.Avalonia.Demo.Pages.ButtonDemo">
<StackPanel Spacing="20" Margin="20" HorizontalAlignment="Left">
<Button>Primary</Button>
<Button Classes="Large">Primary</Button>
<Button Classes="Small">Primary</Button>
<Button Classes="Primary">Secondary</Button>
</StackPanel>
</UserControl>

View File

@ -0,0 +1,18 @@
using Avalonia;
using Avalonia.Controls;
using Avalonia.Markup.Xaml;
namespace Semi.Avalonia.Demo.Pages;
public partial class ButtonDemo : UserControl
{
public ButtonDemo()
{
InitializeComponent();
}
private void InitializeComponent()
{
AvaloniaXamlLoader.Load(this);
}
}

View File

@ -1,16 +1,21 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<!-- Button Theme Key: Solid Light Borderless; Default is Light -->
<!-- Button Default Classes: Primary Secondary, Tertiary, Warning, Danger; Default is Primary -->
<!-- State default pointerover pressed disabled -->
<ControlTheme x:Key="{x:Type Button}" TargetType="Button">
<Setter Property="Button.Background" Value="{DynamicResource ColorButtonOutlineBackground}"/>
<Setter Property="Button.Foreground" Value="{DynamicResource ColorButtonOutlinePrimaryForeground}"/>
<Setter Property="Button.BorderBrush" Value="{DynamicResource ColorButtonOutlinePrimaryBorderBrush}"/>
<Setter Property="Button.CornerRadius" Value="{DynamicResource SizeButtonCornerRadius}"/>
<Setter Property="Button.Background" Value="{DynamicResource ButtonDefaultBackground}"/>
<Setter Property="Button.Foreground" Value="{DynamicResource ButtonDefaultForeground}"/>
<Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonDefaultBorderBrush}"/>
<Setter Property="Button.CornerRadius" Value="3"/>
<Setter Property="Button.BorderThickness" Value="1"/>
<Setter Property="Button.Padding" Value="{DynamicResource ThicknessButtonContentDefault}"/>
<Setter Property="Button.Padding" Value="{DynamicResource ButtonDefaultPadding}"/>
<Setter Property="Button.RenderTransform" Value="none"/>
<Setter Property="Button.FontSize" Value="{DynamicResource FontRegularSize}"></Setter>
<Setter Property="Button.FontWeight" Value="{DynamicResource FontButtonFontWeight}"></Setter>
<Setter Property="Button.FontSize" Value="{DynamicResource ButtonDefaultFontSize}"></Setter>
<Setter Property="Button.FontWeight" Value="{DynamicResource ButtonDefaultFontWeight}"></Setter>
<Setter Property="Button.HorizontalContentAlignment" Value="Center"></Setter>
<Setter Property="Button.VerticalContentAlignment" Value="Center"></Setter>
<Setter Property="Button.MinHeight" Value="12"></Setter>
<Setter Property="Button.Template">
<ControlTemplate TargetType="Button">
<ContentPresenter
@ -22,11 +27,11 @@
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Padding="{TemplateBinding Padding}"
RecognizesAccessKey="True"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
TextElement.FontWeight="{TemplateBinding FontWeight}"
TextElement.FontSize="{TemplateBinding FontSize}"
RecognizesAccessKey="True"
UseLayoutRounding="False"
>
@ -34,19 +39,32 @@
</ControlTemplate>
</Setter>
<Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Button.BorderBrush" Value="{DynamicResource ColorButtonOutlinePrimaryPointeroverForeground}" />
<Setter Property="Button.Foreground" Value="{DynamicResource ColorButtonOutlinePrimaryPointeroverBorderBrush}" />
<Style Selector="^:pointerover">
<Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonDefaultPointerOverBorderBrush}" />
<Setter Property="Button.Background" Value="{DynamicResource ButtonDefaultPointerOverBackground}" />
<Setter Property="Button.Foreground" Value="{DynamicResource ButtonDefaultPointerOverForeground}" />
</Style>
<Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Button.BorderBrush" Value="{DynamicResource ColorButtonOutlinePrimaryPressedForeground}" />
<Setter Property="Button.Foreground" Value="{DynamicResource ColorButtonOutlinePrimaryPressedBorderBrush}" />
<Style Selector="^:pressed">
<Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonDefaultPressedBorderBrush}" />
<Setter Property="Button.Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
<Setter Property="Button.Foreground" Value="{DynamicResource ButtonDefaultPressedForeground}" />
</Style>
<Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Button.BorderBrush" Value="{DynamicResource ColorButtonOutlineDisabledBorderBrush}" />
<Setter Property="Button.Foreground" Value="{DynamicResource ColorButtonOutlineDisabledForeground}" />
<Style Selector="^:disabled">
<Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" />
<Setter Property="Button.Background" Value="{DynamicResource ButtonDefaultDisabledBackground}" />
<Setter Property="Button.Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
</Style>
<Style Selector="^.Large">
<Setter Property="Button.Padding" Value="{DynamicResource ButtonLargePadding}"></Setter>
</Style>
<Style Selector="^.Small">
<Setter Property="Button.Padding" Value="{DynamicResource ButtonSmallPadding}"></Setter>
</Style>
</ControlTheme>
<ControlTheme x:Key="LightButtonTheme" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}"/>
</ResourceDictionary>

View File

@ -1,9 +1,9 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ControlTheme x:Key="{x:Type Window}" TargetType="Window">
<Setter Property="Background" Value="{DynamicResource BrushWindowDefaultBackground}"/>
<Setter Property="TransparencyBackgroundFallback" Value="{DynamicResource BrushWindowDefaultBackground}" />
<Setter Property="Foreground" Value="{DynamicResource BrushWindowDefaultForeground}"/>
<Setter Property="Background" Value="{DynamicResource WindowDefaultBackground}"/>
<Setter Property="TransparencyBackgroundFallback" Value="{DynamicResource WindowDefaultBackground}" />
<Setter Property="Foreground" Value="{DynamicResource WindowDefaultForeground}"/>
<Setter Property="FontSize" Value="{DynamicResource FontDefaultFontSize}"/>
<Setter Property="FontFamily" Value="{DynamicResource FontDefaultFontFamily}" />
<Setter Property="Template">

View File

@ -0,0 +1,26 @@
# Semi.Avalonia Theme
## Naming Conventions
Resources are named by following format
`Control`+`Theme`[+`Class`+`PseudoClass`]+`Property`
Example:
`ButtonDefaultBackground`
`ButtonSolidPointeroverBorderThickness`
### Theme
If Theme key is type default, use `Default` as Theme part
### Class and PseudoClass
* Classes comes before PseudoClasses
* If multiple Classes are applied, order by alphabet order.
* If multiple PseudoClass are applied, order by alphabet order.

View File

@ -1,4 +1,6 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<SolidColorBrush x:Key="ButtonDefaultBackground" Color="Red"/>
<SolidColorBrush x:Key="ButtonDefaultForeground" Color="White"/>
</ResourceDictionary>

View File

@ -1,6 +1,6 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<SolidColorBrush x:Key="BrushWindowDefaultBackground" Color="Black"/>
<SolidColorBrush x:Key="BrushWindowDefaultForeground" Color="White"/>
<SolidColorBrush x:Key="WindowDefaultBackground" Color="Black"/>
<SolidColorBrush x:Key="WindowDefaultForeground" Color="White"/>
</ResourceDictionary>

View File

@ -1,9 +1,16 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui"
<Styles xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/Dark.axaml"/>
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Base.axaml"/>
<ResourceInclude Source="avares://Semi.Avalonia/Controls/Controls.axaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
<Styles.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/Dark.axaml"/>
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Base.axaml"/>
<ResourceInclude Source="avares://Semi.Avalonia/Controls/Controls.axaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Styles.Resources>
<Style Selector=":is(UserControl)">
<Setter Property="Theme" Value="{DynamicResource {x:Type UserControl}}"></Setter>
</Style>
</Styles>

View File

@ -1,4 +1,25 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=System.Runtime">
<sys:Double x:Key="ButtonDefaultFontSize">14</sys:Double>
<FontWeight x:Key="ButtonDefaultFontWeight">600</FontWeight>
<Thickness x:Key="ButtonDefaultPadding">12 6</Thickness>
<Thickness x:Key="ButtonLargePadding">16 10</Thickness>
<Thickness x:Key="ButtonSmallPadding">6 2</Thickness>
<SolidColorBrush x:Key="ButtonDefaultForeground" Color="White"/>
<SolidColorBrush x:Key="ButtonDefaultBackground" Color="#0077FA"/>
<SolidColorBrush x:Key="ButtonDefaultBorderBrush" Color="#0077FA"/>
<SolidColorBrush x:Key="ButtonDefaultPointerOverForeground" Color="White"/>
<SolidColorBrush x:Key="ButtonDefaultPointerOverBackground" Color="#0062D6"/>
<SolidColorBrush x:Key="ButtonDefaultPointerOverBorderBrush" Color="#0062D6"/>
<SolidColorBrush x:Key="ButtonDefaultPressedForeground" Color="White"/>
<SolidColorBrush x:Key="ButtonDefaultPressedBackground" Color="#004FB3"/>
<SolidColorBrush x:Key="ButtonDefaultPressedBorderBrush" Color="#004FB3"/>
<SolidColorBrush x:Key="ButtonDefaultDisabledForeground" Color="#E6E8EA"/>
<SolidColorBrush x:Key="ButtonDefaultDisabledBackground" Color="White"/>
<SolidColorBrush x:Key="ButtonDefaultDisabledBorderBrush" Color="#E6E8EA"/>
</ResourceDictionary>

View File

@ -1,6 +1,6 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<SolidColorBrush x:Key="BrushWindowDefaultBackground" Color="White"/>
<SolidColorBrush x:Key="BrushWindowDefaultForeground" Color="Black"/>
<SolidColorBrush x:Key="WindowDefaultBackground" Color="White"/>
<SolidColorBrush x:Key="WindowDefaultForeground" Color="Black"/>
</ResourceDictionary>

View File

@ -1,10 +1,16 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui"
<Styles xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Light.axaml"/>
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Base.axaml"/>
<ResourceInclude Source="avares://Semi.Avalonia/Controls/Controls.axaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
<Styles.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Light.axaml"/>
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Base.axaml"/>
<ResourceInclude Source="avares://Semi.Avalonia/Controls/Controls.axaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Styles.Resources>
<Style Selector=":is(UserControl)">
<Setter Property="Theme" Value="{StaticResource {x:Type UserControl}}"></Setter>
</Style>
</Styles>