feat: ButtonRadioGroupListBox, CardRadioGroupListBox, PureCardRadioGroupListBox.

This commit is contained in:
Zhang Dian 2023-08-14 16:50:50 +08:00
parent a6fe50e6bc
commit eef4e5b62a
2 changed files with 329 additions and 7 deletions

View File

@ -28,6 +28,20 @@
ItemTemplate="{StaticResource PandaTemplate}"
ItemContainerTheme="{StaticResource PandaControlTheme}">
</ListBox>
<Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
<ListBox Theme="{DynamicResource ButtonRadioGroupListBox}"
ItemsSource="{Binding $parent[local:ListBoxDemo].Items}"
ItemTemplate="{StaticResource PandaTemplate}">
</ListBox>
</Border>
<ListBox Theme="{DynamicResource CardRadioGroupListBox}"
ItemsSource="{Binding $parent[local:ListBoxDemo].Items}"
ItemTemplate="{StaticResource PandaTemplate}">
</ListBox>
<ListBox Theme="{DynamicResource PureCardRadioGroupListBox}"
ItemsSource="{Binding $parent[local:ListBoxDemo].Items}"
ItemTemplate="{StaticResource PandaTemplate}">
</ListBox>
</StackPanel>
</ScrollViewer>
</UserControl>

View File

