From 68f1a56a37b66bff4a0ff79615af5a535c7b94fa Mon Sep 17 00:00:00 2001
From: Mohamed Hazem <72768725+mou-haz@users.noreply.github.com>
Date: Sun, 29 Jun 2025 22:50:14 +0300
Subject: [PATCH 1/2] [Fix] Update CommandBarFlyou Style

updated command bar flyout and appbar button style to be more like the winui counterparts

minor test

minor test
---
 .../Windows/CommandBar/AppBarButton.cs        |   7 +
 .../CommandBarFlyout/CommandBarFlyout.cs      |   3 +-
 .../CommandBarFlyout/CommandBarFlyout.xaml    | 449 ++++++++++++------
 .../CommandBarFlyoutToolBar.cs                |  87 +++-
 .../Windows/CommandBarFlyoutPage.xaml.cs      |   3 +-
 .../Themes/Controls/CommandBar.xaml           |   7 +-
 6 files changed, 390 insertions(+), 166 deletions(-)

diff --git a/source/iNKORE.UI.WPF.Modern.Controls/Controls/Windows/CommandBar/AppBarButton.cs b/source/iNKORE.UI.WPF.Modern.Controls/Controls/Windows/CommandBar/AppBarButton.cs
index 5b1a0663..2da7ae98 100644
--- a/source/iNKORE.UI.WPF.Modern.Controls/Controls/Windows/CommandBar/AppBarButton.cs
+++ b/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;
     }
 
