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

Merge pull request #205 from irihitech/CheckBox

Browse Source 
CheckBox Border & SimpleCheckBox theme
This commit is contained in:
Dong Bin 2023-06-07 22:11:17 +08:00 committed by GitHub
commit c79f696278
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 269 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
demo/Semi.Avalonia.Demo/Pages/CheckBoxDemo.axaml
View File

@ -26,6 +26,27 @@
</CheckBox>
</StackPanel>
<CheckBox Width="120" HorizontalAlignment="Left">Checkbox should wrap its text</CheckBox>
<TextBlock Text="SimpleCheckBox" />
<StackPanel Orientation="Horizontal">
<CheckBox Theme="{StaticResource SimpleCheckBox}" />
<CheckBox IsChecked="True" Theme="{StaticResource SimpleCheckBox}" />
<CheckBox
IsChecked="{x:Null}"
IsThreeState="True"
Theme="{StaticResource SimpleCheckBox}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<CheckBox IsEnabled="False" Theme="{StaticResource SimpleCheckBox}" />
<CheckBox
IsChecked="True"
IsEnabled="False"
Theme="{StaticResource SimpleCheckBox}" />
<CheckBox
IsChecked="{x:Null}"
IsEnabled="False"
IsThreeState="True"
Theme="{StaticResource SimpleCheckBox}" />
</StackPanel>
<TextBlock Margin="0,16" Text="CardCheckBox" />
<StackPanel Orientation="Horizontal">
<CheckBox Width="300" Theme="{DynamicResource CardCheckBox}">

71
demo/Semi.Avalonia.Demo/Pages/RadioButtonDemo.axaml
View File

