feat: add SimpleCheckBox theme.
This commit is contained in:
Zhang Dian
parent
5021ac683b
commit
43b0f5b044
@ -8,10 +8,12 @@
|
||||
d:DesignWidth="800"
|
||||
mc:Ignorable="d">
|
||||
<ScrollViewer HorizontalScrollBarVisibility="Auto">
|
||||
<StackPanel HorizontalAlignment="Left">
|
||||
<StackPanel HorizontalAlignment="Left" Spacing="20">
|
||||
<StackPanel Orientation="Horizontal">
|
||||
<CheckBox BorderThickness="10" BorderBrush="Gray" Background="LightBlue">Border</CheckBox>
|
||||
<CheckBox BorderThickness="10" BorderBrush="Gray" Background="LightBlue" />
|
||||
<CheckBox Theme="{StaticResource SimpleCheckBox}" IsThreeState="True" BorderThickness="10"
|
||||
BorderBrush="Gray" Background="LightBlue" />
|
||||
</StackPanel>
|
||||
<TextBlock Text="CheckBox" />
|
||||
<StackPanel Orientation="Horizontal">
|
||||
@ -30,6 +32,18 @@
|
||||
</CheckBox>
|
||||
</StackPanel>
|
||||
<CheckBox Width="120" HorizontalAlignment="Left">Checkbox should wrap its text</CheckBox>
|
||||
<TextBlock Text="SimpleCheckBox" />
|
||||
<StackPanel Orientation="Horizontal">
|
||||
<CheckBox Theme="{StaticResource SimpleCheckBox}" />
|
||||
<CheckBox Theme="{StaticResource SimpleCheckBox}" IsChecked="True" />
|
||||
<CheckBox Theme="{StaticResource SimpleCheckBox}" IsChecked="{x:Null}" IsThreeState="True" />
|
||||
</StackPanel>
|
||||
<StackPanel Orientation="Horizontal">
|
||||
<CheckBox Theme="{StaticResource SimpleCheckBox}" IsEnabled="False" />
|
||||
<CheckBox Theme="{StaticResource SimpleCheckBox}" IsEnabled="False" IsChecked="True" />
|
||||
<CheckBox Theme="{StaticResource SimpleCheckBox}" IsEnabled="False" IsChecked="{x:Null}"
|
||||
IsThreeState="True" />
|
||||
</StackPanel>
|
||||
<TextBlock Margin="0,16" Text="CardCheckBox" />
|
||||
<StackPanel Orientation="Horizontal">
|
||||
<CheckBox Width="300" Theme="{DynamicResource CardCheckBox}">
|
||||
|
||||
@ -173,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" />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user