feat: add pure card theme for RadioButton.
This commit is contained in:
rabbitism
parent
c509d2024a
commit
6f9ed6d15b
@ -1,8 +1,7 @@
|
||||
<UserControl
|
||||
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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="450"
|
||||
d:DesignWidth="800" mc:Ignorable="d">
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
|
||||
<StackPanel
|
||||
Margin="20" HorizontalAlignment="Left"
|
||||
Spacing="20">
|
||||
@ -25,27 +24,48 @@
|
||||
<RadioButton Theme="{DynamicResource ButtonRadioButton}">默认2</RadioButton>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
<Border Theme="{StaticResource RadioButtonGroupBorder}">
|
||||
<Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
|
||||
<StackPanel Orientation="Horizontal">
|
||||
<RadioButton Classes="Large" Theme="{DynamicResource ButtonRadioButton}">大1</RadioButton>
|
||||
<RadioButton Classes="Large" Theme="{DynamicResource ButtonRadioButton}">大2</RadioButton>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
<TextBlock Text="Radio Button as Card" />
|
||||
<StackPanel Width="300">
|
||||
<RadioButton Theme="{DynamicResource CardRadioButton}">
|
||||
<StackPanel Orientation="Horizontal">
|
||||
<RadioButton Width="300" Theme="{DynamicResource CardRadioButton}">
|
||||
<StackPanel>
|
||||
<TextBlock FontWeight="Bold">单选框标题</TextBlock>
|
||||
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
|
||||
</StackPanel>
|
||||
</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>
|
||||
<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>
|
||||
<TextBlock FontWeight="Bold">单选框标题</TextBlock>
|
||||
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
||||
<Design.PreviewWith>
|
||||
<StackPanel>
|
||||
<RadioButton Theme="{StaticResource ButtonRadioButton}">Hello Button</RadioButton>
|
||||
<StackPanel Margin="20">
|
||||
<RadioButton>Hello Button2</RadioButton>
|
||||
<RadioButton>Hello Button3</RadioButton>
|
||||
<Border Theme="{StaticResource RadioButtonGroupBorder}">
|
||||
@ -10,14 +9,15 @@
|
||||
<RadioButton Theme="{StaticResource ButtonRadioButton}">Hello Button3</RadioButton>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
<RadioButton Theme="{StaticResource CardRadioButton}">Hello Button3</RadioButton>
|
||||
<RadioButton Theme="{StaticResource CardRadioButton}">Hello Button3</RadioButton>
|
||||
<RadioButton Theme="{StaticResource PureCardRadioButton}">Hello Button3</RadioButton>
|
||||
<RadioButton Theme="{StaticResource PureCardRadioButton}">Hello Button3</RadioButton>
|
||||
</StackPanel>
|
||||
</Design.PreviewWith>
|
||||
<!-- Theme: Default, Button, Card, PureCard -->
|
||||
<ControlTheme x:Key="{x:Type RadioButton}" TargetType="RadioButton">
|
||||
<Setter Property="RadioButton.HorizontalAlignment" Value="Left" />
|
||||
<Setter Property="RadioButton.VerticalAlignment" Value="Top" />
|
||||
<Setter Property="RadioButton.Cursor" Value="Hand" />
|
||||
<Setter Property="RadioButton.HorizontalContentAlignment" Value="Left" />
|
||||
<Setter Property="RadioButton.VerticalContentAlignment" Value="Center" />
|
||||
<Setter Property="RadioButton.FontSize" Value="{DynamicResource RadioButtonFontSize}" />
|
||||
@ -138,6 +138,7 @@
|
||||
<ControlTheme x:Key="ButtonRadioButton" TargetType="RadioButton">
|
||||
<Setter Property="RadioButton.CornerRadius" Value="{DynamicResource RadioButtonButtonCornerRadius}" />
|
||||
<Setter Property="RadioButton.Margin" Value="2" />
|
||||
<Setter Property="RadioButton.Cursor" Value="Hand" />
|
||||
<Setter Property="RadioButton.FontWeight" Value="{DynamicResource RadioButtonButtonFontWeight}" />
|
||||
<Setter Property="RadioButton.FontSize" Value="{DynamicResource RadioButtonButtonDefaultFontSize}" />
|
||||
<Setter Property="RadioButton.Padding" Value="{DynamicResource RadioButtonButtonDefaultPadding}" />
|
||||
@ -184,13 +185,14 @@
|
||||
|
||||
<ControlTheme x:Key="CardRadioButton" TargetType="RadioButton">
|
||||
<Setter Property="RadioButton.Padding" Value="{DynamicResource RadioButtonCardPadding}" />
|
||||
<Setter Property="RadioButton.BorderBrush" Value="BLue" />
|
||||
<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.VerticalAlignment" Value="Top" />
|
||||
<Setter Property="RadioButton.HorizontalContentAlignment" Value="Left" />
|
||||
<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="Template">
|
||||
<ControlTemplate TargetType="RadioButton">
|
||||
@ -239,6 +241,8 @@
|
||||
|
||||
<!-- PointerOver State -->
|
||||
<Style Selector="^:checked">
|
||||
<Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardCheckedBackground}" />
|
||||
<Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardCheckDefaultBorderBrush}" />
|
||||
<Style Selector="^ /template/ Ellipse#OuterEllipse">
|
||||
<Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconDefaultBorderBrush}" />
|
||||
<Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconDefaultBackground}" />
|
||||
@ -253,21 +257,31 @@
|
||||
<Style Selector="^:disabled /template/ Ellipse#CheckGlyph">
|
||||
<Setter Property="Ellipse.Opacity" Value="1" />
|
||||
</Style>
|
||||
<Style Selector="^:pointerover /template/ Ellipse#OuterEllipse">
|
||||
<Style Selector="^:pointerover">
|
||||
<Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardCheckPointOverBorderBrush}" />
|
||||
<Style Selector="^ /template/ Ellipse#OuterEllipse">
|
||||
<Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointOverBorderBrush}" />
|
||||
<Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointOverBackground}" />
|
||||
</Style>
|
||||
<Style Selector="^:pointerover /template/ Ellipse#CheckGlyph">
|
||||
<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 Selector="^:pressed /template/ Ellipse#OuterEllipse">
|
||||
</Style>
|
||||
<Style Selector="^:pressed">
|
||||
<Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardCheckPressedBorderBrush}" />
|
||||
<Style Selector="^ /template/ Ellipse#OuterEllipse">
|
||||
<Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPressedBorderBrush}" />
|
||||
<Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPressedBackground}" />
|
||||
</Style>
|
||||
<Style Selector="^:pressed /template/ Ellipse#CheckGlyph">
|
||||
<Style Selector="^ /template/ Ellipse#CheckGlyph">
|
||||
<Setter Property="Ellipse.Opacity" Value="1" />
|
||||
</Style>
|
||||
</Style>
|
||||
</Style>
|
||||
<Style Selector="^:unchecked">
|
||||
<Style Selector="^ /template/ Ellipse#OuterEllipse">
|
||||
<Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDefaultBorderBrush}" />
|
||||
@ -283,20 +297,73 @@
|
||||
<Style Selector="^:disabled /template/ Ellipse#CheckGlyph">
|
||||
<Setter Property="Ellipse.Opacity" Value="0" />
|
||||
</Style>
|
||||
<Style Selector="^:pointerover /template/ Ellipse#OuterEllipse">
|
||||
<Style Selector="^:pointerover">
|
||||
<Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardUncheckPointOverBackground}" />
|
||||
<Style Selector="^ /template/ Ellipse#OuterEllipse">
|
||||
<Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPointOverBorderBrush}" />
|
||||
<Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconPointOverBackground}" />
|
||||
</Style>
|
||||
<Style Selector="^:pointerover /template/ Ellipse#CheckGlyph">
|
||||
<Style Selector="^ /template/ Ellipse#CheckGlyph">
|
||||
<Setter Property="Ellipse.Opacity" Value="0" />
|
||||
</Style>
|
||||
<Style Selector="^:pressed /template/ Ellipse#OuterEllipse">
|
||||
</Style>
|
||||
<Style Selector="^:pressed">
|
||||
<Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardUncheckPressedBackground}" />
|
||||
<Style Selector="^ /template/ Ellipse#OuterEllipse">
|
||||
<Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPressedBorderBrush}" />
|
||||
<Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconPressedBackground}" />
|
||||
</Style>
|
||||
<Style Selector="^:pressed /template/ Ellipse#CheckGlyph">
|
||||
<Style Selector="^ /template/ Ellipse#CheckGlyph">
|
||||
<Setter Property="Ellipse.Opacity" Value="0" />
|
||||
</Style>
|
||||
</Style>
|
||||
</Style>
|
||||
</ControlTheme>
|
||||
|
||||
<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 Selector="^:pressed">
|
||||
<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>
|
||||
</ControlTheme>
|
||||
</ResourceDictionary>
|
||||
|
||||
@ -51,4 +51,17 @@
|
||||
|
||||
<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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user