diff --git a/source/iNKORE.UI.WPF.Modern.Controls/Controls/Windows/CommandBarFlyout/CommandBarFlyout.cs b/source/iNKORE.UI.WPF.Modern.Controls/Controls/Windows/CommandBarFlyout/CommandBarFlyout.cs
index 1728650b..7742b20b 100644
--- a/source/iNKORE.UI.WPF.Modern.Controls/Controls/Windows/CommandBarFlyout/CommandBarFlyout.cs
+++ b/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)
                 {
diff --git a/source/iNKORE.UI.WPF.Modern.Controls/Controls/Windows/CommandBarFlyout/CommandBarFlyout.xaml b/source/iNKORE.UI.WPF.Modern.Controls/Controls/Windows/CommandBarFlyout/CommandBarFlyout.xaml
index 3854d2e9..c70775d3 100644
--- a/source/iNKORE.UI.WPF.Modern.Controls/Controls/Windows/CommandBarFlyout/CommandBarFlyout.xaml
+++ b/source/iNKORE.UI.WPF.Modern.Controls/Controls/Windows/CommandBarFlyout/CommandBarFlyout.xaml
@@ -24,10 +24,8 @@
         <Setter Property="VerticalAlignment" Value="Stretch" />
         <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
         <Setter Property="FontWeight" Value="Normal" />
-        <Setter Property="Width" Value="40" />
-        <Setter Property="Height" Value="40" />
+        <Setter Property="Width" Value="NaN" />
         <Setter Property="UseSystemFocusVisuals" Value="{DynamicResource UseSystemFocusVisuals}" />
-        <Setter Property="FocusVisualMargin" Value="0,0,0,2" />
         <Setter Property="FocusVisualStyle" Value="{DynamicResource {x:Static SystemParameters.FocusVisualStyleKey}}" />
         <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
         <Setter Property="Template">
@@ -46,21 +44,37 @@
                             BorderThickness="{TemplateBinding BorderThickness}"
                             CornerRadius="{TemplateBinding CornerRadius}" />
 
-                        <Grid x:Name="ContentRoot">
+                        <Grid x:Name="ContentRoot" MinWidth="40">
                             <Grid.ColumnDefinitions>
                                 <ColumnDefinition Width="*" />
                                 <ColumnDefinition Width="Auto" />
                                 <ColumnDefinition Width="Auto" />
                             </Grid.ColumnDefinitions>
-                            <Viewbox
-                                x:Name="ContentViewbox"
-                                Height="16"
-                                HorizontalAlignment="Stretch">
-                                <ui:ContentPresenterEx
-                                    x:Name="Content"
-                                    Content="{TemplateBinding Icon}"
-                                    Foreground="{TemplateBinding Foreground}" />
-                            </Viewbox>
+                            <Grid x:Name="IconAndLabelPanel" VerticalAlignment="Center">
+                                <Grid.RowDefinitions>
+                                    <RowDefinition Height="*" />
+                                    <RowDefinition Height="Auto" />
+                                </Grid.RowDefinitions>
+                                <Viewbox x:Name="ContentViewbox" Height="16">
+                                    <ui:ContentPresenterEx 
+                                        x:Name="Content"
+                                        Content="{TemplateBinding Icon}"
+                                        Foreground="{TemplateBinding Foreground}"/>
+                                </Viewbox>
+                                <TextBlock x:Name="TextLabel" 
+                                           Grid.Row="1"
+                                           Text="{TemplateBinding Label}" 
+                                           Style="{DynamicResource CaptionTextBlockStyle}" 
+                                           Foreground="{TemplateBinding Foreground}"
+                                           FontFamily="{TemplateBinding FontFamily}" 
+                                           TextAlignment="Center"
+                                           TextTrimming="CharacterEllipsis"
+                                           TextWrapping="NoWrap" 
+                                           HorizontalAlignment="Stretch"
+                                           VerticalAlignment="Center"
+                                           Margin="0,6,0,2" 
+                                           Visibility="Collapsed" />
+                            </Grid>
                             <TextBlock
                                 x:Name="OverflowTextLabel"
                                 Margin="12,0,12,0"
@@ -73,6 +87,7 @@
                                 Text="{TemplateBinding Label}"
                                 TextAlignment="Left"
                                 TextWrapping="NoWrap"
+                                TextTrimming="CharacterEllipsis"
                                 Visibility="Collapsed" />
                             <TextBlock
                                 x:Name="KeyboardAcceleratorTextLabel"
@@ -90,10 +105,10 @@
                                 Grid.Column="2"
                                 Margin="12,0,12,0"
                                 VerticalAlignment="Center"
-                                FontFamily="{DynamicResource FluentSystemIcons}"
+                                FontFamily="{DynamicResource SymbolThemeFontFamily}"
                                 FontSize="12"
                                 Foreground="{DynamicResource CommandBarFlyoutAppBarButtonSubItemChevronForeground}"
-                                Glyph="&#xF2B0;"
+                                Glyph="&#xE76C;"
                                 Visibility="Collapsed" />
                         </Grid>
                         <VisualStateManager.VisualStateGroups>
@@ -137,6 +152,13 @@
                                 <VisualState x:Name="NoFlyout" />
                                 <VisualState x:Name="HasFlyout" />
                             </VisualStateGroup>
+                            <VisualStateGroup x:Name="PrimaryLabelStates">
+                                <ui:VisualStateGroupListener.Listener>
+                                    <ui:VisualStateGroupListener x:Name="PrimaryLabelStatesListener" />
+                                </ui:VisualStateGroupListener.Listener>
+                                <VisualState x:Name="NoPrimaryLabels" />
+                                <VisualState x:Name="HasPrimaryLabels" />
+                            </VisualStateGroup>
                         </VisualStateManager.VisualStateGroups>
                     </Grid>
                     <ControlTemplate.Triggers>
@@ -147,6 +169,7 @@
                             <Setter TargetName="ContentRoot" Property="Width" Value="NaN" />
                             <Setter TargetName="ContentViewbox" Property="Visibility" Value="Collapsed" />
                             <Setter TargetName="ContentViewbox" Property="Margin" Value="12,0,12,0" />
+                            <Setter TargetName="TextLabel" Property="Visibility" Value="Collapsed" />
                             <Setter TargetName="OverflowTextLabel" Property="Visibility" Value="Visible" />
                         </Trigger>
                         <!--  OverflowWithToggleButtons  -->
@@ -154,6 +177,7 @@
                             <Setter TargetName="ContentRoot" Property="MinHeight" Value="0" />
                             <Setter TargetName="ContentRoot" Property="Width" Value="NaN" />
                             <Setter TargetName="ContentViewbox" Property="Visibility" Value="Collapsed" />
+                            <Setter TargetName="TextLabel" Property="Visibility" Value="Collapsed" />
                             <Setter TargetName="OverflowTextLabel" Property="Visibility" Value="Visible" />
                             <Setter TargetName="OverflowTextLabel" Property="Margin" Value="39,0,12,0" />
                         </Trigger>
@@ -166,6 +190,7 @@
                             <Setter TargetName="ContentViewbox" Property="Width" Value="16" />
                             <Setter TargetName="ContentViewbox" Property="Height" Value="16" />
                             <Setter TargetName="ContentViewbox" Property="Margin" Value="12,0,12,0" />
+                            <Setter TargetName="TextLabel" Property="Visibility" Value="Collapsed" />
                             <Setter TargetName="OverflowTextLabel" Property="Visibility" Value="Visible" />
                             <Setter TargetName="OverflowTextLabel" Property="Margin" Value="39,0,12,0" />
                         </Trigger>
@@ -178,6 +203,7 @@
                             <Setter TargetName="ContentViewbox" Property="Width" Value="16" />
                             <Setter TargetName="ContentViewbox" Property="Height" Value="16" />
                             <Setter TargetName="ContentViewbox" Property="Margin" Value="39,0,12,0" />
+                            <Setter TargetName="TextLabel" Property="Visibility" Value="Collapsed" />
                             <Setter TargetName="OverflowTextLabel" Property="Visibility" Value="Visible" />
                             <Setter TargetName="OverflowTextLabel" Property="Margin" Value="67,0,12,0" />
                         </Trigger>
@@ -187,16 +213,19 @@
                         <Trigger SourceName="CommonStatesListener" Property="CurrentStateName" Value="PointerOver">
                             <Setter TargetName="AppBarButtonInnerBorder" Property="Background" Value="{DynamicResource CommandBarFlyoutAppBarButtonBackgroundPointerOver}" />
                             <Setter TargetName="Content" Property="Foreground" Value="{DynamicResource CommandBarFlyoutAppBarButtonForegroundPointerOver}" />
+                            <Setter TargetName="TextLabel" Property="Foreground" Value="{DynamicResource CommandBarFlyoutAppBarButtonForegroundPointerOver}" />
                         </Trigger>
                         <!--  Pressed  -->
                         <Trigger SourceName="CommonStatesListener" Property="CurrentStateName" Value="Pressed">
                             <Setter TargetName="AppBarButtonInnerBorder" Property="Background" Value="{DynamicResource CommandBarFlyoutAppBarButtonBackgroundPressed}" />
                             <Setter TargetName="Content" Property="Foreground" Value="{DynamicResource CommandBarFlyoutAppBarButtonForegroundPressed}" />
+                            <Setter TargetName="TextLabel" Property="Foreground" Value="{DynamicResource CommandBarFlyoutAppBarButtonForegroundPressed}" />
                         </Trigger>
                         <!--  Disabled  -->
                         <Trigger SourceName="CommonStatesListener" Property="CurrentStateName" Value="Disabled">
                             <Setter TargetName="AppBarButtonInnerBorder" Property="Background" Value="{DynamicResource CommandBarFlyoutAppBarButtonBackgroundDisabled}" />
                             <Setter TargetName="Content" Property="Foreground" Value="{DynamicResource CommandBarFlyoutAppBarButtonForegroundDisabled}" />
+                            <Setter TargetName="TextLabel" Property="Foreground" Value="{DynamicResource CommandBarFlyoutAppBarButtonForegroundDisabled}" />
                             <Setter TargetName="OverflowTextLabel" Property="Foreground" Value="{DynamicResource CommandBarFlyoutAppBarButtonForegroundDisabled}" />
                             <Setter TargetName="KeyboardAcceleratorTextLabel" Property="Foreground" Value="{DynamicResource CommandBarFlyoutAppBarButtonForegroundDisabled}" />
                             <Setter TargetName="SubItemChevron" Property="Foreground" Value="{DynamicResource CommandBarFlyoutAppBarButtonSubItemChevronDisabledForeground}" />
@@ -234,6 +263,13 @@
                         <Trigger SourceName="FlyoutStatesListener" Property="CurrentStateName" Value="HasFlyout">
                             <Setter TargetName="SubItemChevron" Property="Visibility" Value="{DynamicResource AppBarButtonHasFlyoutChevronVisibility}" />
                         </Trigger>
+                        <!--  HasPrimaryLabels  -->
+                        <Trigger SourceName="PrimaryLabelStatesListener" Property="CurrentStateName" Value="HasPrimaryLabels">
+                            <Setter TargetName="IconAndLabelPanel" Property="Margin" Value="0,9,0,0" />
+                            <Setter TargetName="IconAndLabelPanel" Property="VerticalAlignment" Value="Top" />
+                            <Setter TargetName="IconAndLabelPanel" Property="Width" Value="60" />
+                            <Setter TargetName="TextLabel" Property="Visibility" Value="Visible" />
+                        </Trigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>
             </Setter.Value>
@@ -755,18 +791,22 @@
                         Background="{TemplateBinding Background}"
                         CornerRadius="{TemplateBinding CornerRadius}"
                         SnapsToDevicePixels="True">
+                        <Border.Resources>
+                            <Visibility x:Key="AppBarButtonHasFlyoutChevronVisibility">Visible</Visibility>
+                        </Border.Resources>
                         <Grid>
                             <Border
                                 BorderBrush="{TemplateBinding BorderBrush}"
                                 BorderThickness="{TemplateBinding BorderThickness}"
-                                CornerRadius="{TemplateBinding CornerRadius}" />
+                                CornerRadius="{TemplateBinding CornerRadius}"
+                                Padding="{TemplateBinding BorderThickness}"/>
                             <ui:ScrollViewerEx
-                                Margin="{TemplateBinding BorderThickness}"
-                                Padding="0,4,0,4"
+                                Margin="3"
                                 Content="{TemplateBinding Content}"
                                 HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                 SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
-                                VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" />
+                                VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" >
+                            </ui:ScrollViewerEx>
                         </Grid>
                         <VisualStateManager.VisualStateGroups>
                             <VisualStateGroup x:Name="DisplayModeStates">
@@ -781,6 +821,19 @@
         </Setter>
     </Style>
 
+    <KeySpline x:Key="ControlFastOutSlowInKeySpline">0,0,0,1</KeySpline>
+    
+    <Duration x:Key="ControlNormalAnimationDuration">00:00:00.250</Duration>
+    <Duration x:Key="ControlFastAnimationDuration">00:00:00.167</Duration>
+    <Duration x:Key="ControlFastAnimationAfterDuration">00:00:00.168</Duration>
+    <Duration x:Key="ControlFasterAnimationDuration">00:00:00.083</Duration>
+    
+    <Duration x:Key="PopupAnimationDelayDuration">00:00:00.150</Duration>
+
+    <KeyTime x:Key="ControlNormalAnimationKeyTime">00:00:00.250</KeyTime>
+    <KeyTime x:Key="ControlFastAnimationKeyTime">00:00:00.167</KeyTime>
+    <KeyTime x:Key="ControlFastAnimationAfterKeyTime">00:00:00.168</KeyTime>
+
     <Style TargetType="primitives:CommandBarFlyoutToolBar">
         <Setter Property="Template">
             <Setter.Value>
@@ -790,90 +843,59 @@
                         CornerRadius="{TemplateBinding CornerRadius}"
                         SnapsToDevicePixels="True">
                         <Border.Resources>
+                            <Visibility x:Key="AppBarButtonHasFlyoutChevronVisibility">Collapsed</Visibility>
+                            
+                            <ui:BindingProxy x:Key="CornerRadiusProxy" Value="{Binding ElementName=LayoutRoot, Path=CornerRadius, Mode=OneWay}"/>
                             <primitives:CommandBarFlyoutCommandBarTemplateSettingsProxy x:Key="TemplateSettingsProxy" FlyoutTemplateSettings="{Binding FlyoutTemplateSettings, RelativeSource={RelativeSource TemplatedParent}, Mode=OneTime}" />
+                            
                             <Style BasedOn="{StaticResource CommandBarFlyoutAppBarButtonStyle}" TargetType="local:AppBarButton" />
                             <Style BasedOn="{StaticResource CommandBarFlyoutAppBarRepeatButtonStyle}" TargetType="local:AppBarRepeatButton" />
                             <Style BasedOn="{StaticResource CommandBarFlyoutAppBarToggleButtonStyle}" TargetType="local:AppBarToggleButton" />
+
                             <!--
                                 We'll only provide opening and closing storyboards for RS5 and above,
                                 because we aren't able to suppress the default flyout open/close animations
                                 on earlier versions of the OS than that.
                             -->
-                            <Storyboard x:Key="OpeningStoryboard" FillBehavior="Stop">
-                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="OuterContentRootClipTransform" Storyboard.TargetProperty="X">
-                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.OpenAnimationStartPosition}" />
-                                    <SplineDoubleKeyFrame
-                                        KeySpline="0.1,0.9 0.2,1"
-                                        KeyTime="0:0:0.300"
-                                        Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.OpenAnimationEndPosition}" />
-                                </DoubleAnimationUsingKeyFrames>
-                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="OuterOverflowContentRootClipTransform" Storyboard.TargetProperty="X">
-                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.OpenAnimationStartPosition}" />
-                                    <SplineDoubleKeyFrame
-                                        KeySpline="0.1,0.9 0.2,1"
-                                        KeyTime="0:0:0.300"
-                                        Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.OpenAnimationEndPosition}" />
-                                </DoubleAnimationUsingKeyFrames>
+                            <Storyboard x:Key="OpeningOpacityStoryboard" FillBehavior="Stop">
+                                <DoubleAnimation Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="{StaticResource PopupAnimationDelayDuration}" />
+                                <DoubleAnimation Storyboard.TargetName="OverflowPopup" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="{StaticResource PopupAnimationDelayDuration}" />
                             </Storyboard>
