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

feat: unity default theme of CheckBox & RadioButton.

Browse Source
This commit is contained in:
Zhang Dian 2024-09-21 22:12:00 +08:00
parent d42c8cce78
commit ae1f4ffe60
4 changed files with 38 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/Semi.Avalonia/Controls/CheckBox.axaml
View File

@ -3,7 +3,6 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:CompileBindings="True"> x:CompileBindings="True">
<ControlTheme x:Key="{x:Type CheckBox}" TargetType="CheckBox"> <ControlTheme x:Key="{x:Type CheckBox}" TargetType="CheckBox">
<Setter Property="Padding" Value="8,0,0,0" />
<Setter Property="HorizontalAlignment" Value="Left" /> <Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Top" /> <Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Cursor" Value="Hand" /> <Setter Property="Cursor" Value="Hand" />
@ -11,7 +10,6 @@
<Setter Property="VerticalContentAlignment" Value="Center" /> <Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="FontSize" Value="{DynamicResource CheckBoxFontSize}" /> <Setter Property="FontSize" Value="{DynamicResource CheckBoxFontSize}" />
<Setter Property="CornerRadius" Value="{DynamicResource CheckBoxBoxCornerRadius}" /> <Setter Property="CornerRadius" Value="{DynamicResource CheckBoxBoxCornerRadius}" />
<Setter Property="MinHeight" Value="32" />
<Setter Property="Foreground" Value="{DynamicResource CheckBoxForeground}" /> <Setter Property="Foreground" Value="{DynamicResource CheckBoxForeground}" />
<Setter Property="Background" Value="{DynamicResource CheckBoxDefaultBackground}" /> <Setter Property="Background" Value="{DynamicResource CheckBoxDefaultBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource CheckBoxDefaultBorderBrush}" /> <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxDefaultBorderBrush}" />
@ -23,12 +21,11 @@
BorderBrush="{TemplateBinding BorderBrush}" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"> CornerRadius="{TemplateBinding CornerRadius}">
<Grid x:Name="RootGrid" ColumnDefinitions="Auto,*"> <Grid ColumnDefinitions="Auto,*">
<Grid <Panel
Grid.Column="0" Grid.Column="0"
TemplatedControl.IsTemplateFocusTarget="True" TemplatedControl.IsTemplateFocusTarget="True"
Margin="0,0,0,0" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
VerticalAlignment="Center">
<Border <Border
x:Name="NormalRectangle" x:Name="NormalRectangle"
Width="{DynamicResource CheckBoxBoxWidth}" Width="{DynamicResource CheckBoxBoxWidth}"
@ -39,21 +36,22 @@
CornerRadius="{TemplateBinding CornerRadius}" CornerRadius="{TemplateBinding CornerRadius}"
UseLayoutRounding="False" /> UseLayoutRounding="False" />
<PathIcon <PathIcon
Name="CheckGlyph" x:Name="CheckGlyph"
Width="{DynamicResource CheckBoxBoxGlyphWidth}" Width="{DynamicResource CheckBoxBoxGlyphWidth}"
Height="{DynamicResource CheckBoxBoxGlyphHeight}" Height="{DynamicResource CheckBoxBoxGlyphHeight}"
Foreground="{DynamicResource CheckBoxGlyphFill}" /> Foreground="{DynamicResource CheckBoxGlyphFill}" />
</Grid> </Panel>
<ContentPresenter <ContentPresenter
x:Name="ContentPresenter" x:Name="PART_ContentPresenter"
Grid.Column="1" Grid.Column="1"
Margin="{TemplateBinding Padding}" Margin="{DynamicResource CheckBoxContentMargin}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="Center" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}" Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" ContentTemplate="{TemplateBinding ContentTemplate}"
IsVisible="{TemplateBinding Content,Converter={x:Static ObjectConverters.IsNotNull}}" IsVisible="{TemplateBinding Content,Converter={x:Static ObjectConverters.IsNotNull}}"
RecognizesAccessKey="True" RecognizesAccessKey="True"
FontSize="{TemplateBinding FontSize}"
TextWrapping="Wrap" /> TextWrapping="Wrap" />
</Grid> </Grid>
</Border> </Border>
@ -78,7 +76,7 @@
<!-- Unchecked Disabled state --> <!-- Unchecked Disabled state -->
<Style Selector="^:disabled"> <Style Selector="^:disabled">
<Style Selector="^ /template/ ContentPresenter#ContentPresenter"> <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" /> <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
</Style> </Style>
<Style Selector="^ /template/ Border#NormalRectangle"> <Style Selector="^ /template/ Border#NormalRectangle">
@ -116,7 +114,7 @@
<!-- Checked Disabled State --> <!-- Checked Disabled State -->
<Style Selector="^:disabled"> <Style Selector="^:disabled">
<Style Selector="^ /template/ ContentPresenter#ContentPresenter"> <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" /> <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
</Style> </Style>
<Style Selector="^ /template/ Border#NormalRectangle"> <Style Selector="^ /template/ Border#NormalRectangle">
@ -159,7 +157,7 @@
<!-- Checked Disabled State --> <!-- Checked Disabled State -->
<Style Selector="^:disabled"> <Style Selector="^:disabled">
<Style Selector="^ /template/ ContentPresenter#ContentPresenter"> <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" /> <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
</Style> </Style>
<Style Selector="^ /template/ Border#NormalRectangle"> <Style Selector="^ /template/ Border#NormalRectangle">

