fix CommandBar issues (#763)

* feat: extract shared theme from AppBarButton & AppBarToggleButton.

* feat: enhance CommandBar with dynamic overflow and adjustable width.

* fix: fix Width in IsCompact mode.

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

@@ -12,8 +12,8 @@
         <StackPanel Spacing="16">
             <HeaderedContentControl Theme="{StaticResource GroupBox}">
                 <HeaderedContentControl.Header>
-                    <StackPanel>
-                        <TextBlock Text="CommandBar — Label Position" />
+                    <StackPanel HorizontalAlignment="Left">
+                        <TextBlock Text="CommandBar — Dynamic Overflow" />
                         <ComboBox
                             Name="lc"
                             ItemsSource="{DynamicResource LabelPositionList}"
@@ -26,9 +26,14 @@
                                 </collections:AvaloniaList>
                             </ComboBox.Resources>
                         </ComboBox>
+                        <ToggleSwitch Name="idfe" IsChecked="True" />
+                        <Slider Name="ws" Width="500" Minimum="0" Maximum="1000" Value="200" />
                     </StackPanel>
                 </HeaderedContentControl.Header>
-                <CommandBar DefaultLabelPosition="{Binding #lc.SelectedValue}">
+                <CommandBar
+                    IsDynamicOverflowEnabled="{Binding #idfe.IsChecked}"
+                    Width="{Binding #ws.Value}"
+                    DefaultLabelPosition="{Binding #lc.SelectedValue}">
                     <AppBarButton Label="New" Icon="{DynamicResource SemiIconPlus}" />
                     <AppBarButton Label="Save" Icon="{DynamicResource SemiIconSave}" />
                     <AppBarSeparator />
@@ -59,25 +64,6 @@
                 </CommandBar>
             </HeaderedContentControl>
 
-            <HeaderedContentControl Theme="{StaticResource GroupBox}">
-                <HeaderedContentControl.Header>
-                    <StackPanel HorizontalAlignment="Left">
-                        <TextBlock Text="CommandBar — Dynamic Overflow" />
-                        <ToggleSwitch Name="idfe" IsChecked="True" />
-                        <Slider Name="ws" Width="500" Minimum="0" Maximum="500" Value="100" />
-                    </StackPanel>
-                </HeaderedContentControl.Header>
-                <CommandBar
-                    IsDynamicOverflowEnabled="{Binding #idfe.IsChecked}"
-                    Width="{Binding #ws.Value}">
-                    <AppBarButton Label="New" Icon="{DynamicResource SemiIconPlus}" />
-                    <AppBarButton Label="Save" Icon="{DynamicResource SemiIconSave}" />
-                    <AppBarButton Label="Share" Icon="{DynamicResource SemiIconShare}" />
-                    <AppBarButton Label="Export" Icon="{DynamicResource SemiIconExport}" />
-                    <AppBarButton Label="Delete" Icon="{DynamicResource SemiIconDelete}" />
-                </CommandBar>
-            </HeaderedContentControl>
-
         </StackPanel>
     </ScrollViewer>
 </UserControl>

src/Semi.Avalonia/Controls/CommandBar.axaml

@@ -1,36 +1,53 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:collections="clr-namespace:Avalonia.Collections;assembly=Avalonia.Base">
 
     <Design.PreviewWith>
-        <Border Padding="16" Width="600" Background="{DynamicResource SemiColorBackground0}">
-            <StackPanel Spacing="16">
-                <CommandBar>
+        <HeaderedContentControl Height="500" Theme="{StaticResource GroupBox}">
+            <HeaderedContentControl.Header>
+                <StackPanel>
+                    <ComboBox
+                        Name="lc"
+                        ItemsSource="{DynamicResource LabelPositionList}"
+                        SelectedValue="{x:Static CommandBarDefaultLabelPosition.Bottom}">
+                        <ComboBox.Resources>
+                            <collections:AvaloniaList x:TypeArguments="CommandBarDefaultLabelPosition" x:Key="LabelPositionList">
+                                <CommandBarDefaultLabelPosition>Bottom</CommandBarDefaultLabelPosition>
+                                <CommandBarDefaultLabelPosition>Collapsed</CommandBarDefaultLabelPosition>
+                                <CommandBarDefaultLabelPosition>Right</CommandBarDefaultLabelPosition>
+                            </collections:AvaloniaList>
+                        </ComboBox.Resources>
+                    </ComboBox>
+                    <ToggleSwitch Name="idfe" IsChecked="True" />
+                    <Slider Name="ws" Width="500" Minimum="0" Maximum="500" Value="200" />
+                </StackPanel>
+            </HeaderedContentControl.Header>
+            <StackPanel Orientation="Horizontal" VerticalAlignment="Top">
+                <CommandBar
+                    DefaultLabelPosition="{Binding #lc.SelectedValue}"
+                    IsDynamicOverflowEnabled="{Binding #idfe.IsChecked}"
+                    Width="{Binding #ws.Value}">
                     <AppBarButton Label="New" Icon="{DynamicResource SemiIconPlus}" />
                     <AppBarButton Label="Save" Icon="{DynamicResource SemiIconSave}" />
                     <AppBarSeparator />
                     <AppBarToggleButton Label="Bold" Icon="{DynamicResource SemiIconBold}" />
-                    <AppBarButton Label="Copy" IsEnabled="False" Icon="{DynamicResource SemiIconCopy}" />
+                    <AppBarToggleButton Label="Italic" Icon="{DynamicResource SemiIconItalic}" />
+                    <AppBarToggleButton Label="Underline" Icon="{DynamicResource SemiIconUnderline}" />
+                    <AppBarSeparator />
+                    <AppBarButton Label="Share" Icon="{DynamicResource SemiIconShare}" />
+                    <AppBarButton Label="Export" Icon="{DynamicResource SemiIconExport}" />
+                    <AppBarButton Label="Print" Icon="{DynamicResource SemiIconPrint}" />
+                    <AppBarSeparator />
+                    <AppBarButton Label="Delete" Icon="{DynamicResource SemiIconDelete}" />
                 </CommandBar>
             </StackPanel>
-        </Border>
+        </HeaderedContentControl>
     </Design.PreviewWith>
 
-    <!--  AppBarButton  -->
-    <ControlTheme x:Key="{x:Type AppBarButton}" TargetType="AppBarButton">
-        <Setter Property="Background" Value="{DynamicResource AppBarButtonBackground}" />
-        <Setter Property="Foreground" Value="{DynamicResource AppBarButtonForeground}" />
-        <Setter Property="BorderBrush" Value="Transparent" />
-        <Setter Property="BorderThickness" Value="0" />
-        <Setter Property="Padding" Value="{DynamicResource AppBarButtonPadding}" />
-        <Setter Property="Width" Value="{DynamicResource AppBarButtonWidth}" />
-        <Setter Property="MinHeight" Value="{DynamicResource AppBarButtonMinHeight}" />
-        <Setter Property="CornerRadius" Value="{DynamicResource AppBarButtonCornerRadius}" />
-        <Setter Property="HorizontalContentAlignment" Value="Center" />
-        <Setter Property="VerticalContentAlignment" Value="Center" />
-        <Setter Property="Cursor" Value="Hand" />
+    <ControlTheme x:Key="AppBarButtonBaseTheme" TargetType="Button">
         <Setter Property="Template">
-            <ControlTemplate TargetType="AppBarButton">
+            <ControlTemplate TargetType="Button">
                 <Border
                     Name="PART_Border"
                     Background="{TemplateBinding Background}"
@@ -40,17 +57,12 @@
                     Padding="{TemplateBinding Padding}">
                     <StackPanel
                         Name="PART_LayoutRoot"
-                        Spacing="4"
-                        HorizontalAlignment="Center"
-                        VerticalAlignment="Center">
+                        Spacing="{DynamicResource AppBarButtonPanelSpacing}"
+                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                         <ContentPresenter
                             Name="PART_IconPresenter"
-                            Content="{TemplateBinding Icon}"
-                            Foreground="{TemplateBinding Foreground}"
-                            Width="{DynamicResource AppBarButtonIconSize}"
-                            Height="{DynamicResource AppBarButtonIconSize}"
-                            HorizontalAlignment="Center"
-                            VerticalAlignment="Center">
+                            Foreground="{TemplateBinding Foreground}">
                             <ContentPresenter.DataTemplates>
                                 <DataTemplate DataType="Geometry">
                                     <PathIcon
@@ -61,220 +73,178 @@
                         </ContentPresenter>
                         <TextBlock
                             Name="PART_Label"
-                            Text="{TemplateBinding Label}"
                             Foreground="{TemplateBinding Foreground}"
                             FontSize="{DynamicResource AppBarButtonLabelFontSize}"
-                            HorizontalAlignment="Center"
                             TextTrimming="CharacterEllipsis" />
                     </StackPanel>
                 </Border>
             </ControlTemplate>
         </Setter>
 
-        <!--  Pointer over  -->
+        <Setter Property="Background" Value="{DynamicResource AppBarButtonBackground}" />
+        <Setter Property="Foreground" Value="{DynamicResource AppBarButtonForeground}" />
+        <Setter Property="BorderBrush" Value="Transparent" />
+        <Setter Property="BorderThickness" Value="0" />
+        <Setter Property="Padding" Value="{DynamicResource AppBarButtonPadding}" />
+        <Setter Property="Width" Value="{DynamicResource AppBarButtonWidth}" />
+        <Setter Property="MinHeight" Value="{DynamicResource AppBarButtonMinHeight}" />
+
+        <Setter Property="CornerRadius" Value="{DynamicResource AppBarButtonCornerRadius}" />
+        <Setter Property="HorizontalContentAlignment" Value="Center" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="Cursor" Value="Hand" />
+
         <Style Selector="^:pointerover /template/ Border#PART_Border">
             <Setter Property="Background" Value="{DynamicResource AppBarButtonPointeroverBackground}" />
         </Style>
 
-        <!--  Pressed  -->
         <Style Selector="^:pressed /template/ Border#PART_Border">
             <Setter Property="Background" Value="{DynamicResource AppBarButtonPressedBackground}" />
         </Style>
 
-        <!--  Disabled  -->
-        <Style Selector="^:disabled /template/ ContentPresenter#PART_IconPresenter">
-            <Setter Property="Foreground" Value="{DynamicResource AppBarButtonDisabledForeground}" />
+        <Style Selector="^:disabled">
+            <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource AppBarButtonDisabledForeground}" />
+            </Style>
+            <Style Selector="^ /template/ TextBlock#PART_Label">
+                <Setter Property="Foreground" Value="{DynamicResource AppBarButtonDisabledForeground}" />
+            </Style>
         </Style>