-                            <!--
-                                The closing animation plays the opening animation in reverse and then snaps to a position where
-                                the clip will fully hide the flyout, in preparation for closing the flyout.
-                                As such, it's expected and normal that we use OpenAnimation* template settings properties
-                                in the closing animation.
-                            -->
-                            <Storyboard x:Key="ClosingStoryboard">
-                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="OuterContentRootClipTransform" Storyboard.TargetProperty="X">
-                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.OpenAnimationEndPosition}" />
-                                    <SplineDoubleKeyFrame
-                                        KeySpline="0.7,0 1,0.5"
-                                        KeyTime="0:0:0.150"
-                                        Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.OpenAnimationStartPosition}" />
-                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.151" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.CloseAnimationEndPosition}" />
-                                </DoubleAnimationUsingKeyFrames>
-                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="OuterOverflowContentRootClipTransform" Storyboard.TargetProperty="X">
-                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.OpenAnimationEndPosition}" />
-                                    <SplineDoubleKeyFrame
-                                        KeySpline="0.7,0 1,0.5"
-                                        KeyTime="0:0:0.150"
-                                        Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.OpenAnimationStartPosition}" />
-                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.151" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.CloseAnimationEndPosition}" />
-                                </DoubleAnimationUsingKeyFrames>
+                            <Storyboard x:Key="ClosingOpacityStoryboard" FillBehavior="HoldEnd">
+                                <DoubleAnimation Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="{StaticResource PopupAnimationDelayDuration}" />
+                                <DoubleAnimation Storyboard.TargetName="OverflowPopup" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="{StaticResource PopupAnimationDelayDuration}" />
                             </Storyboard>
+                            
                             <Storyboard x:Key="CollapsedToExpandedUpStoryboard">
-                                <DoubleAnimation
-                                    Storyboard.TargetName="OuterOverflowContentRoot"
-                                    Storyboard.TargetProperty="Opacity"
-                                    To="1"
-                                    Duration="0" />
                                 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="Width">
                                     <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.ExpandedWidth}" />
                                 </ObjectAnimationUsingKeyFrames>
                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MoreButtonTransform" Storyboard.TargetProperty="X">
                                     <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.WidthExpansionMoreButtonAnimationStartPosition}" />
                                     <SplineDoubleKeyFrame
-                                        KeySpline="0.1,0.9 0.2,1"
-                                        KeyTime="0:0:0.300"
+                                        KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
+                                        KeyTime="{StaticResource ControlNormalAnimationKeyTime}"
                                         Value="0" />
                                 </DoubleAnimationUsingKeyFrames>
                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentRootClipTransform" Storyboard.TargetProperty="X">
                                     <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.WidthExpansionAnimationStartPosition}" />
                                     <SplineDoubleKeyFrame
-                                        KeySpline="0.1,0.9 0.2,1"
-                                        KeyTime="0:0:0.300"
+                                        KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
+                                        KeyTime="{StaticResource ControlNormalAnimationKeyTime}"
                                         Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.WidthExpansionAnimationEndPosition}" />
                                 </DoubleAnimationUsingKeyFrames>
                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="OverflowContentRootClipTransform" Storyboard.TargetProperty="X">
                                     <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.WidthExpansionAnimationStartPosition}" />
                                     <SplineDoubleKeyFrame
