[Style] CommandBarFlyout

source/iNKORE.UI.WPF.Modern.Controls/Controls/Windows/CommandBar/AppBarButton.cs

@@ -389,6 +389,7 @@ private void UpdateVisualState(bool useTransitions = true)
             UpdateCommonState(useTransitions);
             UpdateKeyboardAcceleratorTextVisibility(useTransitions);
             UpdateFlyoutState(useTransitions);
+            UpdatePrimaryLabelState(useTransitions);
         }
 
         private void UpdateCommonState(bool useTransitions = true)
@@ -444,6 +445,12 @@ private void UpdateFlyoutState(bool useTransitions = true)
             VisualStateManager.GoToState(this, hasFlyout ? "HasFlyout" : "NoFlyout", useTransitions);
         }
 
+        private void UpdatePrimaryLabelState(bool useTransitions = true)
+        {
+            bool hasPrimaryLabel = !IsInOverflow && Label is not null;
+            VisualStateManager.GoToState(this, hasPrimaryLabel ? "HasPrimaryLabels" : "NoPrimaryLabels", useTransitions);
+        }
+
         private AppBarElementVisualStateManager _vsm;
     }
 

source/iNKORE.UI.WPF.Modern.Controls/Controls/Windows/CommandBarFlyout/CommandBarFlyout.cs

@@ -1,6 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License. See LICENSE in the project root for license information.
 
+using System;
 using System.Collections.Generic;
 using System.Collections.ObjectModel;
 using System.Collections.Specialized;
