feat: ButtonRadioGroupListBox, CardRadioGroupListBox, PureCardRadioGroupListBox.

demo/Semi.Avalonia.Demo/Pages/ListBoxDemo.axaml

@@ -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>

src/Semi.Avalonia/Controls/ListBox.axaml

@@ -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="Stroke"
-                    <Setter Property="Fill" Value="{DynamicResource ListBoxItemRadioGroupCheckIconPointeroverBackground}" />
+                            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>