Port microsoft/microsoft-ui-xaml#4532 (#621)

Kinnara · Nov 20, 2023 · e5c8538 · e5c8538
1 parent a0a3cd4
commit e5c8538
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 11 deletions.
diff --git a/ModernWpf.Controls/CommandBar/CommandBar.xaml b/ModernWpf.Controls/CommandBar/CommandBar.xaml
@@ -60,7 +60,7 @@
                             Background="{TemplateBinding Background}">
                             <Grid.ColumnDefinitions>
                                 <ColumnDefinition Width="*" />
-                                <ColumnDefinition Width="Auto" />
+                                <ColumnDefinition Width="Auto" MinWidth="{DynamicResource AppBarMoreButtonColumnMinWidth}"/>
                             </Grid.ColumnDefinitions>
                             <Grid>
                                 <Grid.ColumnDefinitions>

diff --git a/ModernWpf.Controls/CommandBarFlyout/CommandBarFlyout.cs b/ModernWpf.Controls/CommandBarFlyout/CommandBarFlyout.cs
@@ -128,9 +128,23 @@ public CommandBarFlyout()
             {
                 InternalPopup.SuppressFadeAnimation = true;
 
-                if (ShowMode == FlyoutShowMode.Standard)
+                if (m_commandBar is { } commandBar)
                 {
-                    m_commandBar.IsOpen = true;
+                    if (ShowMode == FlyoutShowMode.Standard)
+                    {
+                        m_commandBar.IsOpen = true;
+                    }
+
+                    // When CommandBarFlyout is in AlwaysOpen state, don't show the overflow button
+                    if (AlwaysExpanded)
+                    {
+                        commandBar.IsOpen = true;
+                        commandBar.OverflowButtonVisibility = CommandBarOverflowButtonVisibility.Collapsed;
+                    }
+                    else
+                    {
+                        commandBar.OverflowButtonVisibility = CommandBarOverflowButtonVisibility.Auto;
+                    }
                 }
             };
 
@@ -183,6 +197,8 @@ public CommandBarFlyout()
             };
         }
 
+        public bool AlwaysExpanded { get; set; }
+
         public ObservableCollection<ICommandBarElement> PrimaryCommands { get; }
 
         public ObservableCollection<ICommandBarElement> SecondaryCommands { get; }

diff --git a/ModernWpf.Controls/CommandBarFlyout/CommandBarFlyout.xaml b/ModernWpf.Controls/CommandBarFlyout/CommandBarFlyout.xaml
@@ -798,7 +798,7 @@
                                     <Grid>
                                         <Grid.ColumnDefinitions>
                                             <ColumnDefinition Width="*" />
-                                            <ColumnDefinition Width="Auto" />
+                                            <ColumnDefinition Width="Auto" MinWidth="3"/>
                                         </Grid.ColumnDefinitions>
                                         <primitives:CommandBarPanel
                                             x:Name="PART_ToolBarPanel"

diff --git a/ModernWpf/Styles/CommandBar.xaml b/ModernWpf/Styles/CommandBar.xaml
@@ -16,6 +16,7 @@
     <sys:Double x:Key="AppBarThemeMinHeight">64</sys:Double>
     <sys:Double x:Key="AppBarThemeCompactHeight">48</sys:Double>
     <Thickness x:Key="AppBarEllipsisButtonInnerBorderMargin">2,6,6,6</Thickness>
+    <sys:Double x:Key="AppBarMoreButtonColumnMinWidth">6</sys:Double>
 
     <Thickness x:Key="AppBarButtonContentViewboxMargin">12,16,0,10</Thickness>
     <Thickness x:Key="AppBarButtonContentViewboxCompactMargin">0,12,0,12</Thickness>

diff --git a/test/ModernWpfTestApp/CommandBarFlyoutPage.xaml b/test/ModernWpfTestApp/CommandBarFlyoutPage.xaml
@@ -171,6 +171,28 @@
                     <ui:AppBarButton x:Name="SelectAllButton7" AutomationProperties.AutomationId="SelectAllButton7" Label="Select all" Click="OnElementClicked" />
                 </muxc:CommandBarFlyout.SecondaryCommands>
             </muxc:CommandBarFlyout>
