feat: add pure card theme.
This commit is contained in:
rabbitism
parent
f0d0ed918a
commit
309dc7ed23
@ -7,7 +7,7 @@
|
||||
d:DesignHeight="450"
|
||||
d:DesignWidth="800"
|
||||
mc:Ignorable="d">
|
||||
<ScrollViewer>
|
||||
<ScrollViewer HorizontalScrollBarVisibility="Auto">
|
||||
<StackPanel HorizontalAlignment="Left">
|
||||
<CheckBox>Unchecked</CheckBox>
|
||||
<CheckBox IsEnabled="False">Unchecked</CheckBox>
|
||||
@ -20,7 +20,8 @@
|
||||
IsThreeState="True">
|
||||
Indeterminate
|
||||
</CheckBox>
|
||||
<CheckBox Width="120">Checkbox should wrap its text</CheckBox>
|
||||
<CheckBox Width="120" HorizontalAlignment="Left">Checkbox should wrap its text</CheckBox>
|
||||
<StackPanel Orientation="Horizontal">
|
||||
<CheckBox Width="300" Theme="{DynamicResource CardCheckBox}">
|
||||
<StackPanel>
|
||||
<TextBlock FontWeight="Bold">复选框标题</TextBlock>
|
||||
@ -78,5 +79,64 @@
|
||||
</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>
|
||||
</ScrollViewer>
|
||||
</UserControl>
|
||||
|
||||
@ -308,6 +308,9 @@
|
||||
</Style>
|
||||
|
||||
<Style Selector="^:indeterminate">
|
||||
<Style Selector="^ /template/ Border#RootBorder">
|
||||
<Setter Property="BorderBrush" Value="{DynamicResource CheckboxCardCheckedBorderBrush}" />
|
||||
</Style>
|
||||
<Style Selector="^ /template/ Border#NormalRectangle">
|
||||
<Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedDefaultBorderBrush}" />
|
||||
<Setter Property="Background" Value="{DynamicResource CheckboxCheckedDefaultBackground}" />
|
||||
@ -336,6 +339,9 @@
|
||||
|
||||
<!-- 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>
|
||||
@ -350,4 +356,84 @@
|
||||
</Style>
|
||||
</Style>
|
||||
</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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user