@ -23,25 +23,28 @@
<RadioButton Classes="Small" Theme="{DynamicResource ButtonRadioButton}">小1</RadioButton>
<RadioButton
Classes="Small"
Theme="{DynamicResource ButtonRadioButton}"
IsChecked="True">
IsChecked="True"
Theme="{DynamicResource ButtonRadioButton}">
小2
</RadioButton>
</StackPanel>
</Border>
<Border Margin="8 0" HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
<Border
Margin="8,0"
HorizontalAlignment="Left"
Theme="{StaticResource RadioButtonGroupBorder}">
<StackPanel Orientation="Horizontal">
<RadioButton
Classes="Small"
Theme="{DynamicResource ButtonRadioButton}"
IsEnabled="False">
IsEnabled="False"
Theme="{DynamicResource ButtonRadioButton}">
小1
</RadioButton>
<RadioButton
Classes="Small"
Theme="{DynamicResource ButtonRadioButton}"
IsChecked="True"
IsEnabled="False">
IsEnabled="False"
Theme="{DynamicResource ButtonRadioButton}">
小2
</RadioButton>
</StackPanel>
@ -51,16 +54,19 @@
<Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
<StackPanel Orientation="Horizontal">
<RadioButton Theme="{DynamicResource ButtonRadioButton}">默认1</RadioButton>
<RadioButton Theme="{DynamicResource ButtonRadioButton}" IsChecked="True">默认2</RadioButton>
<RadioButton IsChecked="True" Theme="{DynamicResource ButtonRadioButton}">默认2</RadioButton>
</StackPanel>
</Border>
<Border Margin="8 0" HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
<Border
Margin="8,0"
HorizontalAlignment="Left"
Theme="{StaticResource RadioButtonGroupBorder}">
<StackPanel Orientation="Horizontal">
<RadioButton Theme="{DynamicResource ButtonRadioButton}" IsEnabled="False">默认1</RadioButton>
<RadioButton IsEnabled="False" Theme="{DynamicResource ButtonRadioButton}">默认1</RadioButton>
<RadioButton
Theme="{DynamicResource ButtonRadioButton}"
IsChecked="True"
IsEnabled="False"
IsChecked="True">
Theme="{DynamicResource ButtonRadioButton}">
默认2
</RadioButton>
</StackPanel>
@ -72,25 +78,28 @@
<RadioButton Classes="Large" Theme="{DynamicResource ButtonRadioButton}">大1</RadioButton>
<RadioButton
Classes="Large"
Theme="{DynamicResource ButtonRadioButton}"
IsChecked="True">
IsChecked="True"
Theme="{DynamicResource ButtonRadioButton}">
大2
</RadioButton>
</StackPanel>
</Border>
<Border Margin="8 0" HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
<Border
Margin="8,0"
HorizontalAlignment="Left"
Theme="{StaticResource RadioButtonGroupBorder}">
<StackPanel Orientation="Horizontal">
<RadioButton
Classes="Large"
Theme="{DynamicResource ButtonRadioButton}"
IsEnabled="False">
IsEnabled="False"
Theme="{DynamicResource ButtonRadioButton}">
大1
</RadioButton>
<RadioButton
Classes="Large"
Theme="{DynamicResource ButtonRadioButton}"
IsChecked="True"
IsEnabled="False">
IsEnabled="False"
Theme="{DynamicResource ButtonRadioButton}">
大2
</RadioButton>
</StackPanel>
@ -104,7 +113,10 @@
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</StackPanel>
</RadioButton>
<RadioButton IsChecked="True" Width="300" Theme="{DynamicResource CardRadioButton}">
<RadioButton
Width="300"
IsChecked="True"
Theme="{DynamicResource CardRadioButton}">
<StackPanel>
<TextBlock FontWeight="Bold">单选框标题</TextBlock>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
@ -112,16 +124,19 @@
</RadioButton>
</StackPanel>
<StackPanel Orientation="Horizontal">
<RadioButton IsEnabled="False" Width="300" Theme="{DynamicResource CardRadioButton}">
<RadioButton
Width="300"
IsEnabled="False"
Theme="{DynamicResource CardRadioButton}">
<StackPanel>
<TextBlock FontWeight="Bold">单选框标题</TextBlock>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</StackPanel>
</RadioButton>
<RadioButton
Width="300"
IsChecked="True"
IsEnabled="False"
Width="300"
Theme="{DynamicResource CardRadioButton}">
<StackPanel>
<TextBlock FontWeight="Bold">单选框标题</TextBlock>
@ -137,7 +152,10 @@
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</StackPanel>
</RadioButton>
<RadioButton IsChecked="True" Width="300" Theme="{DynamicResource PureCardRadioButton}">
<RadioButton
Width="300"
IsChecked="True"
Theme="{DynamicResource PureCardRadioButton}">
<StackPanel>
<TextBlock FontWeight="Bold">单选框标题</TextBlock>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
@ -145,16 +163,19 @@
</RadioButton>
</StackPanel>
<StackPanel Orientation="Horizontal">
<RadioButton IsEnabled="False" Width="300" Theme="{DynamicResource PureCardRadioButton}">
<RadioButton
Width="300"
IsEnabled="False"
Theme="{DynamicResource PureCardRadioButton}">
<StackPanel>
<TextBlock FontWeight="Bold">单选框标题</TextBlock>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</StackPanel>
</RadioButton>
<RadioButton
Width="300"
IsChecked="True"
IsEnabled="False"
Width="300"
Theme="{DynamicResource PureCardRadioButton}">
<StackPanel>
<TextBlock FontWeight="Bold">单选框标题</TextBlock>

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

