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

feat: add pure card theme.

Browse Source
This commit is contained in:
rabbitism 2023-03-17 23:20:39 +08:00
parent f0d0ed918a
commit 309dc7ed23
2 changed files with 204 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,7 +7,7 @@
d:DesignHeight="450" d:DesignHeight="450"
d:DesignWidth="800" d:DesignWidth="800"
mc:Ignorable="d"> mc:Ignorable="d">
<ScrollViewer> <ScrollViewer HorizontalScrollBarVisibility="Auto">
<StackPanel HorizontalAlignment="Left"> <StackPanel HorizontalAlignment="Left">
<CheckBox>Unchecked</CheckBox> <CheckBox>Unchecked</CheckBox>
<CheckBox IsEnabled="False">Unchecked</CheckBox> <CheckBox IsEnabled="False">Unchecked</CheckBox>
@ -20,63 +20,123 @@
IsThreeState="True"> IsThreeState="True">
Indeterminate Indeterminate
</CheckBox> </CheckBox>
<CheckBox Width="120">Checkbox should wrap its text</CheckBox> <CheckBox Width="120" HorizontalAlignment="Left">Checkbox should wrap its text</CheckBox>
<CheckBox Width="300" Theme="{DynamicResource CardCheckBox}"> <StackPanel Orientation="Horizontal">
<StackPanel> <CheckBox Width="300" Theme="{DynamicResource CardCheckBox}">
<TextBlock FontWeight="Bold">复选框标题</TextBlock> <StackPanel>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock> <TextBlock FontWeight="Bold">复选框标题</TextBlock>
</StackPanel> <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</CheckBox> </StackPanel>
<CheckBox </CheckBox>
Width="300" <CheckBox
IsChecked="True" Width="300"
Theme="{DynamicResource CardCheckBox}"> IsChecked="True"
<StackPanel> Theme="{DynamicResource CardCheckBox}">
<TextBlock FontWeight="Bold">复选框标题</TextBlock> <StackPanel>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock> <TextBlock FontWeight="Bold">复选框标题</TextBlock>
</StackPanel> <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</CheckBox> </StackPanel>
<CheckBox </CheckBox>
Width="300" <CheckBox
IsEnabled="False" Width="300"
Theme="{DynamicResource CardCheckBox}"> IsEnabled="False"
<StackPanel> Theme="{DynamicResource CardCheckBox}">
<TextBlock FontWeight="Bold">复选框标题</TextBlock> <StackPanel>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock> <TextBlock FontWeight="Bold">复选框标题</TextBlock>
</StackPanel> <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</CheckBox> </StackPanel>
<CheckBox </CheckBox>
Width="300" <CheckBox
IsChecked="True" Width="300"
IsEnabled="False" IsChecked="True"
Theme="{DynamicResource CardCheckBox}"> IsEnabled="False"
<StackPanel> Theme="{DynamicResource CardCheckBox}">
<TextBlock FontWeight="Bold">复选框标题</TextBlock> <StackPanel>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock> <TextBlock FontWeight="Bold">复选框标题</TextBlock>
</StackPanel> <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</CheckBox> </StackPanel>
<CheckBox </CheckBox>
Width="300" <CheckBox
IsChecked="{x:Null}" Width="300"
IsEnabled="True" IsChecked="{x:Null}"
IsThreeState="True" IsEnabled="True"
Theme="{DynamicResource CardCheckBox}"> IsThreeState="True"
<StackPanel> Theme="{DynamicResource CardCheckBox}">
<TextBlock FontWeight="Bold">复选框标题</TextBlock> <StackPanel>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock> <TextBlock FontWeight="Bold">复选框标题</TextBlock>
</StackPanel> <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</CheckBox> </StackPanel>
<CheckBox </CheckBox>
Width="300" <CheckBox
IsChecked="{x:Null}" Width="300"
IsEnabled="False" IsChecked="{x:Null}"
IsThreeState="True" IsEnabled="False"
Theme="{DynamicResource CardCheckBox}"> IsThreeState="True"
<StackPanel> Theme="{DynamicResource CardCheckBox}">
<TextBlock FontWeight="Bold">复选框标题</TextBlock> <StackPanel>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock> <TextBlock FontWeight="Bold">复选框标题</TextBlock>
</StackPanel> <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</CheckBox> </StackPanel>
</CheckBox>
</StackPanel>
<StackPanel Orientation="Horizontal">
<CheckBox Width="300" Theme="{DynamicResource PureCardCheckBox}">
<StackPanel>
<TextBlock FontWeight="Bold">复选框标题</TextBlock>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</StackPanel>
</CheckBox>
<CheckBox
Width="300"
IsChecked="True"
Theme="{DynamicResource PureCardCheckBox}">
<StackPanel>
<TextBlock FontWeight="Bold">复选框标题</TextBlock>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</StackPanel>
</CheckBox>
<CheckBox
Width="300"
IsEnabled="False"
Theme="{DynamicResource PureCardCheckBox}">
<StackPanel>
<TextBlock FontWeight="Bold">复选框标题</TextBlock>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</StackPanel>
</CheckBox>
<CheckBox
Width="300"
IsChecked="True"
IsEnabled="False"
Theme="{DynamicResource PureCardCheckBox}">
<StackPanel>
<TextBlock FontWeight="Bold">复选框标题</TextBlock>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</StackPanel>
</CheckBox>
<CheckBox
Width="300"
IsChecked="{x:Null}"
IsEnabled="True"
IsThreeState="True"
Theme="{DynamicResource PureCardCheckBox}">
<StackPanel>
<TextBlock FontWeight="Bold">复选框标题</TextBlock>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</StackPanel>
</CheckBox>
<CheckBox
Width="300"
IsChecked="{x:Null}"
IsEnabled="False"
IsThreeState="True"
Theme="{DynamicResource PureCardCheckBox}">
<StackPanel>
<TextBlock FontWeight="Bold">复选框标题</TextBlock>
<TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
</StackPanel>
</CheckBox>
</StackPanel>
</StackPanel> </StackPanel>
</ScrollViewer> </ScrollViewer>
</UserControl> </UserControl>

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

