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

feat: add pure card theme for RadioButton.

Browse Source
This commit is contained in:
rabbitism 2022-12-09 22:26:57 +08:00
parent c509d2024a
commit 6f9ed6d15b
3 changed files with 135 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/Semi.Avalonia.Demo/Pages/RadioButtonDemo.axaml
View File

@ -1,8 +1,7 @@
<UserControl <UserControl
x:Class="Semi.Avalonia.Demo.Pages.RadioButtonDemo" xmlns="https://github.com/avaloniaui" x:Class="Semi.Avalonia.Demo.Pages.RadioButtonDemo" xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 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" d:DesignHeight="450" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
d:DesignWidth="800" mc:Ignorable="d">
<StackPanel <StackPanel
Margin="20" HorizontalAlignment="Left" Margin="20" HorizontalAlignment="Left"
Spacing="20"> Spacing="20">
@ -25,27 +24,48 @@
<RadioButton Theme="{DynamicResource ButtonRadioButton}">默认2</RadioButton> <RadioButton Theme="{DynamicResource ButtonRadioButton}">默认2</RadioButton>
</StackPanel> </StackPanel>
</Border> </Border>
<Border Theme="{StaticResource RadioButtonGroupBorder}"> <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Horizontal">
<RadioButton Classes="Large" Theme="{DynamicResource ButtonRadioButton}">大1</RadioButton> <RadioButton Classes="Large" Theme="{DynamicResource ButtonRadioButton}">大1</RadioButton>
<RadioButton Classes="Large" Theme="{DynamicResource ButtonRadioButton}">大2</RadioButton> <RadioButton Classes="Large" Theme="{DynamicResource ButtonRadioButton}">大2</RadioButton>
</StackPanel> </StackPanel>
</Border> </Border>
<TextBlock Text="Radio Button as Card" /> <TextBlock Text="Radio Button as Card" />
<StackPanel Width="300"> <StackPanel Orientation="Horizontal">
<RadioButton Theme="{DynamicResource CardRadioButton}"> <RadioButton Width="300" Theme="{DynamicResource CardRadioButton}">
<StackPanel> <StackPanel>
<TextBlock FontWeight="Bold">单选框标题</TextBlock> <TextBlock FontWeight="Bold">单选框标题</TextBlock>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock> <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</StackPanel> </StackPanel>
</RadioButton> </RadioButton>
<RadioButton Theme="{DynamicResource CardRadioButton}"> <RadioButton Width="300" Theme="{DynamicResource CardRadioButton}">
<StackPanel> <StackPanel>
<TextBlock FontWeight="Bold">单选框标题</TextBlock> <TextBlock FontWeight="Bold">单选框标题</TextBlock>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock> <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</StackPanel> </StackPanel>
</RadioButton> </RadioButton>
<RadioButton Theme="{DynamicResource CardRadioButton}"> <RadioButton Width="300" Theme="{DynamicResource CardRadioButton}">
<StackPanel>
<TextBlock FontWeight="Bold">单选框标题</TextBlock>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</StackPanel>
</RadioButton>
</StackPanel>
<TextBlock Text="Radio Button as Pure Card" />
<StackPanel Orientation="Horizontal">
<RadioButton Width="300" Theme="{DynamicResource PureCardRadioButton}">
<StackPanel>
<TextBlock FontWeight="Bold">单选框标题</TextBlock>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</StackPanel>
</RadioButton>
<RadioButton Width="300" Theme="{DynamicResource PureCardRadioButton}">
<StackPanel>
<TextBlock FontWeight="Bold">单选框标题</TextBlock>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</StackPanel>
</RadioButton>
<RadioButton Width="300" Theme="{DynamicResource PureCardRadioButton}">
<StackPanel> <StackPanel>
<TextBlock FontWeight="Bold">单选框标题</TextBlock> <TextBlock FontWeight="Bold">单选框标题</TextBlock>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock> <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>

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