-                                        KeySpline="0.1,0.9 0.2,1"
-                                        KeyTime="0:0:0.300"
+                                        KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
+                                        KeyTime="{StaticResource ControlNormalAnimationKeyTime}"
                                         Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.WidthExpansionAnimationEndPosition}" />
                                 </DoubleAnimationUsingKeyFrames>
                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="OverflowContentRootClipTransform" Storyboard.TargetProperty="Y">
                                     <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.ExpandUpAnimationStartPosition}" />
                                     <SplineDoubleKeyFrame
-                                        KeySpline="0.1,0.9 0.2,1"
-                                        KeyTime="0:0:0.300"
+                                        KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
+                                        KeyTime="{StaticResource ControlNormalAnimationKeyTime}"
                                         Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.ExpandUpAnimationEndPosition}" />
                                 </DoubleAnimationUsingKeyFrames>
                                 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="CornerRadius">
@@ -888,83 +910,82 @@
                                 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SecondaryItemsControl" Storyboard.TargetProperty="CornerRadius">
                                     <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopCornerRadiusFilterConverter}}" />
                                 </ObjectAnimationUsingKeyFrames>
+                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PrimaryItemsRoot" Storyboard.TargetProperty="VerticalAlignment">
+                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static VerticalAlignment.Bottom}" />
+                                </ObjectAnimationUsingKeyFrames>
                             </Storyboard>
+                            
                             <Storyboard x:Key="ExpandedUpToCollapsedStoryboard" FillBehavior="Stop">
-                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="OuterOverflowContentRoot" Storyboard.TargetProperty="Opacity">
-                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1" />
-                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.151" Value="0" />
-                                </DoubleAnimationUsingKeyFrames>
                                 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="Width">
                                     <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.ExpandedWidth}" />
                                 </ObjectAnimationUsingKeyFrames>
                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MoreButtonTransform" Storyboard.TargetProperty="X">
                                     <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0" />
                                     <SplineDoubleKeyFrame
-                                        KeySpline="0.7,0 1,0.5"
-                                        KeyTime="0:0:0.150"
+                                        KeyTime="{StaticResource ControlFastAnimationKeyTime}"
+                                        KeySpline="{StaticResource ControlFastOutSlowInKeySpline}" 
                                         Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.WidthExpansionMoreButtonAnimationStartPosition}" />
-                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.151" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.WidthExpansionMoreButtonAnimationEndPosition}" />
+                                    <DiscreteDoubleKeyFrame KeyTime="{StaticResource ControlFastAnimationAfterKeyTime}" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.WidthExpansionMoreButtonAnimationEndPosition}" />
                                 </DoubleAnimationUsingKeyFrames>
                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentRootClipTransform" Storyboard.TargetProperty="X">
                                     <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.WidthExpansionAnimationEndPosition}" />
                                     <SplineDoubleKeyFrame
-                                        KeySpline="0.7,0 1,0.5"
-                                        KeyTime="0:0:0.150"
+                                        KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
+                                        KeyTime="{StaticResource ControlFastAnimationKeyTime}"
                                         Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.WidthExpansionAnimationStartPosition}" />
-                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.151" Value="0" />
+                                    <DiscreteDoubleKeyFrame KeyTime="{StaticResource ControlFastAnimationAfterKeyTime}" Value="0" />
                                 </DoubleAnimationUsingKeyFrames>
                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="OverflowContentRootClipTransform" Storyboard.TargetProperty="X">
                                     <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.WidthExpansionAnimationEndPosition}" />
                                     <SplineDoubleKeyFrame
-                                        KeySpline="0.7,0 1,0.5"
-                                        KeyTime="0:0:0.150"
+                                        KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
+                                        KeyTime="{StaticResource ControlFastAnimationKeyTime}"
                                         Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.WidthExpansionAnimationStartPosition}" />
-                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.151" Value="0" />
+                                    <DiscreteDoubleKeyFrame KeyTime="{StaticResource ControlFastAnimationAfterKeyTime}" Value="0" />
                                 </DoubleAnimationUsingKeyFrames>
                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="OverflowContentRootClipTransform" Storyboard.TargetProperty="Y">
                                     <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.ExpandUpAnimationEndPosition}" />
                                     <SplineDoubleKeyFrame
-                                        KeySpline="0.7,0 1,0.5"
-                                        KeyTime="0:0:0.150"
+                                        KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
+                                        KeyTime="{StaticResource ControlFastAnimationKeyTime}"
                                         Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.ExpandUpAnimationStartPosition}" />
-                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.151" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.ExpandUpAnimationHoldPosition}" />
+                                    <DiscreteDoubleKeyFrame KeyTime="{StaticResource ControlFastAnimationAfterKeyTime}" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.ExpandUpAnimationHoldPosition}" />
                                 </DoubleAnimationUsingKeyFrames>
+                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PrimaryItemsRoot" Storyboard.TargetProperty="VerticalAlignment">
+                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static VerticalAlignment.Bottom}" />
+                                </ObjectAnimationUsingKeyFrames>
                             </Storyboard>
+                            
                             <Storyboard x:Key="CollapsedToExpandedDownStoryboard">
-                                <DoubleAnimation
-                                    Storyboard.TargetName="OuterOverflowContentRoot"
-                                    Storyboard.TargetProperty="Opacity"
-                                    To="1"
-                                    Duration="0" />
                                 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="Width">
                                     <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.ExpandedWidth}" />
                                 </ObjectAnimationUsingKeyFrames>
                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MoreButtonTransform" Storyboard.TargetProperty="X">
                                     <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.WidthExpansionMoreButtonAnimationStartPosition}" />
                                     <SplineDoubleKeyFrame
-                                        KeySpline="0.1,0.9 0.2,1"
-                                        KeyTime="0:0:0.300"
+                                        KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
+                                        KeyTime="{StaticResource ControlNormalAnimationKeyTime}"
                                         Value="0" />
                                 </DoubleAnimationUsingKeyFrames>
                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentRootClipTransform" Storyboard.TargetProperty="X">
                                     <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.WidthExpansionAnimationStartPosition}" />
                                     <SplineDoubleKeyFrame
-                                        KeySpline="0.1,0.9 0.2,1"
-                                        KeyTime="0:0:0.300"
+                                        KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
+                                        KeyTime="{StaticResource ControlNormalAnimationKeyTime}"
                                         Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.WidthExpansionAnimationEndPosition}" />
                                 </DoubleAnimationUsingKeyFrames>
                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="OverflowContentRootClipTransform" Storyboard.TargetProperty="X">
                                     <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.WidthExpansionAnimationStartPosition}" />
                                     <SplineDoubleKeyFrame
-                                        KeySpline="0.1,0.9 0.2,1"
-                                        KeyTime="0:0:0.300"
+                                        KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
+                                        KeyTime="{StaticResource ControlNormalAnimationKeyTime}"
                                         Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.WidthExpansionAnimationEndPosition}" />
                                 </DoubleAnimationUsingKeyFrames>
                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="OverflowContentRootClipTransform" Storyboard.TargetProperty="Y">
                                     <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.ExpandDownAnimationStartPosition}" />
                                     <SplineDoubleKeyFrame
-                                        KeySpline="0.1,0.9 0.2,1"
-                                        KeyTime="0:0:0.300"
+                                        KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
+                                        KeyTime="{StaticResource ControlNormalAnimationKeyTime}"
                                         Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.ExpandDownAnimationEndPosition}" />
                                 </DoubleAnimationUsingKeyFrames>
                                 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="CornerRadius">