-        <Style Selector="^:disabled /template/ TextBlock#PART_Label">
-            <Setter Property="Foreground" Value="{DynamicResource AppBarButtonDisabledForeground}" />
+    </ControlTheme>
+
+    <!--  AppBarButton  -->
+    <ControlTheme
+        x:Key="{x:Type AppBarButton}"
+        BasedOn="{StaticResource AppBarButtonBaseTheme}"
+        TargetType="AppBarButton">
+
+        <Style Selector="^ /template/ TextBlock#PART_Label">
+            <Setter Property="Text" Value="{TemplateBinding Label}" />
+        </Style>
+        <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
+            <Setter Property="Content" Value="{TemplateBinding Icon}" />
         </Style>
 
         <!--  IsCompact: hide label, use compact width  -->
         <Style Selector="^[IsCompact=True]">
             <Setter Property="Width" Value="{DynamicResource AppBarButtonCompactWidth}" />
-        </Style>
-        <Style Selector="^[IsCompact=True] /template/ TextBlock#PART_Label">
-            <Setter Property="IsVisible" Value="False" />
+            <Style Selector="^ /template/ TextBlock#PART_Label">
+                <Setter Property="IsVisible" Value="False" />
+            </Style>
         </Style>
 
         <!--  LabelPosition=Collapsed: hide label, use compact width  -->
         <Style Selector="^[LabelPosition=Collapsed]">
             <Setter Property="Width" Value="{DynamicResource AppBarButtonCompactWidth}" />