@@ -141,7 +142,7 @@ public CommandBarFlyout()
 
             Opening += delegate
             {
-                InternalPopup.SuppressFadeAnimation = true;
+                //InternalPopup.SuppressFadeAnimation = true;
 
                 if (ShowMode == FlyoutShowMode.Standard)
                 {

source/iNKORE.UI.WPF.Modern.Controls/Controls/Windows/CommandBarFlyout/CommandBarFlyoutToolBar.cs

@@ -15,6 +15,7 @@
 using iNKORE.UI.WPF.Helpers;
 using iNKORE.UI.WPF.Modern.Common;
 using iNKORE.UI.WPF.Modern.Helpers;
+using iNKORE.UI.WPF.Modern.Helpers.Styles;
 
 namespace iNKORE.UI.WPF.Modern.Controls.Primitives
 {
@@ -168,8 +169,8 @@ public override void OnApplyTemplate()
 
             if (m_layoutRoot != null)
             {
-                m_openingStoryboard = m_layoutRoot.Resources["OpeningStoryboard"] as Storyboard;
-                m_closingStoryboard = m_layoutRoot.Resources["ClosingStoryboard"] as Storyboard;
+                m_openingStoryboard = GetOpeningStoryboard();
+                m_closingStoryboard = GetClosingStoryboard();
             }
 
             if (m_moreButton != null)
@@ -184,14 +185,34 @@ public override void OnApplyTemplate()
 
             if (OverflowPopup is PopupEx popupEx)
             {
-                popupEx.SuppressFadeAnimation = true;
+                //popupEx.SuppressFadeAnimation = true;
             }
 
             AttachEventHandlers();
             UpdateFlowsFromAndFlowsTo();
             UpdateUI(false /* useTransitions */);
         }
 
+        private Storyboard GetOpeningStoryboard()
+        {
+            if (m_layoutRoot.Resources["OpeningOpacityStoryboard"] is Storyboard opacityStoryboard)
+            {
+                return opacityStoryboard;
+            }
+
+            return m_layoutRoot.Resources["OpeningStoryboard"] as Storyboard;
+        }
+
+        private Storyboard GetClosingStoryboard()
+        {
+            if (m_layoutRoot.Resources["ClosingOpacityStoryboard"] is Storyboard opacityStoryboard)
+            {
+                return opacityStoryboard;
+            }
+
+            return m_layoutRoot.Resources["ClosingStoryboard"] as Storyboard; 
+        }
+
         protected override void OnIsKeyboardFocusWithinChanged(DependencyPropertyChangedEventArgs e)
         {
             if (!(bool)e.NewValue)
@@ -401,10 +422,11 @@ bool isElementFocusable(ICommandBarElement element, bool checkTabStop)
         }
 
         void UpdateUI(
-            bool useTransitions = true)
+            bool useTransitions = true,
+            bool isForSizeChange = false)
         {
             UpdateTemplateSettings();
-            UpdateVisualState(useTransitions);
+            UpdateVisualState(useTransitions, isForSizeChange);
 
             UpdateShadow();
 
@@ -415,7 +437,7 @@ void UpdateUI(
         }
 
         void UpdateVisualState(
-            bool useTransitions)
+            bool useTransitions, bool isForSizeChange)
         {
             if (IsOpen)
             {
@@ -446,6 +468,11 @@ void UpdateVisualState(
 
                 void updateExpansionStates()
                 {
+                    if (isForSizeChange)
+                    {
+                        VisualStateManager.GoToState(this, "Collapsed", useTransitions);
+                    }
+
                     if (shouldExpandUp)
                     {
                         VisualStateManager.GoToState(this, "ExpandedUp", useTransitions);
@@ -503,7 +530,51 @@ void updateExpansionStates()
                 VisualStateManager.GoToState(this, "Default", useTransitions);
                 VisualStateManager.GoToState(this, "Collapsed", useTransitions);
             }
+
+            // If no primary command has labels, then we'll shrink down the size of primary commands since the extra space to accommodate labels is unnecessary.
+            bool hasPrimaryCommandLabels = false;
+            foreach (var primaryCommand in PrimaryCommands)
+            {
+                if (HasVisibleLabel(primaryCommand as AppBarButton) ||
+                    HasVisibleLabel(primaryCommand as AppBarToggleButton))
+                {
+                    hasPrimaryCommandLabels = true;
+                    break;
+                }
+            }
+
+            foreach (var command in PrimaryCommands)
+            {
+                if (command is Control commandControl)
+                {
+                    VisualStateManager.GoToState(commandControl,
+                        hasPrimaryCommandLabels ? "HasPrimaryLabels" : "NoPrimaryLabels", useTransitions);
+                }
+            }
+
+            foreach (var command in SecondaryCommands)
+            {
+                if (command is Control commandControl)
+                {
+                    VisualStateManager.GoToState(commandControl, "NoPrimaryLabels", useTransitions);
+                }
+            }
+
+            VisualStateManager.GoToState(this, hasPrimaryCommandLabels ? "HasPrimaryLabels" : "NoPrimaryLabels",
+                useTransitions);
         }
+
+        bool HasVisibleLabel(AppBarButton command) =>
+            command != null &&
+            !string.IsNullOrEmpty(command.Label as string) &&
+            command.Visibility == Visibility.Visible &&
+            command.LabelPosition == CommandBarLabelPosition.Default;
+
+        bool HasVisibleLabel(AppBarToggleButton command) =>
+            command != null &&
+            !string.IsNullOrEmpty(command.Label as string) &&
+            command.Visibility == Visibility.Visible &&
+            command.LabelPosition == CommandBarLabelPosition.Default;
 
         void UpdateTemplateSettings()
         {
@@ -1033,8 +1104,8 @@ internal void ClearShadow()
 
         private void SecondaryItemsRootSizeChanged(object sender, SizeChangedEventArgs e)
         {
-            //m_secondaryItemsRootSized = true;
-            UpdateUI();
+            m_secondaryItemsRootSized = true;
+            UpdateUI(isForSizeChange: true);
         }
 
         private void SecondaryItemsRootPreviewKeyDown(object sender, KeyEventArgs args)

source/iNKORE.UI.WPF.Modern.Gallery/Pages/Controls/Windows/CommandBarFlyoutPage.xaml

@@ -21,16 +21,27 @@
                 </ui:AppBarButton.Icon>
 
             </ui:AppBarButton>
+
             <ui:AppBarButton
                 Click="OnElementClicked"
-                Icon="Save"
                 Label="Save"
-                ToolTipService.ToolTip="Save" />
+                ToolTipService.ToolTip="Save">
+                <ui:AppBarButton.Icon>
+                    <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Save}" />
+                </ui:AppBarButton.Icon>
+
+            </ui:AppBarButton>
+
             <ui:AppBarButton
                 Click="OnElementClicked"
-                Icon="Delete"
                 Label="Delete"
-                ToolTipService.ToolTip="Delete" />
+                ToolTipService.ToolTip="Delete">
+                <ui:AppBarButton.Icon>
+                    <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Delete}" />
+                </ui:AppBarButton.Icon>
+
+            </ui:AppBarButton>
+
             <ui:CommandBarFlyout.SecondaryCommands>
                 <ui:AppBarButton Click="OnElementClicked" Label="Resize" />
                 <ui:AppBarButton Click="OnElementClicked" Label="Move" />

source/iNKORE.UI.WPF.Modern.Gallery/Pages/Controls/Windows/CommandBarFlyoutPage.xaml.cs

@@ -37,6 +37,7 @@ private void OnElementClicked(object sender, RoutedEventArgs e)
 
         private void ShowMenu(bool isTransient)
         {
+            CommandBarFlyout1.ShowMode = isTransient ? FlyoutShowMode.Transient : FlyoutShowMode.Standard;
             CommandBarFlyout1.ShowAt(Image1);
         }
 
@@ -48,7 +49,7 @@ private void MyImageButton_ContextMenuOpening(object sender, ContextMenuEventArg
 
         private void MyImageButton_Click(object sender, RoutedEventArgs e)
         {
-            ShowMenu((sender as Button).IsMouseOver);
+            ShowMenu(true);
         }
 
         #region Example Code

source/iNKORE.UI.WPF.Modern/Themes/Controls/CommandBar.xaml

@@ -81,10 +81,15 @@
         <Setter Property="BorderBrush" Value="{DynamicResource CommandBarFlyoutAppBarButtonBorderBrush}" />
         <Setter Property="Padding" Value="0" />
         <Setter Property="Width" Value="44" />
-        <Setter Property="Height" Value="40" />
+        <Setter Property="MinHeight" Value="40" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
         <Setter Property="HorizontalContentAlignment" Value="Center" />
+        <Setter Property="VerticalAlignment" Value="Stretch" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="FontWeight" Value="SemiBold" />
+        <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
         <Setter Property="chelper:FocusVisualHelper.FocusVisualMargin" Value="0" />
+        <Setter Property="chelper:ControlHelper.CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="ToggleButton">