@@ -979,48 +1000,52 @@
                                 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SecondaryItemsControl" Storyboard.TargetProperty="CornerRadius">
                                     <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomCornerRadiusFilterConverter}}" />
                                 </ObjectAnimationUsingKeyFrames>
+                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PrimaryItemsRoot" Storyboard.TargetProperty="VerticalAlignment">
+                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static VerticalAlignment.Top}" />
+                                </ObjectAnimationUsingKeyFrames>
                             </Storyboard>
+                            
                             <Storyboard x:Key="ExpandedDownToCollapsedStoryboard" FillBehavior="Stop">
-                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="OuterOverflowContentRoot" Storyboard.TargetProperty="Opacity">
-                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1" />
-                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.151" Value="0" />
-                                </DoubleAnimationUsingKeyFrames>
                                 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="Width">
                                     <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.ExpandedWidth}" />
                                 </ObjectAnimationUsingKeyFrames>
                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MoreButtonTransform" Storyboard.TargetProperty="X">
                                     <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0" />
                                     <SplineDoubleKeyFrame
-                                        KeySpline="0.7,0 1,0.5"
-                                        KeyTime="0:0:0.150"
+                                        KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
+                                        KeyTime="{StaticResource ControlFastAnimationKeyTime}"
                                         Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.WidthExpansionMoreButtonAnimationStartPosition}" />
-                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.151" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.WidthExpansionMoreButtonAnimationEndPosition}" />
+                                    <DiscreteDoubleKeyFrame KeyTime="{StaticResource ControlFastAnimationAfterKeyTime}" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.WidthExpansionMoreButtonAnimationEndPosition}" />
                                 </DoubleAnimationUsingKeyFrames>
                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentRootClipTransform" Storyboard.TargetProperty="X">
                                     <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.WidthExpansionAnimationEndPosition}" />
                                     <SplineDoubleKeyFrame
-                                        KeySpline="0.7,0 1,0.5"
-                                        KeyTime="0:0:0.150"
+                                        KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
+                                        KeyTime="{StaticResource ControlFastAnimationKeyTime}"
                                         Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.WidthExpansionAnimationStartPosition}" />
-                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.151" Value="0" />
+                                    <DiscreteDoubleKeyFrame KeyTime="{StaticResource ControlFastAnimationAfterKeyTime}" Value="0" />
                                 </DoubleAnimationUsingKeyFrames>
                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="OverflowContentRootClipTransform" Storyboard.TargetProperty="X">
                                     <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.WidthExpansionAnimationEndPosition}" />
                                     <SplineDoubleKeyFrame
-                                        KeySpline="0.7,0 1,0.5"
-                                        KeyTime="0:0:0.150"
+                                        KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
+                                        KeyTime="{StaticResource ControlFastAnimationKeyTime}"
                                         Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.WidthExpansionAnimationStartPosition}" />
-                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.151" Value="0" />
+                                    <DiscreteDoubleKeyFrame KeyTime="{StaticResource ControlFastAnimationAfterKeyTime}" Value="0" />
                                 </DoubleAnimationUsingKeyFrames>
                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="OverflowContentRootClipTransform" Storyboard.TargetProperty="Y">
                                     <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.ExpandDownAnimationEndPosition}" />
                                     <SplineDoubleKeyFrame
-                                        KeySpline="0.7,0 1,0.5"
-                                        KeyTime="0:0:0.150"
+                                        KeySpline="{StaticResource ControlFastOutSlowInKeySpline}"
+                                        KeyTime="{StaticResource ControlFastAnimationKeyTime}"
                                         Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.ExpandDownAnimationStartPosition}" />
-                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0.151" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.ExpandDownAnimationHoldPosition}" />
+                                    <DiscreteDoubleKeyFrame KeyTime="{StaticResource ControlFastAnimationAfterKeyTime}" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.ExpandDownAnimationHoldPosition}" />
                                 </DoubleAnimationUsingKeyFrames>
+                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PrimaryItemsRoot" Storyboard.TargetProperty="VerticalAlignment">
+                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static VerticalAlignment.Top}" />
+                                </ObjectAnimationUsingKeyFrames>
                             </Storyboard>
+                            
                             <Storyboard x:Key="ExpandedUpStoryboard">
                                 <DoubleAnimation
                                     Storyboard.TargetName="MoreButtonTransform"
@@ -1036,13 +1061,15 @@
                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="OverflowContentRootClipTransform" Storyboard.TargetProperty="Y">
                                     <DiscreteDoubleKeyFrame KeyTime="0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.ExpandUpAnimationEndPosition}" />
                                 </DoubleAnimationUsingKeyFrames>
+                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PrimaryItemsRoot" Storyboard.TargetProperty="VerticalAlignment">
+                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static VerticalAlignment.Bottom}" />
+                                </ObjectAnimationUsingKeyFrames>
                             </Storyboard>
+                            
                             <Storyboard x:Key="ExpandedDownStoryboard">
-                                <DoubleAnimation
-                                    Storyboard.TargetName="MoreButtonTransform"
-                                    Storyboard.TargetProperty="X"
-                                    To="0"
-                                    Duration="0" />
+                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MoreButtonTransform" Storyboard.TargetProperty="X">
+                                    <DiscreteDoubleKeyFrame KeyTime="0" Value="0" />
+                                </DoubleAnimationUsingKeyFrames>
                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentRootClipTransform" Storyboard.TargetProperty="X">
                                     <DiscreteDoubleKeyFrame KeyTime="0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.WidthExpansionAnimationEndPosition}" />
                                 </DoubleAnimationUsingKeyFrames>
@@ -1052,25 +1079,20 @@
                                 <DoubleAnimationUsingKeyFrames Storyboard.TargetName="OverflowContentRootClipTransform" Storyboard.TargetProperty="Y">
                                     <DiscreteDoubleKeyFrame KeyTime="0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.ExpandDownAnimationEndPosition}" />
                                 </DoubleAnimationUsingKeyFrames>
+                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PrimaryItemsRoot" Storyboard.TargetProperty="VerticalAlignment">
+                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static VerticalAlignment.Top}" />
+                                </ObjectAnimationUsingKeyFrames>
                             </Storyboard>
+                            
                         </Border.Resources>
-                        <VisualStateManager.CustomVisualStateManager>
-                            <ui:SimpleVisualStateManager />
-                        </VisualStateManager.CustomVisualStateManager>
-                        <Border
+                        
+                        <ikw:ClippedContent
                             x:Name="OuterContentRoot"
                             Height="{TemplateBinding Height}"
                             MinWidth="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.CurrentWidth}"
                             Margin="{TemplateBinding Padding}"
                             VerticalAlignment="Top"
                             CornerRadius="{Binding ElementName=LayoutRoot, Path=CornerRadius}">