64
src/Semi.Avalonia/Controls/RadioButton.axaml
View File

@ -18,63 +18,59 @@
</Design.PreviewWith> </Design.PreviewWith>
<!-- Theme: Default, Button, Card, PureCard --> <!-- Theme: Default, Button, Card, PureCard -->
<ControlTheme x:Key="{x:Type RadioButton}" TargetType="RadioButton"> <ControlTheme x:Key="{x:Type RadioButton}" TargetType="RadioButton">
<Setter Property="RadioButton.HorizontalAlignment" Value="Left" /> <Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="RadioButton.VerticalAlignment" Value="Top" /> <Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="RadioButton.Cursor" Value="Hand" /> <Setter Property="Cursor" Value="Hand" />
<Setter Property="RadioButton.HorizontalContentAlignment" Value="Left" /> <Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="RadioButton.VerticalContentAlignment" Value="Center" /> <Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="RadioButton.FontSize" Value="{DynamicResource RadioButtonFontSize}" /> <Setter Property="FontSize" Value="{DynamicResource RadioButtonFontSize}" />
<Setter Property="RadioButton.CornerRadius" Value="{DynamicResource RadioButtonBoxCornerRadius}" /> <Setter Property="CornerRadius" Value="{DynamicResource RadioButtonBoxCornerRadius}" />
<Setter Property="RadioButton.Foreground" Value="{DynamicResource RadioButtonForeground}" /> <Setter Property="Foreground" Value="{DynamicResource RadioButtonForeground}" />
<Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonDefaultBackground}" /> <Setter Property="Background" Value="{DynamicResource RadioButtonDefaultBackground}" />
<Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonDefaultBorderBrush}" /> <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonDefaultBorderBrush}" />
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="RadioButton"> <ControlTemplate TargetType="RadioButton">
<Border <Border
Name="RootBorder" x:Name="RootBorder"
Margin="{TemplateBinding Margin}"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}" Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"> CornerRadius="{TemplateBinding CornerRadius}">
<Grid ColumnDefinitions="Auto,*"> <Grid ColumnDefinitions="Auto,*">
<Grid <Panel
Grid.Column="0" Grid.Column="0"
TemplatedControl.IsTemplateFocusTarget="True" TemplatedControl.IsTemplateFocusTarget="True"
Margin="{DynamicResource RadioButtonIconMargin}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"> VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Ellipse <Ellipse
Name="OuterEllipse" x:Name="OuterEllipse"
Width="{DynamicResource RadioButtonIconRadius}" Width="{DynamicResource RadioButtonIconRadius}"
Height="{DynamicResource RadioButtonIconRadius}" Height="{DynamicResource RadioButtonIconRadius}"
Fill="{DynamicResource RadioButtonUncheckIconDefaultBackground}" Fill="{DynamicResource RadioButtonUncheckIconDefaultBackground}"
Stroke="{DynamicResource RadioButtonUncheckIconDefaultBorderBrush}" Stroke="{DynamicResource RadioButtonUncheckIconDefaultBorderBrush}"
StrokeThickness="1" StrokeThickness="{DynamicResource RadioButtonUncheckIconDefaultThickness}"
UseLayoutRounding="False" /> UseLayoutRounding="False" />
<Ellipse <Ellipse
Name="CheckGlyph" x:Name="CheckGlyph"
Width="{DynamicResource RadioButtonGlyphRadius}" Width="{DynamicResource RadioButtonGlyphRadius}"
Height="{DynamicResource RadioButtonGlyphRadius}" Height="{DynamicResource RadioButtonGlyphRadius}"
Fill="{DynamicResource RadioButtonCheckGlyphFill}" Fill="{DynamicResource RadioButtonCheckGlyphFill}"
Opacity="0"
Stroke="{DynamicResource RadioButtonCheckGlyphFill}" Stroke="{DynamicResource RadioButtonCheckGlyphFill}"
StrokeThickness="0"
UseLayoutRounding="False" /> UseLayoutRounding="False" />
</Grid> </Panel>
<ContentPresenter <ContentPresenter
Name="PART_ContentPresenter" x:Name="PART_ContentPresenter"
Grid.Column="1" Grid.Column="1"
Margin="{DynamicResource RadioButtonContentMargin}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}" Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" ContentTemplate="{TemplateBinding ContentTemplate}"
Foreground="{TemplateBinding Foreground}" Foreground="{TemplateBinding Foreground}"
IsVisible="{TemplateBinding Content,Converter={x:Static ObjectConverters.IsNotNull}}"
RecognizesAccessKey="True" RecognizesAccessKey="True"
TextElement.FontSize="{DynamicResource RadioButtonFontSize}" FontSize="{TemplateBinding FontSize}"
TextElement.Foreground="{DynamicResource RadioButtonForeground}" /> TextWrapping="Wrap" />
</Grid> </Grid>
</Border> </Border>
</ControlTemplate> </ControlTemplate>
@ -96,9 +92,6 @@
<Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPointeroverBorderBrush}" /> <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPointeroverBorderBrush}" />
<Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconPointeroverBackground}" /> <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconPointeroverBackground}" />
</Style> </Style>
<Style Selector="^ /template/ Ellipse#CheckGlyph">
<Setter Property="Opacity" Value="0" />
</Style>
</Style> </Style>
<!-- Unchecked Pressed State --> <!-- Unchecked Pressed State -->
@ -107,9 +100,6 @@
<Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPressedBorderBrush}" /> <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPressedBorderBrush}" />
<Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconPressedBackground}" /> <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconPressedBackground}" />
</Style> </Style>
<Style Selector="^ /template/ Ellipse#CheckGlyph">
<Setter Property="Opacity" Value="0" />
</Style>
</Style> </Style>
<!-- Unchecked Disabled state --> <!-- Unchecked Disabled state -->
@ -118,9 +108,6 @@
<Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDisabledBorderBrush}" /> <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDisabledBorderBrush}" />
<Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconDisabledBackground}" /> <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconDisabledBackground}" />
</Style> </Style>
<Style Selector="^ /template/ Ellipse#CheckGlyph">
<Setter Property="Opacity" Value="0" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter"> <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource RadioButtonDisabledForeground}" /> <Setter Property="Foreground" Value="{DynamicResource RadioButtonDisabledForeground}" />
</Style> </Style>
@ -143,9 +130,6 @@
<Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointeroverBorderBrush}" /> <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointeroverBorderBrush}" />
<Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointeroverBackground}" /> <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointeroverBackground}" />
</Style> </Style>
<Style Selector="^ /template/ Ellipse#CheckGlyph">
<Setter Property="Opacity" Value="1" />
</Style>
</Style> </Style>
<!-- Checked Pressed State --> <!-- Checked Pressed State -->
@ -154,9 +138,6 @@
<Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPressedBorderBrush}" /> <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPressedBorderBrush}" />
<Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPressedBackground}" /> <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPressedBackground}" />
</Style> </Style>
<Style Selector="^ /template/ Ellipse#CheckGlyph">
<Setter Property="Opacity" Value="1" />
</Style>
</Style> </Style>
<!-- Checked Disabled State --> <!-- Checked Disabled State -->
@ -165,9 +146,6 @@
<Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconDisabledBorderBrush}" /> <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconDisabledBorderBrush}" />
<Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconDisabledBackground}" /> <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconDisabledBackground}" />
</Style> </Style>
<Style Selector="^ /template/ Ellipse#CheckGlyph">
<Setter Property="Opacity" Value="1" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter"> <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource RadioButtonDisabledForeground}" /> <Setter Property="Foreground" Value="{DynamicResource RadioButtonDisabledForeground}" />
</Style> </Style>