@ -1,7 +1,6 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Design.PreviewWith> <Design.PreviewWith>
<StackPanel> <StackPanel Margin="20">
<RadioButton Theme="{StaticResource ButtonRadioButton}">Hello Button</RadioButton>
<RadioButton>Hello Button2</RadioButton> <RadioButton>Hello Button2</RadioButton>
<RadioButton>Hello Button3</RadioButton> <RadioButton>Hello Button3</RadioButton>
<Border Theme="{StaticResource RadioButtonGroupBorder}"> <Border Theme="{StaticResource RadioButtonGroupBorder}">
@ -10,14 +9,15 @@
<RadioButton Theme="{StaticResource ButtonRadioButton}">Hello Button3</RadioButton> <RadioButton Theme="{StaticResource ButtonRadioButton}">Hello Button3</RadioButton>
</StackPanel> </StackPanel>
</Border> </Border>
<RadioButton Theme="{StaticResource CardRadioButton}">Hello Button3</RadioButton> <RadioButton Theme="{StaticResource PureCardRadioButton}">Hello Button3</RadioButton>
<RadioButton Theme="{StaticResource CardRadioButton}">Hello Button3</RadioButton> <RadioButton Theme="{StaticResource PureCardRadioButton}">Hello Button3</RadioButton>
</StackPanel> </StackPanel>
</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="RadioButton.HorizontalAlignment" Value="Left" />
<Setter Property="RadioButton.VerticalAlignment" Value="Top" /> <Setter Property="RadioButton.VerticalAlignment" Value="Top" />
<Setter Property="RadioButton.Cursor" Value="Hand" />
<Setter Property="RadioButton.HorizontalContentAlignment" Value="Left" /> <Setter Property="RadioButton.HorizontalContentAlignment" Value="Left" />
<Setter Property="RadioButton.VerticalContentAlignment" Value="Center" /> <Setter Property="RadioButton.VerticalContentAlignment" Value="Center" />
<Setter Property="RadioButton.FontSize" Value="{DynamicResource RadioButtonFontSize}" /> <Setter Property="RadioButton.FontSize" Value="{DynamicResource RadioButtonFontSize}" />
@ -138,6 +138,7 @@
<ControlTheme x:Key="ButtonRadioButton" TargetType="RadioButton"> <ControlTheme x:Key="ButtonRadioButton" TargetType="RadioButton">
<Setter Property="RadioButton.CornerRadius" Value="{DynamicResource RadioButtonButtonCornerRadius}" /> <Setter Property="RadioButton.CornerRadius" Value="{DynamicResource RadioButtonButtonCornerRadius}" />
<Setter Property="RadioButton.Margin" Value="2" /> <Setter Property="RadioButton.Margin" Value="2" />
<Setter Property="RadioButton.Cursor" Value="Hand" />
<Setter Property="RadioButton.FontWeight" Value="{DynamicResource RadioButtonButtonFontWeight}" /> <Setter Property="RadioButton.FontWeight" Value="{DynamicResource RadioButtonButtonFontWeight}" />
<Setter Property="RadioButton.FontSize" Value="{DynamicResource RadioButtonButtonDefaultFontSize}" /> <Setter Property="RadioButton.FontSize" Value="{DynamicResource RadioButtonButtonDefaultFontSize}" />
<Setter Property="RadioButton.Padding" Value="{DynamicResource RadioButtonButtonDefaultPadding}" /> <Setter Property="RadioButton.Padding" Value="{DynamicResource RadioButtonButtonDefaultPadding}" />
@ -184,13 +185,14 @@
<ControlTheme x:Key="CardRadioButton" TargetType="RadioButton"> <ControlTheme x:Key="CardRadioButton" TargetType="RadioButton">
<Setter Property="RadioButton.Padding" Value="{DynamicResource RadioButtonCardPadding}" /> <Setter Property="RadioButton.Padding" Value="{DynamicResource RadioButtonCardPadding}" />
<Setter Property="RadioButton.BorderBrush" Value="BLue" />
<Setter Property="RadioButton.BorderThickness" Value="1" /> <Setter Property="RadioButton.BorderThickness" Value="1" />
<Setter Property="RadioButton.CornerRadius" Value="{DynamicResource RadioButtonCardCornerRadius}" />
<Setter Property="RadioButton.Cursor" Value="Hand" />
<Setter Property="RadioButton.HorizontalAlignment" Value="Left" /> <Setter Property="RadioButton.HorizontalAlignment" Value="Left" />
<Setter Property="RadioButton.VerticalAlignment" Value="Top" /> <Setter Property="RadioButton.VerticalAlignment" Value="Top" />
<Setter Property="RadioButton.HorizontalContentAlignment" Value="Left" /> <Setter Property="RadioButton.HorizontalContentAlignment" Value="Left" />
<Setter Property="RadioButton.VerticalContentAlignment" Value="Center" /> <Setter Property="RadioButton.VerticalContentAlignment" Value="Center" />
<Setter Property="RadioButton.Background" Value="Transparent" /> <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardDefaultBackground}" />
<Setter Property="RadioButton.FontSize" Value="{DynamicResource RadioButtonFontSize}" /> <Setter Property="RadioButton.FontSize" Value="{DynamicResource RadioButtonFontSize}" />
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="RadioButton"> <ControlTemplate TargetType="RadioButton">
@ -239,6 +241,8 @@
<!-- PointerOver State --> <!-- PointerOver State -->
<Style Selector="^:checked"> <Style Selector="^:checked">
<Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardCheckedBackground}" />
<Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardCheckDefaultBorderBrush}" />
<Style Selector="^ /template/ Ellipse#OuterEllipse"> <Style Selector="^ /template/ Ellipse#OuterEllipse">
<Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconDefaultBorderBrush}" /> <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconDefaultBorderBrush}" />
<Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconDefaultBackground}" /> <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconDefaultBackground}" />
@ -253,19 +257,29 @@
<Style Selector="^:disabled /template/ Ellipse#CheckGlyph"> <Style Selector="^:disabled /template/ Ellipse#CheckGlyph">
<Setter Property="Ellipse.Opacity" Value="1" /> <Setter Property="Ellipse.Opacity" Value="1" />
</Style> </Style>
<Style Selector="^:pointerover /template/ Ellipse#OuterEllipse"> <Style Selector="^:pointerover">
<Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointOverBorderBrush}" /> <Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardCheckPointOverBorderBrush}" />
<Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointOverBackground}" /> <Style Selector="^ /template/ Ellipse#OuterEllipse">
<Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointOverBorderBrush}" />
<Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointOverBackground}" />
</Style>
<Style Selector="^ /template/ Ellipse#OuterEllipse">
<Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointOverBorderBrush}" />
<Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointOverBackground}" />
</Style>
<Style Selector="^ /template/ Ellipse#CheckGlyph">
<Setter Property="Ellipse.Opacity" Value="1" />
</Style>
</Style> </Style>
<Style Selector="^:pointerover /template/ Ellipse#CheckGlyph"> <Style Selector="^:pressed">
<Setter Property="Ellipse.Opacity" Value="1" /> <Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardCheckPressedBorderBrush}" />
</Style> <Style Selector="^ /template/ Ellipse#OuterEllipse">
<Style Selector="^:pressed /template/ Ellipse#OuterEllipse"> <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">
<Style Selector="^:pressed /template/ Ellipse#CheckGlyph"> <Setter Property="Ellipse.Opacity" Value="1" />
<Setter Property="Ellipse.Opacity" Value="1" /> </Style>
</Style> </Style>
</Style> </Style>
<Style Selector="^:unchecked"> <Style Selector="^:unchecked">
@ -283,19 +297,72 @@
<Style Selector="^:disabled /template/ Ellipse#CheckGlyph"> <Style Selector="^:disabled /template/ Ellipse#CheckGlyph">
<Setter Property="Ellipse.Opacity" Value="0" /> <Setter Property="Ellipse.Opacity" Value="0" />
</Style> </Style>
<Style Selector="^:pointerover /template/ Ellipse#OuterEllipse"> <Style Selector="^:pointerover">
<Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPointOverBorderBrush}" /> <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardUncheckPointOverBackground}" />
<Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconPointOverBackground}" /> <Style Selector="^ /template/ Ellipse#OuterEllipse">
<Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPointOverBorderBrush}" />
</Style>
<Style Selector="^ /template/ Ellipse#CheckGlyph">
<Setter Property="Ellipse.Opacity" Value="0" />
</Style>
</Style> </Style>
<Style Selector="^:pointerover /template/ Ellipse#CheckGlyph"> <Style Selector="^:pressed">
<Setter Property="Ellipse.Opacity" Value="0" /> <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardUncheckPressedBackground}" />
<Style Selector="^ /template/ Ellipse#OuterEllipse">
<Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPressedBorderBrush}" />
</Style>
<Style Selector="^ /template/ Ellipse#CheckGlyph">
<Setter Property="Ellipse.Opacity" Value="0" />
</Style>
</Style> </Style>
<Style Selector="^:pressed /template/ Ellipse#OuterEllipse"> </Style>
<Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPressedBorderBrush}" /> </ControlTheme>
<Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconPressedBackground}" />
<ControlTheme x:Key="PureCardRadioButton" TargetType="RadioButton">
<Setter Property="RadioButton.CornerRadius" Value="{DynamicResource RadioButtonCardCornerRadius}" />
<Setter Property="RadioButton.Cursor" Value="Hand" />
<Setter Property="RadioButton.BorderThickness" Value="1" />
<Setter Property="RadioButton.FontSize" Value="{DynamicResource RadioButtonFontSize}" />
<Setter Property="RadioButton.Padding" Value="{DynamicResource RadioButtonCardPadding}" />
<Setter Property="RadioButton.Foreground" Value="{DynamicResource RadioButtonButtonUncheckedForeground}" />
<Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardDefaultBackground}" />
<Setter Property="RadioButton.Template">
<ControlTemplate TargetType="RadioButton">
<ContentPresenter
x:Name="PART_ContentPresenter"
Margin="{TemplateBinding Margin}"
Padding="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
CornerRadius="{TemplateBinding CornerRadius}"
RecognizesAccessKey="True"
TextElement.FontSize="{TemplateBinding FontSize}"
TextElement.FontWeight="{TemplateBinding FontWeight}"
UseLayoutRounding="False" />
</ControlTemplate>
</Setter>
<Style Selector="^:checked">
<Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardCheckedBackground}" />
<Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardCheckDefaultBorderBrush}" />
<Style Selector="^:pointerover">
<Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardCheckPointOverBorderBrush}" />
</Style> </Style>
<Style Selector="^:pressed /template/ Ellipse#CheckGlyph"> <Style Selector="^:pressed">
<Setter Property="Ellipse.Opacity" Value="0" /> <Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardCheckPressedBorderBrush}" />
</Style>
</Style>
<Style Selector="^:unchecked">
<Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardDefaultBorderBrush}" />
<Style Selector="^:pointerover">
<Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardUncheckPointOverBackground}" />
</Style>
<Style Selector="^:pressed">
<Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardUncheckPressedBackground}" />
</Style> </Style>
</Style> </Style>
</ControlTheme> </ControlTheme>

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