@ -4,11 +4,11 @@
x:CompileBindings="True">
<ControlTheme x:Key="{x:Type CheckBox}" TargetType="CheckBox">
<Setter Property="Padding" Value="8,0,0,0" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="FontSize" Value="{DynamicResource CheckBoxFontSize}" />
<Setter Property="CornerRadius" Value="{DynamicResource CheckBoxBoxCornerRadius}" />
<Setter Property="MinHeight" Value="32" />
@ -17,50 +17,45 @@
<Setter Property="BorderBrush" Value="{DynamicResource CheckBoxDefaultBorderBrush}" />
<Setter Property="Template">
<ControlTemplate TargetType="CheckBox">
<Grid x:Name="RootGrid" ColumnDefinitions="Auto,*">
<Border
x:Name="PART_Border"
Grid.Column="0"
Grid.ColumnSpan="2"
HorizontalAlignment="Center"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}" />
<Grid
Grid.Column="0"
Margin="0,0,0,0"
VerticalAlignment="Center">
<Border
x:Name="NormalRectangle"
Width="{DynamicResource CheckBoxBoxWidth}"
Height="{DynamicResource CheckBoxBoxHeight}"
Background="{DynamicResource CheckBoxDefaultBackground}"
BorderBrush="{DynamicResource CheckBoxDefaultBorderBrush}"
BorderThickness="{DynamicResource CheckBoxBoxBorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
UseLayoutRounding="False" />
<PathIcon
Name="CheckGlyph"
Width="{DynamicResource CheckBoxBoxGlyphWidth}"
Height="{DynamicResource CheckBoxBoxGlyphHeight}"
Foreground="{DynamicResource CheckBoxGlyphFill}" />
<Border
x:Name="RootBorder"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<Grid x:Name="RootGrid" ColumnDefinitions="Auto,*">
<Grid
Grid.Column="0"
Margin="0,0,0,0"
VerticalAlignment="Center">
<Border
x:Name="NormalRectangle"
Width="{DynamicResource CheckBoxBoxWidth}"
Height="{DynamicResource CheckBoxBoxHeight}"
Background="{DynamicResource CheckBoxDefaultBackground}"
BorderBrush="{DynamicResource CheckBoxDefaultBorderBrush}"
BorderThickness="{DynamicResource CheckBoxBoxBorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
UseLayoutRounding="False" />
<PathIcon
Name="CheckGlyph"
Width="{DynamicResource CheckBoxBoxGlyphWidth}"
Height="{DynamicResource CheckBoxBoxGlyphHeight}"
Foreground="{DynamicResource CheckBoxGlyphFill}" />
</Grid>
<ContentPresenter
x:Name="ContentPresenter"
Grid.Column="1"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="Center"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
IsVisible="{TemplateBinding Content,Converter={x:Static ObjectConverters.IsNotNull}}"
RecognizesAccessKey="True"
TextWrapping="Wrap" />
</Grid>
<ContentPresenter
x:Name="ContentPresenter"
Grid.Column="1"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="Center"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
IsVisible="{TemplateBinding Content,
Converter={x:Static ObjectConverters.IsNotNull}}"
RecognizesAccessKey="True"
TextWrapping="Wrap" />
</Grid>
</Border>
</ControlTemplate>
</Setter>
@ -178,6 +173,155 @@
</Style>
</ControlTheme>
<ControlTheme x:Key="SimpleCheckBox" TargetType="CheckBox">
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="FontSize" Value="{DynamicResource CheckBoxFontSize}" />
<Setter Property="CornerRadius" Value="{DynamicResource CheckBoxBoxCornerRadius}" />
<Setter Property="Foreground" Value="{DynamicResource CheckBoxForeground}" />
<Setter Property="Background" Value="{DynamicResource CheckBoxDefaultBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource CheckBoxDefaultBorderBrush}" />
<Setter Property="Template">
<ControlTemplate TargetType="CheckBox">
<Border
x:Name="RootBorder"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<Grid x:Name="RootGrid" ColumnDefinitions="Auto,*">
<Grid
Grid.Column="0"
Margin="0,0,0,0"
VerticalAlignment="Center">
<Border
x:Name="NormalRectangle"
Width="{DynamicResource CheckBoxBoxWidth}"
Height="{DynamicResource CheckBoxBoxHeight}"
Background="{DynamicResource CheckBoxDefaultBackground}"
BorderBrush="{DynamicResource CheckBoxDefaultBorderBrush}"
BorderThickness="{DynamicResource CheckBoxBoxBorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
UseLayoutRounding="False" />
<PathIcon
Name="CheckGlyph"
Width="{DynamicResource CheckBoxBoxGlyphWidth}"
Height="{DynamicResource CheckBoxBoxGlyphHeight}"
Foreground="{DynamicResource CheckBoxGlyphFill}" />
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter>
<!-- Unchecked Pointerover State -->
<Style Selector="^:pointerover">
<Style Selector="^ /template/ Border#NormalRectangle">
<Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPointeroverBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource CheckBoxPointeroverBackground}" />
</Style>
</Style>
<!-- Unchecked Pressed State -->
<Style Selector="^:pressed">
<Style Selector="^ /template/ Border#NormalRectangle">
<Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPressedBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource CheckBoxPressedBackground}" />
</Style>
</Style>
<!-- Unchecked Disabled state -->
<Style Selector="^:disabled">
<Style Selector="^ /template/ Border#NormalRectangle">
<Setter Property="BorderBrush" Value="{DynamicResource CheckBoxDefaultDisabledBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource CheckBoxDefaultDisabledBackground}" />
</Style>
</Style>
<Style Selector="^:checked">
<Style Selector="^ /template/ Border#NormalRectangle">
<Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDefaultBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDefaultBackground}" />
</Style>
<Style Selector="^ /template/ PathIcon#CheckGlyph">
<Setter Property="Data" Value="{DynamicResource CheckBoxCheckGlyph}" />
<Setter Property="Opacity" Value="1" />
</Style>
<!-- Checked Pointerover State -->
<Style Selector="^:pointerover">
<Style Selector="^ /template/ Border#NormalRectangle">
<Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointeroverBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPointeroverBackground}" />
</Style>
</Style>
<!-- Checked Pressed State -->
<Style Selector="^:pressed">
<Style Selector="^ /template/ Border#NormalRectangle">
<Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPressedBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPressedBackground}" />
</Style>
</Style>
<!-- Checked Disabled State -->
<Style Selector="^:disabled">
<Style Selector="^ /template/ Border#NormalRectangle">
<Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDisabledBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDisabledBackground}" />
</Style>
<Style Selector="^ /template/ Path#CheckGlyph">
<Setter Property="Fill" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
</Style>
</Style>
</Style>
<Style Selector="^:indeterminate">
<Style Selector="^ /template/ Border#NormalRectangle">
<Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDefaultBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDefaultBackground}" />
</Style>
<Style Selector="^ /template/ PathIcon#CheckGlyph">
<Setter Property="Data" Value="{DynamicResource CheckBoxIndeterminateGlyph}" />
<Setter Property="Opacity" Value="1" />
</Style>
<!-- Checked Pointerover State -->
<Style Selector="^:pointerover">
<Style Selector="^ /template/ Border#NormalRectangle">
<Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointeroverBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPointeroverBackground}" />
</Style>
</Style>
<!-- Checked Pressed State -->
<Style Selector="^:pressed">
<Style Selector="^ /template/ Border#NormalRectangle">
<Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPressedBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPressedBackground}" />
</Style>
</Style>
<!-- Checked Disabled State -->
<Style Selector="^:disabled">
<Style Selector="^ /template/ Border#NormalRectangle">
<Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDisabledBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDisabledBackground}" />
</Style>
<Style Selector="^ /template/ Path#CheckGlyph">
<Setter Property="Fill" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
</Style>
</Style>
</Style>
</ControlTheme>
<ControlTheme x:Key="CardCheckBox" TargetType="CheckBox">
<Setter Property="Cursor" Value="Hand" />
<Setter Property="VerticalContentAlignment" Value="Center" />

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