2
src/Semi.Avalonia/Themes/Shared/CheckBox.axaml
View File

@ -2,6 +2,8 @@
<x:Double x:Key="CheckBoxFontSize">14</x:Double> <x:Double x:Key="CheckBoxFontSize">14</x:Double>
<x:Double x:Key="CheckBoxBoxWidth">16</x:Double> <x:Double x:Key="CheckBoxBoxWidth">16</x:Double>
<x:Double x:Key="CheckBoxBoxHeight">16</x:Double> <x:Double x:Key="CheckBoxBoxHeight">16</x:Double>
<Thickness x:Key="CheckBoxContentMargin">8 0 0 0</Thickness>
<x:Double x:Key="CheckBoxBoxGlyphWidth">10</x:Double> <x:Double x:Key="CheckBoxBoxGlyphWidth">10</x:Double>
<x:Double x:Key="CheckBoxBoxGlyphHeight">10</x:Double> <x:Double x:Key="CheckBoxBoxGlyphHeight">10</x:Double>

3
src/Semi.Avalonia/Themes/Shared/RadioButton.axaml
View File

@ -5,6 +5,9 @@
<x:Double x:Key="RadioButtonFontSize">14</x:Double> <x:Double x:Key="RadioButtonFontSize">14</x:Double>
<Thickness x:Key="RadioButtonIconMargin">0 2 8 0</Thickness> <Thickness x:Key="RadioButtonIconMargin">0 2 8 0</Thickness>
<x:Double x:Key="RadioButtonUncheckIconDefaultThickness">1</x:Double>
<Thickness x:Key="RadioButtonContentMargin">8 0 0 0</Thickness>
<!-- ButtonRadioButton --> <!-- ButtonRadioButton -->
<CornerRadius x:Key="RadioButtonBoxCornerRadius">3</CornerRadius> <CornerRadius x:Key="RadioButtonBoxCornerRadius">3</CornerRadius>