-                            <Border.Clip>
-                                <RectangleGeometry x:Name="OuterContentRootClip" Rect="{Binding Source={StaticResource TemplateSettingsProxy}, Path=FlyoutTemplateSettings.ContentClipRect}">
-                                    <RectangleGeometry.Transform>
-                                        <TranslateTransform x:Name="OuterContentRootClipTransform" />
-                                    </RectangleGeometry.Transform>
-                                </RectangleGeometry>
-                            </Border.Clip>
                             <Grid x:Name="ContentRoot" Background="{TemplateBinding Background}">
                                 <Grid.Clip>
                                     <RectangleGeometry x:Name="ContentRootClip" Rect="{Binding Source={StaticResource TemplateSettingsProxy}, Path=FlyoutTemplateSettings.ContentClipRect}">
@@ -1096,7 +1118,7 @@
                                     <Grid>
                                         <Grid.ColumnDefinitions>
                                             <ColumnDefinition Width="*" />
-                                            <ColumnDefinition Width="Auto" />
+                                            <ColumnDefinition Width="Auto" MinWidth="3" />
                                         </Grid.ColumnDefinitions>
                                         <primitives:CommandBarPanel
                                             x:Name="PART_ToolBarPanel"
@@ -1111,33 +1133,33 @@
                                             Grid.Column="1"
                                             ClickMode="Press"
                                             Foreground="{TemplateBinding Foreground}"
-                                            IsChecked="{Binding Path=IsOverflowOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
+                                            IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsOverflowOpen, Mode=TwoWay}"
                                             IsEnabled="{TemplateBinding HasOverflowItems}"
                                             IsTabStop="False"
                                             Style="{DynamicResource CommandBarFlyoutEllipsisButtonStyle}"
                                             Visibility="{TemplateBinding EffectiveOverflowButtonVisibility}">
                                             <ToggleButton.RenderTransform>
-                                                <TranslateTransform x:Name="MoreButtonTransform" />
+                                                <TranslateTransform x:Name="MoreButtonTransform" X="0"/>
                                             </ToggleButton.RenderTransform>
                                             <ui:FontIcon
                                                 x:Name="EllipsisIcon"
                                                 HorizontalAlignment="Center"
                                                 VerticalAlignment="Center"
-                                                FontFamily="{DynamicResource FluentSystemIcons}"
+                                                FontFamily="{DynamicResource SymbolThemeFontFamily}"
                                                 FontSize="16"
-                                                Glyph="&#xE827;" />
+                                                Glyph="&#xE712;" />
                                         </ToggleButton>
                                     </Grid>
                                 </Border>
                                 <ui:PopupEx
                                     x:Name="OverflowPopup"
-                                    AllowsTransparency="true"
+                                    AllowsTransparency="True"
                                     Focusable="false"
-                                    IsOpen="{Binding Path=IsOverflowOpen, RelativeSource={RelativeSource TemplatedParent}}"
                                     Placement="Bottom"
+                                    IsOpen="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsOverflowOpen, Mode=OneWay}"
                                     PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}"
-                                    StaysOpen="false">
-                                    <Border x:Name="OuterOverflowContentRoot" Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.ExpandedWidth}">
+                                    StaysOpen="False">
+                                        <Border x:Name="OuterOverflowContentRoot" Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.ExpandedWidth}">
                                         <Border.Clip>
                                             <RectangleGeometry x:Name="OuterOverflowContentRootClip" Rect="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlyoutTemplateSettings.OverflowContentClipRect}">
                                                 <RectangleGeometry.Transform>
@@ -1192,39 +1214,45 @@
                                     </Border>
                                 </ui:PopupEx>
                             </Grid>
-                        </Border>
+                        </ikw:ClippedContent>
+                        
+                        <VisualStateManager.CustomVisualStateManager>
+                            <ui:SimpleVisualStateManager />
+                        </VisualStateManager.CustomVisualStateManager>
+                        
                         <VisualStateManager.VisualStateGroups>
+                            
                             <VisualStateGroup x:Name="ExpansionStates">
+                                <ui:VisualStateGroupListener.Listener>
+                                    <ui:VisualStateGroupListener x:Name="ExpansionStatesListener" />
+                                </ui:VisualStateGroupListener.Listener>
                                 <VisualStateGroup.Transitions>
                                     <VisualTransition
+                                        GeneratedDuration="{StaticResource ControlNormalAnimationDuration}"
                                         Storyboard="{StaticResource CollapsedToExpandedUpStoryboard}"
                                         From="Collapsed"
                                         To="ExpandedUp" />
                                     <VisualTransition
+                                        GeneratedDuration="{StaticResource ControlFastAnimationDuration}"
                                         Storyboard="{StaticResource ExpandedUpToCollapsedStoryboard}"
                                         From="ExpandedUp"
                                         To="Collapsed" />
                                     <VisualTransition
+                                        GeneratedDuration="{StaticResource ControlNormalAnimationDuration}"
                                         Storyboard="{StaticResource CollapsedToExpandedDownStoryboard}"
                                         From="Collapsed"
                                         To="ExpandedDown" />
                                     <VisualTransition
+                                        GeneratedDuration="{StaticResource ControlFastAnimationDuration}"
                                         Storyboard="{StaticResource ExpandedDownToCollapsedStoryboard}"
                                         From="ExpandedDown"
                                         To="Collapsed" />
                                 </VisualStateGroup.Transitions>
-                                <VisualState x:Name="Collapsed">
-                                    <Storyboard>
-                                        <DoubleAnimation
-                                            Storyboard.TargetName="OuterOverflowContentRoot"
-                                            Storyboard.TargetProperty="Opacity"
-                                            To="0"
-                                            Duration="0" />
-                                    </Storyboard>
-                                </VisualState>
+                                <VisualState x:Name="Collapsed"/>
                                 <VisualState x:Name="ExpandedUp" Storyboard="{StaticResource ExpandedUpStoryboard}" />
-                                <VisualState x:Name="ExpandedDown" Storyboard="{StaticResource ExpandedDownStoryboard}" />
+                                <VisualState x:Name="ExpandedDown" Storyboard="{StaticResource ExpandedDownStoryboard}"/>
                             </VisualStateGroup>
+                            
                             <VisualStateGroup x:Name="AvailableCommandsStates">
                                 <ui:VisualStateGroupListener.Listener>
                                     <ui:VisualStateGroupListener x:Name="AvailableCommandsStatesListener" />
@@ -1233,6 +1261,7 @@
                                 <VisualState x:Name="PrimaryCommandsOnly" />
                                 <VisualState x:Name="SecondaryCommandsOnly" />
                             </VisualStateGroup>
+                            
                             <VisualStateGroup>
                                 <ui:VisualStateGroupListener.Listener>
                                     <ui:VisualStateGroupListener x:Name="CombinedStatesListener" />
@@ -1242,6 +1271,107 @@
                                 <VisualState x:Name="ExpandedDownWithPrimaryCommands" />
                                 <VisualState x:Name="ExpandedUpWithoutPrimaryCommands" />
                                 <VisualState x:Name="ExpandedDownWithoutPrimaryCommands" />