@ -51,4 +51,17 @@
<Thickness x:Key="RadioButtonCardPadding">16 12</Thickness> <Thickness x:Key="RadioButtonCardPadding">16 12</Thickness>
<SolidColorBrush x:Key="RadioButtonCardDefaultBackground" Color="Transparent" />
<SolidColorBrush x:Key="RadioButtonCardDefaultBorderBrush" Color="Transparent" />
<SolidColorBrush x:Key="RadioButtonCardCheckedBackground" Color="#EAF5FF" />
<SolidColorBrush x:Key="RadioButtonCardCheckDefaultBorderBrush" Color="#0077FA" />
<SolidColorBrush x:Key="RadioButtonCardCheckPointOverBorderBrush" Color="#0062D6" />
<SolidColorBrush x:Key="RadioButtonCardCheckPressedBorderBrush" Color="#004FB3" />
<SolidColorBrush x:Key="RadioButtonCardCheckDisabledBorderBrush" Color="#98CDFD" />
<SolidColorBrush x:Key="RadioButtonCardUncheckPointOverBackground" Opacity="0.05" Color="#2E3238" />
<SolidColorBrush x:Key="RadioButtonCardUncheckPressedBackground" Opacity="0.09" Color="#2E3238" />
<SolidColorBrush x:Key="RadioButtonCardUncheckDisabledBackground" Opacity="0.05" Color="#2E3238" />
<CornerRadius x:Key="RadioButtonCardCornerRadius">3</CornerRadius>
</ResourceDictionary> </ResourceDictionary>