-        </Style>
-        <Style Selector="^[LabelPosition=Collapsed] /template/ TextBlock#PART_Label">
-            <Setter Property="IsVisible" Value="False" />
+            <Style Selector="^ /template/ TextBlock#PART_Label">
+                <Setter Property="IsVisible" Value="False" />
+            </Style>
         </Style>
 
         <!--  LabelPosition=Right: horizontal layout, auto-width  -->
         <Style Selector="^[LabelPosition=Right]">
             <Setter Property="Width" Value="{x:Static x:Double.NaN}" />
             <Setter Property="MinWidth" Value="{DynamicResource AppBarButtonCompactWidth}" />
-        </Style>
-        <Style Selector="^[LabelPosition=Right] /template/ StackPanel#PART_LayoutRoot">
-            <Setter Property="Orientation" Value="Horizontal" />
-        </Style>
-        <Style Selector="^[LabelPosition=Right] /template/ ContentPresenter#PART_IconPresenter">
-            <Setter Property="VerticalAlignment" Value="Center" />
-        </Style>
-        <Style Selector="^[LabelPosition=Right] /template/ TextBlock#PART_Label">
-            <Setter Property="VerticalAlignment" Value="Center" />
+            <Style Selector="^ /template/ StackPanel#PART_LayoutRoot">
+                <Setter Property="Orientation" Value="Horizontal" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
+                <Setter Property="VerticalAlignment" Value="Center" />
+            </Style>
+            <Style Selector="^ /template/ TextBlock#PART_Label">
+                <Setter Property="VerticalAlignment" Value="Center" />
+            </Style>
         </Style>
 
         <!--  IsInOverflow: full-width horizontal layout for use inside overflow popup  -->
         <Style Selector="^[IsInOverflow=True]">