+                                
+                                <VisualStateGroup.Transitions>
+                                    <VisualTransition From="Default" To="ExpandedUpWithPrimaryCommands" GeneratedDuration="{StaticResource ControlNormalAnimationDuration}">
+                                        <Storyboard>
+                                          <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SecondaryItemsControl" Storyboard.TargetProperty="BorderThickness">
+                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{DynamicResource CommandBarFlyoutBorderUpThemeThickness}" />
+                                          </ObjectAnimationUsingKeyFrames>
+                                          <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="CornerRadius">
+                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomCornerRadiusFilterConverter}}" />
+                                          </ObjectAnimationUsingKeyFrames>
+                                          <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PrimaryItemsRoot" Storyboard.TargetProperty="CornerRadius">
+                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomCornerRadiusFilterConverter}}" />
+                                          </ObjectAnimationUsingKeyFrames>
+                                          <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterOverflowContentRoot" Storyboard.TargetProperty="CornerRadius">
+                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopCornerRadiusFilterConverter}}" />
+                                          </ObjectAnimationUsingKeyFrames>
+                                          <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SecondaryItemsControl" Storyboard.TargetProperty="CornerRadius">
+                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopCornerRadiusFilterConverter}}" />
+                                          </ObjectAnimationUsingKeyFrames>
+                                        </Storyboard>
+                                    </VisualTransition>
+                                    
+                                  <VisualTransition From="Default" To="ExpandedDownWithPrimaryCommands" GeneratedDuration="{StaticResource ControlNormalAnimationDuration}">
+                                    <Storyboard>
+                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SecondaryItemsControl" Storyboard.TargetProperty="BorderThickness">
+                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{DynamicResource CommandBarFlyoutBorderDownThemeThickness}" />
+                                      </ObjectAnimationUsingKeyFrames>
+                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="CornerRadius">
+                                          <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{Binding Source={StaticResource CornerRadiusProxy},Path=Value, Converter={StaticResource TopCornerRadiusFilterConverter}}"/>
+                                      </ObjectAnimationUsingKeyFrames>
+                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PrimaryItemsRoot" Storyboard.TargetProperty="CornerRadius">
+                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{Binding Source={StaticResource CornerRadiusProxy},Path=Value,  Converter={StaticResource TopCornerRadiusFilterConverter}}" />
+                                      </ObjectAnimationUsingKeyFrames>
+                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterOverflowContentRoot" Storyboard.TargetProperty="CornerRadius">
+                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{Binding Source={StaticResource CornerRadiusProxy},Path=Value,  Converter={StaticResource BottomCornerRadiusFilterConverter}}" />
+                                      </ObjectAnimationUsingKeyFrames>
+                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SecondaryItemsControl" Storyboard.TargetProperty="CornerRadius">
+                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{Binding Source={StaticResource CornerRadiusProxy},Path=Value,  Converter={StaticResource BottomCornerRadiusFilterConverter}}" />
+                                      </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                  </VisualTransition>
+                                  
+                                  <VisualTransition From="ExpandedUpWithPrimaryCommands" To="Default" GeneratedDuration="{StaticResource ControlFastAnimationDuration}">
+                                    <Storyboard>
+                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SecondaryItemsControl" Storyboard.TargetProperty="BorderThickness">
+                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{DynamicResource CommandBarFlyoutBorderUpThemeThickness}" />
+                                        <DiscreteObjectKeyFrame KeyTime="{StaticResource ControlFastAnimationKeyTime}" Value="{DynamicResource CommandBarFlyoutBorderThemeThickness}" />
+                                      </ObjectAnimationUsingKeyFrames>
+                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="CornerRadius">
+                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{Binding Source={StaticResource CornerRadiusProxy},Path=Value,  Converter={StaticResource BottomCornerRadiusFilterConverter}}" />
+                                        <DiscreteObjectKeyFrame KeyTime="{StaticResource ControlFastAnimationKeyTime}" Value="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}}" />
+                                      </ObjectAnimationUsingKeyFrames>
+                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PrimaryItemsRoot" Storyboard.TargetProperty="CornerRadius">
+                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{Binding Source={StaticResource CornerRadiusProxy},Path=Value,  Converter={StaticResource BottomCornerRadiusFilterConverter}}" />
+                                        <DiscreteObjectKeyFrame KeyTime="{StaticResource ControlFastAnimationKeyTime}" Value="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}}" />
+                                      </ObjectAnimationUsingKeyFrames>
+                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterOverflowContentRoot" Storyboard.TargetProperty="CornerRadius">
+                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{Binding Source={StaticResource CornerRadiusProxy},Path=Value,  Converter={StaticResource TopCornerRadiusFilterConverter}}" />
+                                        <DiscreteObjectKeyFrame KeyTime="{StaticResource ControlFastAnimationKeyTime}" Value="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}}" />
+                                      </ObjectAnimationUsingKeyFrames>
+                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SecondaryItemsControl" Storyboard.TargetProperty="CornerRadius">
+                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{Binding Source={StaticResource CornerRadiusProxy},Path=Value,  Converter={StaticResource TopCornerRadiusFilterConverter}}" />
+                                        <DiscreteObjectKeyFrame KeyTime="{StaticResource ControlFastAnimationKeyTime}" Value="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}}" />
+                                      </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                  </VisualTransition>
+                                  
+                                  <VisualTransition From="ExpandedDownWithPrimaryCommands" To="Default" GeneratedDuration="{StaticResource ControlFastAnimationDuration}">
+                                    <Storyboard>
+                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SecondaryItemsControl" Storyboard.TargetProperty="BorderThickness">
+                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{DynamicResource CommandBarFlyoutBorderDownThemeThickness}" />
+                                        <DiscreteObjectKeyFrame KeyTime="{StaticResource ControlFastAnimationKeyTime}" Value="{DynamicResource CommandBarFlyoutBorderThemeThickness}" />
+                                      </ObjectAnimationUsingKeyFrames>
+                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="CornerRadius">
+                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{Binding Source={StaticResource CornerRadiusProxy},Path=Value,  Converter={StaticResource TopCornerRadiusFilterConverter}, Mode=OneWay}" />
+                                        <DiscreteObjectKeyFrame KeyTime="{StaticResource ControlFastAnimationKeyTime}" Value="{Binding Source={StaticResource CornerRadiusProxy},Path=Value,  Mode=OneWay}" />
+                                      </ObjectAnimationUsingKeyFrames>
+                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PrimaryItemsRoot" Storyboard.TargetProperty="CornerRadius">
+                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{Binding Source={StaticResource CornerRadiusProxy},Path=Value,  Converter={StaticResource TopCornerRadiusFilterConverter}, Mode=OneWay}" />
+                                        <DiscreteObjectKeyFrame KeyTime="{StaticResource ControlFastAnimationKeyTime}" Value="{Binding Source={StaticResource CornerRadiusProxy},Path=Value,  Mode=OneWay}" />
+                                      </ObjectAnimationUsingKeyFrames>
+                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterOverflowContentRoot" Storyboard.TargetProperty="CornerRadius">
+                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{Binding Source={StaticResource CornerRadiusProxy},Path=Value,  Converter={StaticResource BottomCornerRadiusFilterConverter}, Mode=OneWay}" />
+                                        <DiscreteObjectKeyFrame KeyTime="{StaticResource ControlFastAnimationKeyTime}" Value="{Binding Source={StaticResource CornerRadiusProxy},Path=Value,  Mode=OneWay}" />
+                                      </ObjectAnimationUsingKeyFrames>
+                                      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SecondaryItemsControl" Storyboard.TargetProperty="CornerRadius">
+                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{Binding Source={StaticResource CornerRadiusProxy},Path=Value,  Converter={StaticResource BottomCornerRadiusFilterConverter}, Mode=OneWay}" />
+                                        <DiscreteObjectKeyFrame KeyTime="{StaticResource ControlFastAnimationKeyTime}" Value="{Binding Source={StaticResource CornerRadiusProxy},Path=Value,  Mode=OneWay}" />
+                                      </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                  </VisualTransition>
+                                  
+                                </VisualStateGroup.Transitions>
+                            </VisualStateGroup>
+                            
+                            <VisualStateGroup x:Name="PrimaryLabelStates">
+                                <ui:VisualStateGroupListener.Listener>
+                                    <ui:VisualStateGroupListener x:Name="PrimaryLabelStatesListener" />
+                                </ui:VisualStateGroupListener.Listener>
+                                <VisualState x:Name="NoPrimaryLabels" />
+                                <VisualState x:Name="HasPrimaryLabels" />
                             </VisualStateGroup>
                         </VisualStateManager.VisualStateGroups>
                     </Border>
