feat: CheckGroup.

This commit is contained in:
Zhang Dian 2023-08-16 18:02:27 +08:00
parent 430a7e56ca
commit 6a4065f3b7
2 changed files with 448 additions and 1 deletions

View File

@ -8,8 +8,13 @@
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<UserControl.Styles>
<Style Selector="ListBox">
<Setter Property="SelectionMode" Value="Multiple" />
</Style>
</UserControl.Styles>
<ScrollViewer>
<Grid ColumnDefinitions="*,*">
<Grid ColumnDefinitions="*,*,*">
<HeaderedContentControl
Grid.Column="0"
Theme="{StaticResource GroupBox}"
@ -105,6 +110,46 @@
</ListBox>
</StackPanel>
</HeaderedContentControl>
<HeaderedContentControl
Grid.Column="2"
Theme="{DynamicResource GroupBox}"
Header="CheckGroupListBox">
<ScrollViewer>
<StackPanel Spacing="20">
<ListBox
SelectionMode="Multiple"
Theme="{DynamicResource CheckGroupListBox}"
ItemsSource="{Binding $parent[local:ListBoxDemo].Items}" />
<ListBox Theme="{DynamicResource CheckGroupListBox}"
SelectionMode="Multiple"
IsEnabled="False">
<ListBoxItem IsSelected="True">Avalonia</ListBoxItem>
<ListBoxItem>WPF</ListBoxItem>
</ListBox>
<ListBox
SelectionMode="Multiple"
Theme="{DynamicResource CardCheckGroupListBox}"
ItemsSource="{Binding $parent[local:ListBoxDemo].Items}" />
<ListBox Theme="{DynamicResource CardCheckGroupListBox}"
SelectionMode="Multiple"
IsEnabled="False">
<ListBoxItem IsSelected="True">Avalonia</ListBoxItem>
<ListBoxItem>WPF</ListBoxItem>
</ListBox>
<ListBox
SelectionMode="Multiple"
Theme="{DynamicResource PureCardCheckGroupListBox}"
ItemsSource="{Binding $parent[local:ListBoxDemo].Items}" />
<ListBox Theme="{DynamicResource PureCardCheckGroupListBox}"
SelectionMode="Multiple"
IsEnabled="False">
<ListBoxItem IsSelected="True">Avalonia</ListBoxItem>
<ListBoxItem>WPF</ListBoxItem>
</ListBox>
</StackPanel>
</ScrollViewer>
</HeaderedContentControl>
</Grid>
</ScrollViewer>
</UserControl>

View File