-            <Setter Property="HorizontalAlignment" Value="Stretch" />
             <Setter Property="HorizontalContentAlignment" Value="Left" />
             <Setter Property="Width" Value="{x:Static x:Double.NaN}" />
             <Setter Property="MinHeight" Value="{DynamicResource AppBarButtonOverflowMinHeight}" />
             <Setter Property="Padding" Value="{DynamicResource AppBarButtonOverflowPadding}" />
-        </Style>
-        <Style Selector="^[IsInOverflow=True] /template/ StackPanel#PART_LayoutRoot">
-            <Setter Property="Orientation" Value="Horizontal" />
-        </Style>
-        <Style Selector="^[IsInOverflow=True] /template/ ContentPresenter#PART_IconPresenter">
-            <Setter Property="VerticalAlignment" Value="Center" />
-        </Style>
-        <Style Selector="^[IsInOverflow=True] /template/ TextBlock#PART_Label">
-            <Setter Property="VerticalAlignment" Value="Center" />
+            <Style Selector="^ /template/ StackPanel#PART_LayoutRoot">
+                <Setter Property="Orientation" Value="Horizontal" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
+                <Setter Property="VerticalAlignment" Value="Center" />
+            </Style>
+            <Style Selector="^ /template/ TextBlock#PART_Label">
+                <Setter Property="VerticalAlignment" Value="Center" />
+            </Style>
         </Style>
     </ControlTheme>
 
     <!--  AppBarToggleButton  -->
-    <ControlTheme x:Key="{x:Type AppBarToggleButton}" TargetType="AppBarToggleButton">
-        <Setter Property="Background" Value="{DynamicResource AppBarButtonBackground}" />
-        <Setter Property="Foreground" Value="{DynamicResource AppBarButtonForeground}" />
-        <Setter Property="BorderBrush" Value="Transparent" />
-        <Setter Property="BorderThickness" Value="0" />
-        <Setter Property="Padding" Value="{DynamicResource AppBarButtonPadding}" />
-        <Setter Property="Width" Value="{DynamicResource AppBarButtonWidth}" />
-        <Setter Property="MinHeight" Value="{DynamicResource AppBarButtonMinHeight}" />
-        <Setter Property="CornerRadius" Value="{DynamicResource AppBarButtonCornerRadius}" />
-        <Setter Property="HorizontalContentAlignment" Value="Center" />
-        <Setter Property="VerticalContentAlignment" Value="Center" />
-        <Setter Property="Cursor" Value="Hand" />
-        <Setter Property="Template">
-            <ControlTemplate TargetType="AppBarToggleButton">
-                <Border
-                    Name="PART_Border"
-                    Background="{TemplateBinding Background}"
-                    BorderBrush="{TemplateBinding BorderBrush}"
-                    BorderThickness="{TemplateBinding BorderThickness}"
-                    CornerRadius="{TemplateBinding CornerRadius}"
-                    Padding="{TemplateBinding Padding}">
-                    <StackPanel
-                        Name="PART_LayoutRoot"
-                        Spacing="4"
-                        HorizontalAlignment="Center"
-                        VerticalAlignment="Center">
-                        <ContentPresenter
-                            Name="PART_IconPresenter"
-                            Content="{TemplateBinding Icon}"
-                            Foreground="{TemplateBinding Foreground}"
-                            Width="{DynamicResource AppBarButtonIconSize}"
-                            Height="{DynamicResource AppBarButtonIconSize}"
-                            HorizontalAlignment="Center"
-                            VerticalAlignment="Center">
-                            <ContentPresenter.DataTemplates>
-                                <DataTemplate DataType="Geometry">
-                                    <PathIcon
-                                        Theme="{DynamicResource InnerPathIcon}"
-                                        Data="{Binding}" />
-                                </DataTemplate>
-                            </ContentPresenter.DataTemplates>
-                        </ContentPresenter>
-                        <TextBlock
-                            Name="PART_Label"
-                            Text="{TemplateBinding Label}"
-                            Foreground="{TemplateBinding Foreground}"
-                            FontSize="{DynamicResource AppBarButtonLabelFontSize}"
-                            HorizontalAlignment="Center"
-                            TextTrimming="CharacterEllipsis" />
-                    </StackPanel>
-                </Border>
-            </ControlTemplate>
-        </Setter>
+    <ControlTheme
+        x:Key="{x:Type AppBarToggleButton}"
+        BasedOn="{StaticResource AppBarButtonBaseTheme}"
+        TargetType="AppBarToggleButton">
 