@@ -1250,16 +1380,20 @@
                         <Trigger Property="IsEnabled" Value="False">
                             <Setter TargetName="EllipsisIcon" Property="Foreground" Value="{DynamicResource CommandBarEllipsisIconForegroundDisabled}" />
                         </Trigger>
+                        
                         <!--  PrimaryCommandsOnly  -->
                         <Trigger SourceName="AvailableCommandsStatesListener" Property="CurrentStateName" Value="PrimaryCommandsOnly">
                             <Setter TargetName="OverflowContentRoot" Property="Visibility" Value="Collapsed" />
                         </Trigger>
                         <!--  SecondaryCommandsOnly  -->
+                        <!-- We'll use PrimaryItemsRoot as the anchor for the overflow popup, so to be able to do that
+                                             we can't set it to be collapsed.  Instead, we'll just hide it and make it not hit-testable. -->
                         <Trigger SourceName="AvailableCommandsStatesListener" Property="CurrentStateName" Value="SecondaryCommandsOnly">
-                            <Setter TargetName="PrimaryItemsRoot" Property="Visibility" Value="Collapsed" />
-                            <Setter TargetName="OverflowPopup" Property="Placement" Value="{x:Static PlacementMode.Relative}" />
-                            <Setter TargetName="PART_ToolBarOverflowPanel" Property="Focusable" Value="True" />
+                            <Setter TargetName="PrimaryItemsRoot" Property="Opacity" Value="0" />
+                            <Setter TargetName="PrimaryItemsRoot" Property="IsHitTestVisible" Value="False" />
+                            <Setter TargetName="PrimaryItemsRoot" Property="Height" Value="0" />
                         </Trigger>
+
                         <!--  ExpandedUpWithPrimaryCommands  -->
                         <Trigger SourceName="CombinedStatesListener" Property="CurrentStateName" Value="ExpandedUpWithPrimaryCommands">
                             <Setter TargetName="SecondaryItemsControl" Property="BorderThickness" Value="{DynamicResource CommandBarFlyoutBorderUpThemeThickness}" />
@@ -1292,6 +1426,12 @@
                             <Setter TargetName="OuterOverflowContentRoot" Property="CornerRadius" Value="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}}" />
                             <Setter TargetName="SecondaryItemsControl" Property="CornerRadius" Value="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}}" />
                         </Trigger>
+                        
+                        <!--  HasPrimaryLabels  -->
+                        <Trigger SourceName="PrimaryLabelStatesListener" Property="CurrentStateName" Value="HasPrimaryLabels">
+                            <Setter TargetName="PART_ToolBarPanel" Property="MinHeight" Value="52" />
+                            <Setter TargetName="PART_ToolBarPanel" Property="Height" Value="NaN" />
+                        </Trigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>
             </Setter.Value>
@@ -1310,7 +1450,6 @@
         <Setter Property="VerticalContentAlignment" Value="Top" />
         <Setter Property="DefaultLabelPosition" Value="Collapsed" />
         <Setter Property="MaxWidth" Value="440" />
-        <Setter Property="Height" Value="48" />
         <Setter Property="IsDynamicOverflowEnabled" Value="True" />
         <Setter Property="CommandBarOverflowPresenterStyle" Value="{StaticResource CommandBarFlyoutCommandBarOverflowPresenterStyle}" />
         <Setter Property="CornerRadius" Value="{DynamicResource OverlayCornerRadius}" />
diff --git a/source/iNKORE.UI.WPF.Modern.Controls/Controls/Windows/CommandBarFlyout/CommandBarFlyoutToolBar.cs b/source/iNKORE.UI.WPF.Modern.Controls/Controls/Windows/CommandBarFlyout/CommandBarFlyoutToolBar.cs
index 0e47338f..37ae0d79 100644
--- a/source/iNKORE.UI.WPF.Modern.Controls/Controls/Windows/CommandBarFlyout/CommandBarFlyoutToolBar.cs
+++ b/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,7 +185,7 @@ public override void OnApplyTemplate()
 
             if (OverflowPopup is PopupEx popupEx)
             {
-                popupEx.SuppressFadeAnimation = true;
+                //popupEx.SuppressFadeAnimation = true;
             }
 
             AttachEventHandlers();
@@ -192,6 +193,26 @@ public override void OnApplyTemplate()
             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)
diff --git a/source/iNKORE.UI.WPF.Modern.Gallery/Pages/Controls/Windows/CommandBarFlyoutPage.xaml.cs b/source/iNKORE.UI.WPF.Modern.Gallery/Pages/Controls/Windows/CommandBarFlyoutPage.xaml.cs
index 8c607e5b..4e063537 100644
--- a/source/iNKORE.UI.WPF.Modern.Gallery/Pages/Controls/Windows/CommandBarFlyoutPage.xaml.cs
+++ b/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
diff --git a/source/iNKORE.UI.WPF.Modern/Themes/Controls/CommandBar.xaml b/source/iNKORE.UI.WPF.Modern/Themes/Controls/CommandBar.xaml
index 22ebcc38..780a3de9 100644
--- a/source/iNKORE.UI.WPF.Modern/Themes/Controls/CommandBar.xaml
+++ b/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">

From 54cf71ba8eaf6ebebf1a589896df59440ae5f05e Mon Sep 17 00:00:00 2001
From: Mohamed Hazem <72768725+mou-haz@users.noreply.github.com>
Date: Fri, 4 Jul 2025 18:07:50 +0300
Subject: [PATCH 2/2] Update CommandBarFlyoutPage.xaml

---
 .../Windows/CommandBarFlyoutPage.xaml         | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/source/iNKORE.UI.WPF.Modern.Gallery/Pages/Controls/Windows/CommandBarFlyoutPage.xaml b/source/iNKORE.UI.WPF.Modern.Gallery/Pages/Controls/Windows/CommandBarFlyoutPage.xaml
index 0102ae4a..b027707e 100644
--- a/source/iNKORE.UI.WPF.Modern.Gallery/Pages/Controls/Windows/CommandBarFlyoutPage.xaml
+++ b/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" />