@ -91,6 +91,7 @@
</Style>
</ControlTheme>
<!-- RadioGroup -->
<ControlTheme x:Key="RadioGroupListBox" TargetType="ListBox">
<Setter Property="ListBox.ItemContainerTheme" Value="{DynamicResource RadioGroupListBoxItem}" />
<Setter Property="ListBox.ItemsPanel">
@ -594,4 +595,405 @@
</Style>
</Style>
</ControlTheme>
<!-- CheckGroup -->
<ControlTheme x:Key="CheckGroupListBox"
BasedOn="{StaticResource RadioGroupListBox}"
TargetType="ListBox">
<Setter Property="ListBox.ItemContainerTheme" Value="{DynamicResource CheckGroupListBoxItem}" />
</ControlTheme>
<ControlTheme x:Key="CheckGroupListBoxItem" TargetType="ListBoxItem">
<Setter Property="Padding" Value="8,0,0,0" />
<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="MinHeight" Value="32" />
<Setter Property="Foreground" Value="{DynamicResource CheckBoxForeground}" />
<Setter Property="Background" Value="{DynamicResource CheckBoxDefaultBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource CheckBoxDefaultBorderBrush}" />
<Setter Property="Template">
<ControlTemplate TargetType="ListBoxItem">
<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>
<ContentPresenter
x:Name="ContentPresenter"
Grid.Column="1"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="Center"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
IsVisible="{TemplateBinding Content,Converter={x:Static ObjectConverters.IsNotNull}}"
RecognizesAccessKey="True"
TextWrapping="Wrap" />
</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/ ContentPresenter#ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
</Style>
<Style Selector="^ /template/ Border#NormalRectangle">
<Setter Property="BorderBrush" Value="{DynamicResource CheckBoxDefaultDisabledBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource CheckBoxDefaultDisabledBackground}" />
</Style>
</Style>
<Style Selector="^:selected">
<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/ ContentPresenter#ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
</Style>
<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/ ContentPresenter#ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
</Style>
<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="CardCheckGroupListBox"
BasedOn="{StaticResource RadioGroupListBox}"
TargetType="ListBox">
<Setter Property="ListBox.ItemContainerTheme" Value="{DynamicResource CardCheckGroupListBoxItem}" />
</ControlTheme>
<ControlTheme x:Key="CardCheckGroupListBoxItem" TargetType="ListBoxItem">
<Setter Property="Cursor" Value="Hand" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<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="ListBoxItem">
<Border
Name="RootBorder"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<Grid
x:Name="RootGrid"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
ColumnDefinitions="Auto,*">
<Grid Grid.Column="0" VerticalAlignment="Top">
<Border
x:Name="NormalRectangle"
Width="{DynamicResource CheckBoxBoxWidth}"
Height="{DynamicResource CheckBoxBoxHeight}"
Background="{DynamicResource CheckBoxDefaultBackground}"
BorderBrush="{DynamicResource CheckBoxDefaultBorderBrush}"
BorderThickness="{DynamicResource CheckBoxBoxBorderThickness}"
CornerRadius="{DynamicResource CheckBoxBoxCornerRadius}"
UseLayoutRounding="False" />
<PathIcon
Name="CheckGlyph"
Width="{DynamicResource CheckBoxBoxGlyphWidth}"
Height="{DynamicResource CheckBoxBoxGlyphHeight}"
Foreground="{DynamicResource CheckBoxGlyphFill}" />
</Grid>
<ContentPresenter
x:Name="ContentPresenter"
Grid.Column="1"
Margin="8,0,0,0"
VerticalAlignment="Center"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
IsVisible="{TemplateBinding Content,
Converter={x:Static ObjectConverters.IsNotNull}}"
RecognizesAccessKey="True"
TextWrapping="Wrap" />
</Grid>
</Border>
</ControlTemplate>
</Setter>
<!-- Unchecked Pointerover State -->
<Style Selector="^:pointerover">
<Style Selector="^ /template/ Border#NormalRectangle">
<Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPointeroverBorderBrush}" />
</Style>
<Style Selector="^ /template/ Border#RootBorder">
<Setter Property="Background" Value="{DynamicResource CheckBoxCardPointeroverBackground}" />
</Style>
</Style>
<!-- Unchecked Pressed State -->
<Style Selector="^:pressed">
<Style Selector="^ /template/ Border#NormalRectangle">
<Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPressedBorderBrush}" />
</Style>
<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 Selector="^ /template/ Border#NormalRectangle">
<Setter Property="BorderBrush" Value="{DynamicResource CheckBoxDefaultDisabledBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource CheckBoxDefaultDisabledBackground}" />
</Style>
</Style>
<Style Selector="^:selected">
<Style Selector="^ /template/ Border#RootBorder">
<Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource CheckBoxCardCheckedBackground}" />
</Style>
<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 Selector="^ /template/ Border#RootBorder">
<Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPointeroverBorderBrush}" />
</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 Selector="^ /template/ Border#RootBorder">
<Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPressedBorderBrush}" />
</Style>
</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 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="PureCardCheckGroupListBox"
BasedOn="{StaticResource RadioGroupListBox}"
TargetType="ListBox">
<Setter Property="ListBox.ItemContainerTheme" Value="{DynamicResource PureCardCheckGroupListBoxItem}" />
</ControlTheme>
<ControlTheme x:Key="PureCardCheckGroupListBoxItem" TargetType="ListBoxItem">
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Padding" Value="{DynamicResource CheckBoxCardPadding}" />
<Setter Property="BorderThickness" Value="{DynamicResource CheckBoxCardBorderThickness}" />
<Setter Property="CornerRadius" Value="{DynamicResource CheckBoxCardCornerRadius}" />
<Setter Property="CheckBox.VerticalContentAlignment" Value="Center" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="CheckBox.Template">
<ControlTemplate TargetType="ListBoxItem">
<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"
UseLayoutRounding="False" />
</ControlTemplate>
</Setter>
<!-- Unchecked Pointerover State -->
<Style Selector="^:pointerover">
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{DynamicResource CheckBoxCardPointeroverBackground}" />
</Style>
</Style>
<!-- Unchecked Pressed State -->
<Style Selector="^:pressed">
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{DynamicResource CheckBoxCardPressedBackground}" />
</Style>
</Style>
<!-- Unchecked Disabled state -->
<Style Selector="^:disabled">
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
</Style>
</Style>
<Style Selector="^:selected">
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource CheckBoxCardCheckedBackground}" />
</Style>
<Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPointeroverBorderBrush}" />
</Style>
<Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPressedBorderBrush}" />
</Style>
<!-- Checked Disabled State -->
<Style Selector="^:disabled">
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedDisabledBorderBrush}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
</Style>
</Style>
</Style>
</ControlTheme>
</ResourceDictionary>