-        <!--  Pointer over  -->
-        <Style Selector="^:pointerover /template/ Border#PART_Border">
-            <Setter Property="Background" Value="{DynamicResource AppBarButtonPointeroverBackground}" />
+        <Style Selector="^ /template/ TextBlock#PART_Label">
+            <Setter Property="Text" Value="{TemplateBinding Label}" />
+        </Style>
+        <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
+            <Setter Property="Content" Value="{TemplateBinding Icon}" />
         </Style>
 
-        <!--  Pressed  -->
-        <Style Selector="^:pressed /template/ Border#PART_Border">
-            <Setter Property="Background" Value="{DynamicResource AppBarButtonPressedBackground}" />
-        </Style>
-
-        <!--  Checked  -->
-        <Style Selector="^:checked /template/ Border#PART_Border">
-            <Setter Property="Background" Value="{DynamicResource AppBarToggleButtonCheckedBackground}" />
-        </Style>
-        <Style Selector="^:checked /template/ ContentPresenter#PART_IconPresenter">
-            <Setter Property="Foreground" Value="{DynamicResource AppBarToggleButtonCheckedForeground}" />
-        </Style>
-        <Style Selector="^:checked /template/ TextBlock#PART_Label">
-            <Setter Property="Foreground" Value="{DynamicResource AppBarToggleButtonCheckedForeground}" />
-        </Style>
-
-        <!--  Checked + Pointer over  -->
-        <Style Selector="^:checked:pointerover /template/ Border#PART_Border">
-            <Setter Property="Background" Value="{DynamicResource AppBarToggleButtonCheckedPointeroverBackground}" />
-        </Style>
-
-        <!--  Disabled  -->
-        <Style Selector="^:disabled /template/ ContentPresenter#PART_IconPresenter">
-            <Setter Property="Foreground" Value="{DynamicResource AppBarButtonDisabledForeground}" />
-        </Style>
-        <Style Selector="^:disabled /template/ TextBlock#PART_Label">
-            <Setter Property="Foreground" Value="{DynamicResource AppBarButtonDisabledForeground}" />
+        <Style Selector="^:checked">
+            <Style Selector="^ /template/ Border#PART_Border">
+                <Setter Property="Background" Value="{DynamicResource AppBarToggleButtonCheckedBackground}" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource AppBarToggleButtonCheckedForeground}" />
+            </Style>
+            <Style Selector="^:pointerover /template/ Border#PART_Border">
+                <Setter Property="Background" Value="{DynamicResource AppBarToggleButtonCheckedPointeroverBackground}" />
+            </Style>
         </Style>
 
         <!--  IsCompact: hide label, use compact width  -->
         <Style Selector="^[IsCompact=True]">
             <Setter Property="Width" Value="{DynamicResource AppBarButtonCompactWidth}" />
-        </Style>
-        <Style Selector="^[IsCompact=True] /template/ TextBlock#PART_Label">
-            <Setter Property="IsVisible" Value="False" />
+            <Style Selector="^ /template/ TextBlock#PART_Label">
+                <Setter Property="IsVisible" Value="False" />
+            </Style>
         </Style>
 
         <!--  LabelPosition=Collapsed: hide label, use compact width  -->
         <Style Selector="^[LabelPosition=Collapsed]">
             <Setter Property="Width" Value="{DynamicResource AppBarButtonCompactWidth}" />