@ -308,6 +308,9 @@
</Style> </Style>
<Style Selector="^:indeterminate"> <Style Selector="^:indeterminate">
<Style Selector="^ /template/ Border#RootBorder">
<Setter Property="BorderBrush" Value="{DynamicResource CheckboxCardCheckedBorderBrush}" />
</Style>
<Style Selector="^ /template/ Border#NormalRectangle"> <Style Selector="^ /template/ Border#NormalRectangle">
<Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedDefaultBorderBrush}" /> <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedDefaultBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource CheckboxCheckedDefaultBackground}" /> <Setter Property="Background" Value="{DynamicResource CheckboxCheckedDefaultBackground}" />
@ -336,6 +339,9 @@
<!-- Checked Disabled State --> <!-- Checked Disabled State -->
<Style Selector="^:disabled"> <Style Selector="^:disabled">
<Style Selector="^ /template/ Border#RootBorder">
<Setter Property="BorderBrush" Value="{DynamicResource CheckboxCardCheckedDisabledBorderBrush}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#ContentPresenter"> <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource CheckboxDisabledForeground}" /> <Setter Property="Foreground" Value="{DynamicResource CheckboxDisabledForeground}" />
</Style> </Style>
@ -350,4 +356,84 @@
</Style> </Style>
</Style> </Style>
</ControlTheme> </ControlTheme>
<ControlTheme x:Key="PureCardCheckBox" TargetType="CheckBox">
<Setter Property="Padding" Value="{DynamicResource CheckboxCardPadding}" />
<Setter Property="BorderThickness" Value="{DynamicResource CheckboxCardBorderThickness}" />
<Setter Property="CornerRadius" Value="{DynamicResource CheckboxCardCornerRadius}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="CheckBox.Template">
<ControlTemplate TargetType="CheckBox">
<Border
Name="RootBorder"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<ContentPresenter
x:Name="ContentPresenter"
Grid.Column="1"
Margin="8,0,0,0"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="Center"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
IsVisible="{TemplateBinding Content,
Converter={x:Static ObjectConverters.IsNotNull}}"
RecognizesAccessKey="True"
TextWrapping="Wrap" />
</Border>
</ControlTemplate>
</Setter>
<!-- Unchecked PointerOver State -->
<Style Selector="^:pointerover">
<Style Selector="^ /template/ Border#RootBorder">
<Setter Property="Background" Value="{DynamicResource CheckboxCardPointeroverBackground}" />
</Style>
</Style>
<!-- Unchecked Pressed State -->
<Style Selector="^:pressed">
<Style Selector="^ /template/ Border#RootBorder">
<Setter Property="Background" Value="{DynamicResource CheckboxCardPressedBackground}" />
</Style>
</Style>
<!-- Unchecked Disabled state -->
<Style Selector="^:disabled">
<Style Selector="^ /template/ ContentPresenter#ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource CheckboxDisabledForeground}" />
</Style>
</Style>
<Style Selector="^:checked">
<Style Selector="^ /template/ Border#RootBorder">
<Setter Property="BorderBrush" Value="{DynamicResource CheckboxCardCheckedBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource CheckboxCardCheckedBackground}" />
</Style>
<!-- Checked Disabled State -->
<Style Selector="^:disabled">
<Style Selector="^ /template/ Border#RootBorder">
<Setter Property="BorderBrush" Value="{DynamicResource CheckboxCardCheckedDisabledBorderBrush}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource CheckboxDisabledForeground}" />
</Style>
</Style>
</Style>
<Style Selector="^:indeterminate">
<!-- Checked Disabled State -->
<Style Selector="^ /template/ Border#RootBorder">
<Setter Property="BorderBrush" Value="{DynamicResource CheckboxCardCheckedBorderBrush}" />
</Style>
<Style Selector="^:disabled">
<Style Selector="^ /template/ Border#RootBorder">
<Setter Property="BorderBrush" Value="{DynamicResource CheckboxCardCheckedDisabledBorderBrush}" />
</Style>
</Style>
</Style>
</ControlTheme>
</ResourceDictionary> </ResourceDictionary>