+            <muxc:CommandBarFlyout Placement="Right" x:Key="Flyout8" AutomationProperties.AutomationId="Flyout8" Opened="OnFlyoutOpened" Closed="OnFlyoutClosed" AlwaysExpanded="true">
+                <AppBarButton x:Name="CutButton8" AutomationProperties.AutomationId="CutButton8" Label="Cut" Icon="Cut" Click="OnElementClicked" />
+                <AppBarButton x:Name="CopyButton8" AutomationProperties.AutomationId="CopyButton8" Label="Copy" Icon="Copy" Click="OnElementClicked" />
+                <AppBarButton x:Name="PasteButton8" AutomationProperties.AutomationId="PasteButton8" Label="Paste" Icon="Paste" Click="OnElementClicked" />
+                <AppBarButton x:Name="BoldButton8" AutomationProperties.AutomationId="BoldButton8" Label="Bold" Icon="Bold" Click="OnElementClicked" />
+                <AppBarButton x:Name="ItalicButton8" AutomationProperties.AutomationId="ItalicButton8" Label="Italic" Icon="Italic" Click="OnElementClicked" />
+                <AppBarButton x:Name="UnderlineButton8" AutomationProperties.AutomationId="UnderlineButton8" Label="Underline" Icon="Underline" Click="OnElementClicked" />
+            </muxc:CommandBarFlyout>
+            <muxc:CommandBarFlyout Placement="Right" x:Key="Flyout9" AutomationProperties.AutomationId="Flyout9" Opened="OnFlyoutOpened" Closed="OnFlyoutClosed" AlwaysExpanded="true">
+                <AppBarButton x:Name="CutButton9" AutomationProperties.AutomationId="CutButton9" Label="Cut" Icon="Cut" Click="OnElementClicked" />
+                <AppBarButton x:Name="CopyButton9" AutomationProperties.AutomationId="CopyButton9" Label="Copy" Icon="Copy" Click="OnElementClicked" />
+                <AppBarButton x:Name="PasteButton9" AutomationProperties.AutomationId="PasteButton9" Label="Paste" Icon="Paste" Click="OnElementClicked" />
+                <AppBarButton x:Name="BoldButton9" AutomationProperties.AutomationId="BoldButton9" Label="Bold" Icon="Bold" Click="OnElementClicked" />
+                <AppBarButton x:Name="ItalicButton9" AutomationProperties.AutomationId="ItalicButton9" Label="Italic" Icon="Italic" Click="OnElementClicked" />
+                <AppBarButton x:Name="UnderlineButton9" AutomationProperties.AutomationId="UnderlineButton9" Label="Underline" Icon="Underline" Click="OnElementClicked" />
+                <muxc:CommandBarFlyout.SecondaryCommands>
+                    <AppBarButton x:Name="UndoButton9" AutomationProperties.AutomationId="UndoButton9" Label="Undo" Icon="Undo" Click="OnElementClicked" />
+                    <AppBarButton x:Name="RedoButton9" AutomationProperties.AutomationId="RedoButton9" Label="Redo" Icon="Redo" Click="OnElementClicked" />
+                    <AppBarButton x:Name="SelectAllButton9" AutomationProperties.AutomationId="SelectAllButton9" Label="Select all" Click="OnElementClicked" />
+                    <AppBarToggleButton x:Name="FavoriteToggleButton9" AutomationProperties.AutomationId="FavoriteToggleButton9" Label="Favorite" Icon="Favorite" Checked="OnElementChecked" Unchecked="OnElementUnchecked" />
+                </muxc:CommandBarFlyout.SecondaryCommands>
+            </muxc:CommandBarFlyout>
         </Grid.Resources>
         <ScrollViewer>
             <StackPanel>
@@ -209,6 +231,8 @@
                     Content="Show CommandBarFlyout with non-focusable primary commands"
                     Margin="10"
                     Click="OnFlyoutTarget7Click" />
+                <Button x:Name="FlyoutTarget8" Content="Show CommandBarFlyout with no secondary commands" Margin="10" Click="OnFlyoutTarget8Click" />
+                <Button x:Name="FlyoutTarget9" Content="Show CommandBarFlyout with AlwaysExpanded" Margin="10" Click="OnFlyoutTarget9Click" />
                 <CheckBox
                     x:Name="IsRTLCheckBox"
                     Content="Is Page in RightToLeft FlowDirection?"

diff --git a/test/ModernWpfTestApp/CommandBarFlyoutPage.xaml.cs b/test/ModernWpfTestApp/CommandBarFlyoutPage.xaml.cs
@@ -18,6 +18,8 @@ public sealed partial class CommandBarFlyoutPage : TestPage
         CommandBarFlyout Flyout5 => GetResource<CommandBarFlyout>();
         CommandBarFlyout Flyout6 => GetResource<CommandBarFlyout>();
         CommandBarFlyout Flyout7 => GetResource<CommandBarFlyout>();
+        CommandBarFlyout Flyout8 => GetResource<CommandBarFlyout>();
+        CommandBarFlyout Flyout9 => GetResource<CommandBarFlyout>();
 
         public CommandBarFlyoutPage()
         {
@@ -148,6 +150,16 @@ private void OnFlyoutTarget7Click(object sender, RoutedEventArgs e)
             ShowFlyoutAt(Flyout7, FlyoutTarget7);
         }
 
+        private void OnFlyoutTarget8Click(object sender, RoutedEventArgs e)
+        {
+            ShowFlyoutAt(Flyout8, FlyoutTarget8);
+        }
+
+        private void OnFlyoutTarget9Click(object sender, RoutedEventArgs e)
+        {
+            ShowFlyoutAt(Flyout9, FlyoutTarget9);
+        }
+
         private void ShowFlyoutAt(FlyoutBase flyout, FrameworkElement targetElement, FlyoutShowMode showMode = FlyoutShowMode.Transient)
         {
             //if (PlatformConfiguration.IsOsVersionGreaterThanOrEqual(OSVersion.Redstone5))

diff --git a/test/ModernWpfTestApp/CommandBarPage.xaml b/test/ModernWpfTestApp/CommandBarPage.xaml
@@ -36,18 +36,12 @@
                 </CommandBar.SecondaryCommands>
             </CommandBar>
 
-            <CommandBar DefaultLabelPosition="Right">
+            <CommandBar DefaultLabelPosition="Right" OverflowButtonVisibility="Collapsed">
                 <AppBarButton Icon="Add" Label="Add"/>
                 <AppBarButton Icon="Remove" Label="Remove"/>
                 <AppBarSeparator/>
                 <AppBarButton Icon="Save" Label="Save"/>
                 <AppBarToggleButton Icon="Add" Label="Toggle"/>
-                <CommandBar.SecondaryCommands>
-                    <AppBarButton Icon="Add" Label="Add"/>
-                    <AppBarButton Icon="Remove" Label="Remove"/>
-                    <AppBarSeparator/>
-                    <AppBarToggleButton Icon="Add" Label="Toggle"/>
-                </CommandBar.SecondaryCommands>
             </CommandBar>
 
             <CommandBar DefaultLabelPosition="Collapsed">