-        </Style>
-        <Style Selector="^[LabelPosition=Collapsed] /template/ TextBlock#PART_Label">
-            <Setter Property="IsVisible" Value="False" />
+            <Style Selector="^ /template/ TextBlock#PART_Label">
+                <Setter Property="IsVisible" Value="False" />
+            </Style>
         </Style>
 
         <!--  LabelPosition=Right: horizontal layout, auto-width  -->
         <Style Selector="^[LabelPosition=Right]">
             <Setter Property="Width" Value="{x:Static x:Double.NaN}" />
             <Setter Property="MinWidth" Value="{DynamicResource AppBarButtonCompactWidth}" />
-        </Style>
-        <Style Selector="^[LabelPosition=Right] /template/ StackPanel#PART_LayoutRoot">
-            <Setter Property="Orientation" Value="Horizontal" />
-        </Style>
-        <Style Selector="^[LabelPosition=Right] /template/ ContentPresenter#PART_IconPresenter">
-            <Setter Property="VerticalAlignment" Value="Center" />
-        </Style>
-        <Style Selector="^[LabelPosition=Right] /template/ TextBlock#PART_Label">
-            <Setter Property="VerticalAlignment" Value="Center" />
+            <Style Selector="^ /template/ StackPanel#PART_LayoutRoot">
+                <Setter Property="Orientation" Value="Horizontal" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
+                <Setter Property="VerticalAlignment" Value="Center" />
+            </Style>
+            <Style Selector="^ /template/ TextBlock#PART_Label">
+                <Setter Property="VerticalAlignment" Value="Center" />
+            </Style>
         </Style>
 
-        <!--  IsInOverflow: full-width horizontal layout  -->
+        <!--  IsInOverflow: full-width horizontal layout for use inside overflow popup  -->
         <Style Selector="^[IsInOverflow=True]">
-            <Setter Property="HorizontalAlignment" Value="Stretch" />
             <Setter Property="HorizontalContentAlignment" Value="Left" />
             <Setter Property="Width" Value="{x:Static x:Double.NaN}" />
             <Setter Property="MinHeight" Value="{DynamicResource AppBarButtonOverflowMinHeight}" />
             <Setter Property="Padding" Value="{DynamicResource AppBarButtonOverflowPadding}" />
-        </Style>
-        <Style Selector="^[IsInOverflow=True] /template/ StackPanel#PART_LayoutRoot">
-            <Setter Property="Orientation" Value="Horizontal" />
-        </Style>
-        <Style Selector="^[IsInOverflow=True] /template/ ContentPresenter#PART_IconPresenter">
-            <Setter Property="VerticalAlignment" Value="Center" />
-        </Style>
-        <Style Selector="^[IsInOverflow=True] /template/ TextBlock#PART_Label">
-            <Setter Property="VerticalAlignment" Value="Center" />
+            <Style Selector="^ /template/ StackPanel#PART_LayoutRoot">
+                <Setter Property="Orientation" Value="Horizontal" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
+                <Setter Property="VerticalAlignment" Value="Center" />
+            </Style>
+            <Style Selector="^ /template/ TextBlock#PART_Label">
+                <Setter Property="VerticalAlignment" Value="Center" />
+            </Style>
         </Style>
     </ControlTheme>
 
@@ -325,18 +295,12 @@
                     <Panel>
                         <DockPanel>
                             <!--  Overflow button (docked right)  -->
-                            <Button
+                            <AppBarButton
                                 Name="PART_OverflowButton"
                                 DockPanel.Dock="Right"
-                                Theme="{DynamicResource AppBarOverflowButton}"
-                                IsVisible="{TemplateBinding IsOverflowButtonVisible}"
-                                VerticalAlignment="Stretch">
-                                <PathIcon
-                                    Width="{DynamicResource AppBarButtonIconSize}"
-                                    Height="{DynamicResource AppBarButtonIconSize}"
-                                    Foreground="{TemplateBinding Foreground}"
-                                    Data="{DynamicResource CommandBarOverflowButtonGlyph}" />
-                            </Button>
+                                Icon="{DynamicResource CommandBarOverflowButtonGlyph}"
+                                IsCompact="True"
+                                IsVisible="{TemplateBinding IsOverflowButtonVisible}" />
 
                             <!--  Custom content (docked left)  -->
                             <ContentPresenter
@@ -369,18 +333,22 @@
                             IsLightDismissEnabled="True"
                             WindowManagerAddShadowHint="False">
                             <Border