@ -24,6 +24,10 @@
<Setter Property="RadioButton.HorizontalContentAlignment" Value="Left" />
<Setter Property="RadioButton.VerticalContentAlignment" Value="Center" />
<Setter Property="RadioButton.FontSize" Value="{DynamicResource RadioButtonFontSize}" />
<Setter Property="RadioButton.CornerRadius" Value="{DynamicResource RadioButtonBoxCornerRadius}" />
<Setter Property="RadioButton.Foreground" Value="{DynamicResource RadioButtonForeground}" />
<Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonDefaultBackground}" />
<Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonDefaultBorderBrush}" />
<Setter Property="Template">
<ControlTemplate TargetType="RadioButton">
<Border

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

@ -32,6 +32,9 @@
<SolidColorBrush x:Key="RadioButtonCheckGlyphFill" Color="White" />
<SolidColorBrush x:Key="RadioButtonForeground" Color="#F9F9F9" />
<SolidColorBrush x:Key="RadioButtonDefaultBackground" Color="Transparent" />
<SolidColorBrush x:Key="RadioButtonDefaultBorderBrush" Opacity="0.35" Color="#F9F9F9" />
<CornerRadius x:Key="RadioButtonBoxCornerRadius">3</CornerRadius>
<SolidColorBrush x:Key="RadioButtonGroupBackground" Opacity="0.12" Color="White" />

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

@ -32,6 +32,9 @@
<SolidColorBrush x:Key="RadioButtonCheckGlyphFill" Color="White" />
<SolidColorBrush x:Key="RadioButtonForeground" Color="#1C1F23" />
<SolidColorBrush x:Key="RadioButtonDefaultBackground" Color="Transparent" />
<SolidColorBrush x:Key="RadioButtonDefaultBorderBrush" Opacity="0.35" Color="#1C1F23" />
<CornerRadius x:Key="RadioButtonBoxCornerRadius">3</CornerRadius>
<SolidColorBrush x:Key="RadioButtonGroupBackground" Opacity="0.05" Color="#2E3238" />