@ -11,6 +11,7 @@
<ListBoxItem>Item 4</ListBoxItem>
</ListBox>
</Design.PreviewWith>
<ControlTheme x:Key="{x:Type ListBox}" TargetType="ListBox">
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
@ -39,7 +40,6 @@
</ControlTemplate>
</Setter>
</ControlTheme>
<ControlTheme x:Key="{x:Type ListBoxItem}" TargetType="ListBoxItem">
<Setter Property="ListBoxItem.Background" Value="{DynamicResource ListBoxItemDefaultBackground}" />
<Setter Property="ListBoxItem.Padding" Value="{DynamicResource ListBoxItemDefaultPadding}" />
@ -113,7 +113,6 @@
</ControlTemplate>
</Setter>
</ControlTheme>
<ControlTheme x:Key="RadioGroupListBoxItem" TargetType="ListBoxItem">
<Setter Property="ListBoxItem.HorizontalAlignment" Value="Left" />
<Setter Property="ListBoxItem.VerticalAlignment" Value="Top" />
@ -188,7 +187,8 @@
<!-- Unchecked Pointerover State -->
<Style Selector="^:pointerover">
<Style Selector="^ /template/ Ellipse#OuterEllipse">
<Setter Property="Stroke" Value="{DynamicResource ListBoxItemRadioGroupUncheckIconPointeroverBorderBrush}" />
<Setter Property="Stroke"
Value="{DynamicResource ListBoxItemRadioGroupUncheckIconPointeroverBorderBrush}" />
<Setter Property="Fill" Value="{DynamicResource ListBoxItemRadioGroupUncheckIconPointeroverBackground}" />
</Style>
<Style Selector="^ /template/ Ellipse#CheckGlyph">
@ -234,8 +234,10 @@
<!-- Checked Pointerover State -->
<Style Selector="^:pointerover">
<Style Selector="^ /template/ Ellipse#OuterEllipse">
<Setter Property="Stroke" Value="{DynamicResource ListBoxItemRadioGroupCheckIconPointeroverBorderBrush}" />
<Setter Property="Fill" Value="{DynamicResource ListBoxItemRadioGroupCheckIconPointeroverBackground}" />
<Setter Property="Stroke"
Value="{DynamicResource ListBoxItemRadioGroupCheckIconPointeroverBorderBrush}" />
<Setter Property="Fill"
Value="{DynamicResource ListBoxItemRadioGroupCheckIconPointeroverBackground}" />
</Style>
<Style Selector="^ /template/ Ellipse#CheckGlyph">
<Setter Property="Ellipse.Opacity" Value="1" />
@ -245,7 +247,8 @@
<!-- Checked Pressed State -->
<Style Selector="^:pressed">
<Style Selector="^ /template/ Ellipse#OuterEllipse">
<Setter Property="Stroke" Value="{DynamicResource ListBoxItemRadioGroupCheckIconPressedBorderBrush}" />
<Setter Property="Stroke"
Value="{DynamicResource ListBoxItemRadioGroupCheckIconPressedBorderBrush}" />
<Setter Property="Fill" Value="{DynamicResource ListBoxItemRadioGroupCheckIconPressedBackground}" />
</Style>
<Style Selector="^ /template/ Ellipse#CheckGlyph">
@ -256,7 +259,8 @@
<!-- Checked Disabled State -->
<Style Selector="^:disabled">
<Style Selector="^ /template/ Ellipse#OuterEllipse">
<Setter Property="Stroke" Value="{DynamicResource ListBoxItemRadioGroupCheckIconDisabledBorderBrush}" />
<Setter Property="Stroke"
Value="{DynamicResource ListBoxItemRadioGroupCheckIconDisabledBorderBrush}" />
<Setter Property="Fill" Value="{DynamicResource ListBoxItemRadioGroupCheckIconDisabledBackground}" />
</Style>
<Style Selector="^ /template/ Ellipse#CheckGlyph">
@ -268,4 +272,308 @@
</Style>
</Style>
</ControlTheme>
<ControlTheme x:Key="ButtonRadioGroupListBox"
BasedOn="{StaticResource RadioGroupListBox}"
TargetType="ListBox">
<Setter Property="ListBox.ItemContainerTheme" Value="{DynamicResource ButtonRadioGroupListBoxItem}" />
</ControlTheme>
<ControlTheme x:Key="ButtonRadioGroupListBoxItem" TargetType="ListBoxItem">
<Setter Property="ListBoxItem.CornerRadius" Value="{DynamicResource RadioButtonButtonCornerRadius}" />
<Setter Property="ListBoxItem.VerticalContentAlignment" Value="Center" />
<Setter Property="ListBoxItem.Margin" Value="2" />
<Setter Property="ListBoxItem.Cursor" Value="Hand" />
<Setter Property="ListBoxItem.FontWeight" Value="{DynamicResource RadioButtonButtonFontWeight}" />
<Setter Property="ListBoxItem.FontSize" Value="{DynamicResource RadioButtonButtonDefaultFontSize}" />
<Setter Property="ListBoxItem.Padding" Value="{DynamicResource RadioButtonButtonDefaultPadding}" />
<Setter Property="ListBoxItem.Foreground" Value="{DynamicResource RadioButtonButtonUncheckedForeground}" />
<Setter Property="ListBoxItem.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"
TextElement.FontSize="{TemplateBinding FontSize}"
TextElement.FontWeight="{TemplateBinding FontWeight}"
UseLayoutRounding="False" />
</ControlTemplate>
</Setter>
<Setter Property="ListBoxItem.Background" Value="Transparent" />
<Style Selector="^:pointerover">
<Setter Property="ListBoxItem.Background"
Value="{DynamicResource RadioButtonButtonUncheckedPointeroverBackground}" />
</Style>
<Style Selector="^:disabled">
<Setter Property="ListBoxItem.Foreground"
Value="{DynamicResource RadioButtonButtonUncheckedDisabledForeground}" />
</Style>
<Style Selector="^:selected">
<Setter Property="ListBoxItem.Background" Value="{DynamicResource RadioButtonButtonCheckedBackground}" />
<Setter Property="ListBoxItem.Foreground" Value="{DynamicResource RadioButtonButtonCheckedForeground}" />
<Style Selector="^:disabled">
<Setter Property="ListBoxItem.Foreground"
Value="{DynamicResource RadioButtonButtonCheckedDisabledForeground}" />
</Style>
</Style>
<Style Selector="^.Small">
<Setter Property="ListBoxItem.FontSize" Value="{DynamicResource RadioButtonButtonSmallFontSize}" />
<Setter Property="ListBoxItem.Padding" Value="{DynamicResource RadioButtonButtonSmallPadding}" />
</Style>
<Style Selector="^.Large">
<Setter Property="ListBoxItem.FontSize" Value="{DynamicResource RadioButtonButtonLargeFontSize}" />
<Setter Property="ListBoxItem.Padding" Value="{DynamicResource RadioButtonButtonLargePadding}" />
</Style>
</ControlTheme>
<ControlTheme x:Key="CardRadioGroupListBox"
BasedOn="{StaticResource RadioGroupListBox}"
TargetType="ListBox">
<Setter Property="ListBox.ItemContainerTheme" Value="{DynamicResource CardRadioGroupListBoxItem}" />
</ControlTheme>
<ControlTheme x:Key="CardRadioGroupListBoxItem" TargetType="ListBoxItem">
<Setter Property="ListBoxItem.Padding" Value="{DynamicResource RadioButtonCardPadding}" />
<Setter Property="ListBoxItem.BorderThickness" Value="1" />
<Setter Property="ListBoxItem.CornerRadius" Value="{DynamicResource RadioButtonCardCornerRadius}" />
<Setter Property="ListBoxItem.Cursor" Value="Hand" />
<Setter Property="ListBoxItem.HorizontalAlignment" Value="Left" />
<Setter Property="ListBoxItem.VerticalAlignment" Value="Center" />
<Setter Property="ListBoxItem.HorizontalContentAlignment" Value="Left" />
<Setter Property="ListBoxItem.VerticalContentAlignment" Value="Center" />
<Setter Property="ListBoxItem.Background" Value="{DynamicResource RadioButtonCardDefaultBackground}" />
<Setter Property="ListBoxItem.FontSize" Value="{DynamicResource RadioButtonFontSize}" />
<Setter Property="Template">
<ControlTemplate TargetType="ListBoxItem">
<Border
Name="RootBorder"
Margin="{TemplateBinding Margin}"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<Grid
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
ColumnDefinitions="Auto,*">
<Grid Margin="{DynamicResource RadioButtonIconMargin}" VerticalAlignment="Top">
<Ellipse
Name="OuterEllipse"
Width="{DynamicResource RadioButtonIconRadius}"
Height="{DynamicResource RadioButtonIconRadius}"
Fill="{DynamicResource RadioButtonUncheckIconDefaultBackground}"
Stroke="{DynamicResource RadioButtonUncheckIconDefaultBorderBrush}"
StrokeThickness="1"
UseLayoutRounding="False" />
<Ellipse
Name="CheckGlyph"
Width="{DynamicResource RadioButtonGlyphRadius}"
Height="{DynamicResource RadioButtonGlyphRadius}"
Fill="{DynamicResource RadioButtonCheckGlyphFill}"
Opacity="0"
Stroke="{DynamicResource RadioButtonCheckGlyphFill}"
StrokeThickness="0"
UseLayoutRounding="False" />
</Grid>
<ContentPresenter
Name="PART_ContentPresenter"
Grid.Column="1"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Foreground="{TemplateBinding Foreground}"
RecognizesAccessKey="True"
TextElement.FontSize="{DynamicResource RadioButtonFontSize}"
TextElement.Foreground="{DynamicResource RadioButtonForeground}" />
</Grid>
</Border>
</ControlTemplate>
</Setter>
<!-- Unchecked State -->
<Style Selector="^ /template/ Ellipse#OuterEllipse">
<Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDefaultBorderBrush}" />
<Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconDefaultBackground}" />
</Style>
<Style Selector="^ /template/ Ellipse#CheckGlyph">
<Setter Property="Ellipse.Opacity" Value="0" />
</Style>
<!-- Unchecked Pointerover State -->
<Style Selector="^:pointerover">
<Setter Property="ListBoxItem.Background"
Value="{DynamicResource RadioButtonCardUncheckPointeroverBackground}" />
<Style Selector="^ /template/ Ellipse#OuterEllipse">
<Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPointeroverBorderBrush}" />
</Style>
<Style Selector="^ /template/ Ellipse#CheckGlyph">
<Setter Property="Ellipse.Opacity" Value="0" />
</Style>
</Style>
<!-- Unchecked Pressed State -->
<Style Selector="^:pressed">
<Setter Property="ListBoxItem.Background"
Value="{DynamicResource RadioButtonCardUncheckPressedBackground}" />
<Style Selector="^ /template/ Ellipse#OuterEllipse">
<Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPressedBorderBrush}" />
</Style>
<Style Selector="^ /template/ Ellipse#CheckGlyph">
<Setter Property="Ellipse.Opacity" Value="0" />
</Style>
</Style>
<!-- Unchecked Disabled state -->
<Style Selector="^:disabled">
<Style Selector="^ /template/ Ellipse#OuterEllipse">
<Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDisabledBorderBrush}" />
<Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconDisabledBackground}" />
</Style>
<Style Selector="^ /template/ Ellipse#CheckGlyph">
<Setter Property="Ellipse.Opacity" Value="0" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource RadioButtonDisabledForeground}" />
</Style>
</Style>
<!-- Checked State -->
<Style Selector="^:selected">
<Setter Property="ListBoxItem.Background" Value="{DynamicResource RadioButtonCardCheckedBackground}" />
<Setter Property="ListBoxItem.BorderBrush" Value="{DynamicResource RadioButtonCardCheckDefaultBorderBrush}" />
<Style Selector="^ /template/ Ellipse#OuterEllipse">
<Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconDefaultBorderBrush}" />
<Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconDefaultBackground}" />
</Style>
<Style Selector="^ /template/ Ellipse#CheckGlyph">
<Setter Property="Ellipse.Opacity" Value="1" />
</Style>
<!-- Checked Pointerover State -->
<Style Selector="^:pointerover">
<Setter Property="ListBoxItem.BorderBrush"
Value="{DynamicResource RadioButtonCardCheckPointeroverBorderBrush}" />
<Style Selector="^ /template/ Ellipse#OuterEllipse">
<Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointeroverBorderBrush}" />
<Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointeroverBackground}" />
</Style>
<Style Selector="^ /template/ Ellipse#OuterEllipse">
<Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointeroverBorderBrush}" />
<Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointeroverBackground}" />
</Style>
<Style Selector="^ /template/ Ellipse#CheckGlyph">
<Setter Property="Ellipse.Opacity" Value="1" />
</Style>
</Style>
<!-- Checked Pressed State -->
<Style Selector="^:pressed">
<Setter Property="ListBoxItem.BorderBrush"
Value="{DynamicResource RadioButtonCardCheckPressedBorderBrush}" />
<Style Selector="^ /template/ Ellipse#OuterEllipse">
<Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPressedBorderBrush}" />
<Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPressedBackground}" />
</Style>
<Style Selector="^ /template/ Ellipse#CheckGlyph">
<Setter Property="Ellipse.Opacity" Value="1" />
</Style>
</Style>
<!-- Checked Disabled State -->
<Style Selector="^:disabled">
<Style Selector="^ /template/ Ellipse#OuterEllipse">
<Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconDisabledBorderBrush}" />
<Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconDisabledBackground}" />
</Style>
<Style Selector="^ /template/ Ellipse#CheckGlyph">
<Setter Property="Ellipse.Opacity" Value="1" />
</Style>
<Style Selector="^ /template/ Border#RootBorder">
<Setter Property="BorderBrush" Value="{DynamicResource RadioButtonCheckIconDisabledBackground}" />
<Setter Property="Background" Value="{DynamicResource RadioButtonCardCheckedBackground}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource RadioButtonDisabledForeground}" />
</Style>
</Style>
</Style>
</ControlTheme>
<ControlTheme x:Key="PureCardRadioGroupListBox"
BasedOn="{StaticResource RadioGroupListBox}"
TargetType="ListBox">
<Setter Property="ListBox.ItemContainerTheme" Value="{DynamicResource PureCardRadioGroupListBoxItem}" />
</ControlTheme>
<ControlTheme x:Key="PureCardRadioGroupListBoxItem" TargetType="ListBoxItem">
<Setter Property="ListBoxItem.CornerRadius" Value="{DynamicResource RadioButtonCardCornerRadius}" />
<Setter Property="ListBoxItem.Cursor" Value="Hand" />
<Setter Property="ListBoxItem.VerticalContentAlignment" Value="Center" />
<Setter Property="ListBoxItem.BorderThickness" Value="1" />
<Setter Property="ListBoxItem.FontSize" Value="{DynamicResource RadioButtonFontSize}" />
<Setter Property="ListBoxItem.Padding" Value="{DynamicResource RadioButtonCardPadding}" />
<Setter Property="ListBoxItem.Background" Value="{DynamicResource RadioButtonCardDefaultBackground}" />
<Setter Property="ListBoxItem.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>
<Setter Property="ListBoxItem.BorderBrush" Value="{DynamicResource RadioButtonCardDefaultBorderBrush}" />
<Style Selector="^:pointerover">
<Setter Property="ListBoxItem.Background"
Value="{DynamicResource RadioButtonCardUncheckPointeroverBackground}" />
</Style>
<Style Selector="^:pressed">
<Setter Property="ListBoxItem.Background" Value="{DynamicResource RadioButtonCardUncheckPressedBackground}" />
</Style>
<Style Selector="^:disabled">
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource RadioButtonDisabledForeground}" />
</Style>
</Style>
<Style Selector="^:selected">
<Setter Property="ListBoxItem.Background" Value="{DynamicResource RadioButtonCardCheckedBackground}" />
<Setter Property="ListBoxItem.BorderBrush" Value="{DynamicResource RadioButtonCardCheckDefaultBorderBrush}" />
<Style Selector="^:pointerover">
<Setter Property="ListBoxItem.BorderBrush"
Value="{DynamicResource RadioButtonCardCheckPointeroverBorderBrush}" />
</Style>
<Style Selector="^:pressed">
<Setter Property="ListBoxItem.BorderBrush"
Value="{DynamicResource RadioButtonCardCheckPressedBorderBrush}" />
</Style>
<Style Selector="^:disabled">
<Setter Property="BorderBrush" Value="{DynamicResource RadioButtonCheckIconDisabledBackground}" />
<Setter Property="Background" Value="{DynamicResource RadioButtonCardCheckedBackground}" />
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Foreground" Value="{DynamicResource RadioButtonDisabledForeground}" />
</Style>
</Style>
</Style>
</ControlTheme>
</ResourceDictionary>