+                                MinHeight="{DynamicResource CommandBarOverflowMinHeight}"
+                                MaxWidth="{DynamicResource CommandBarOverflowMaxWidth}"
+                                MaxHeight="{DynamicResource CommandBarOverflowMaxHeight}"
+                                Margin="{DynamicResource CommandBarOverflowMargin}"
+                                Padding="{DynamicResource CommandBarOverflowPadding}"
                                 Background="{DynamicResource CommandBarOverflowBackground}"
                                 BorderBrush="{DynamicResource CommandBarOverflowBorderBrush}"
                                 BorderThickness="{DynamicResource CommandBarBorderThickness}"
                                 BoxShadow="{DynamicResource CommandBarOverflowBoxShadow}"
-                                CornerRadius="{DynamicResource CommandBarOverflowCornerRadius}"
-                                Padding="{DynamicResource CommandBarOverflowPadding}"
-                                MinWidth="{DynamicResource CommandBarOverflowMinWidth}">
+                                CornerRadius="{DynamicResource CommandBarOverflowCornerRadius}">
+
                                 <ItemsControl
                                     ItemsSource="{Binding OverflowItems, RelativeSource={RelativeSource TemplatedParent}}">
                                     <ItemsControl.ItemsPanel>
                                         <ItemsPanelTemplate>
-                                            <StackPanel Spacing="2" />
+                                            <StackPanel />
                                         </ItemsPanelTemplate>
                                     </ItemsControl.ItemsPanel>
                                 </ItemsControl>
@@ -392,15 +360,4 @@
         </Setter>
     </ControlTheme>
 
-    <!--  Overflow button inner theme (borderless, transparent)  -->
-    <ControlTheme x:Key="AppBarOverflowButton" TargetType="Button"
-                  BasedOn="{StaticResource {x:Type Button}}">
-        <Setter Property="Background" Value="Transparent" />
-        <Setter Property="BorderBrush" Value="Transparent" />
-        <Setter Property="BorderThickness" Value="0" />
-        <Setter Property="Padding" Value="{DynamicResource AppBarButtonPadding}" />
-        <Setter Property="MinWidth" Value="{DynamicResource AppBarButtonCompactWidth}" />
-        <Setter Property="CornerRadius" Value="{DynamicResource AppBarButtonCornerRadius}" />
-    </ControlTheme>
-
 </ResourceDictionary>

src/Semi.Avalonia/Themes/Shared/CommandBar.axaml

@@ -1,10 +1,10 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!--  AppBarButton / AppBarToggleButton  -->
-    <x:Double x:Key="AppBarButtonWidth">68</x:Double>
+    <x:Double x:Key="AppBarButtonWidth">64</x:Double>
     <x:Double x:Key="AppBarButtonCompactWidth">40</x:Double>
     <x:Double x:Key="AppBarButtonMinHeight">40</x:Double>
-    <x:Double x:Key="AppBarButtonIconSize">20</x:Double>
     <Thickness x:Key="AppBarButtonPadding">8 4</Thickness>
+    <x:Double x:Key="AppBarButtonPanelSpacing">4</x:Double>
     <StaticResource x:Key="AppBarButtonCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
     <StaticResource x:Key="AppBarButtonLabelFontSize" ResourceKey="SemiFontSizeSmall" />
     <x:Double x:Key="AppBarButtonOverflowMinHeight">36</x:Double>
@@ -22,8 +22,11 @@
     <StaticResource x:Key="CommandBarBorderThickness" ResourceKey="SemiBorderThicknessControl" />
     <!--  CommandBar overflow popup  -->
     <StaticResource x:Key="CommandBarOverflowCornerRadius" ResourceKey="SemiBorderRadiusMedium" />
+    <x:Double x:Key="CommandBarOverflowMinHeight">16</x:Double>
+    <x:Double x:Key="CommandBarOverflowMaxHeight">400</x:Double>
+    <x:Double x:Key="CommandBarOverflowMaxWidth">600</x:Double>
     <Thickness x:Key="CommandBarOverflowPadding">0 4</Thickness>
-    <x:Double x:Key="CommandBarOverflowMinWidth">160</x:Double>
+    <Thickness x:Key="CommandBarOverflowMargin">8</Thickness>
     <!--  Overflow button glyph  -->
     <StaticResource x:Key="CommandBarOverflowButtonGlyph" ResourceKey="SemiIconMore" />
 </ResourceDictionary>