Merge pull request #1293 from microsoft/niels9001/gallery-titlebar-fixes

[UX] Titlebar improvements

Author: niels9001

WinUIGallery/Helper/NavigationOrientationHelper.cs

@@ -1,13 +1,6 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-using Windows.ApplicationModel.Core;
-using Windows.Storage;
-using Microsoft.UI;
-using Microsoft.UI.Windowing;
 using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Windows.Storage;
 
 
 namespace AppUIBasics.Helper
@@ -38,26 +31,26 @@ public static bool IsLeftMode()
 
         public static void IsLeftModeForElement(bool isLeftMode, UIElement element)
         {
-            UpdateTitleBarForElement(isLeftMode, element);
+            UpdateNavigationViewForElement(isLeftMode, element);
 #if !UNPACKAGED
             ApplicationData.Current.LocalSettings.Values[IsLeftModeKey] = isLeftMode;
 #else
             _isLeftMode = isLeftMode;
 #endif
         }
 
-        public static void UpdateTitleBarForElement(bool isLeftMode, UIElement element)
+        public static void UpdateNavigationViewForElement(bool isLeftMode, UIElement element)
         {
-            var window = WindowHelper.GetWindowForElement(element);
-            window.ExtendsContentIntoTitleBar = isLeftMode;
-
+            NavigationView _navView = NavigationRootPage.GetForElement(element).NavigationView;
             if (isLeftMode)
             {
-                NavigationRootPage.GetForElement(element).NavigationView.PaneDisplayMode = Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode.Auto;
+                _navView.PaneDisplayMode = NavigationViewPaneDisplayMode.Auto;
+                Grid.SetRow(_navView, 0);
             }
             else
             {
-                NavigationRootPage.GetForElement(element).NavigationView.PaneDisplayMode = Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode.Top;
+                _navView.PaneDisplayMode = NavigationViewPaneDisplayMode.Top;
+                Grid.SetRow(_navView, 1);
             }
         }
     }

WinUIGallery/Navigation/NavigationRootPage.xaml

@@ -20,21 +20,33 @@
             <ColumnDefinition Width="Auto" />
             <ColumnDefinition />
         </Grid.ColumnDefinitions>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
+            <!--  TitleBar  -->
+            <RowDefinition Height="*" />
+            <!--  NavView  -->
+        </Grid.RowDefinitions>
         <VisualStateManager.VisualStateGroups>
             <VisualStateGroup x:Name="TitleBarStates">
-                <VisualState x:Name="WideLayout">
-                    <VisualState.StateTriggers>
-                        <AdaptiveTrigger MinWindowWidth="{StaticResource Breakpoint640Plus}" />
-                    </VisualState.StateTriggers>
-                </VisualState>
-                <VisualState x:Name="SmallLayout">
-                    <VisualState.StateTriggers>
-                        <AdaptiveTrigger MinWindowWidth="0" />
-                    </VisualState.StateTriggers>
+                <VisualState x:Name="Default" />
+                <VisualState x:Name="Compact">
                     <VisualState.Setters>
                         <Setter Target="AppTitleBar.Margin" Value="96,0,0,0" />
                     </VisualState.Setters>
                 </VisualState>
+                <VisualState x:Name="Top">
+                    <VisualState.Setters>
+                        <Setter Target="AppTitleBar.Margin" Value="16,0,0,0" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+            <VisualStateGroup x:Name="WindowActivationStates">
+                <VisualState x:Name="Activated" />
+                <VisualState x:Name="Deactivated">
+                    <VisualState.Setters>
+                        <Setter Target="AppTitle.Foreground" Value="{ThemeResource TextFillColorTertiaryBrush}" />
+                    </VisualState.Setters>
+                </VisualState>
             </VisualStateGroup>
         </VisualStateManager.VisualStateGroups>
 
@@ -43,15 +55,15 @@
             Grid.Column="1"
             Height="{Binding ElementName=NavigationViewControl, Path=CompactPaneLength}"
             Margin="48,0,0,0"
-            VerticalAlignment="Top"
+            VerticalAlignment="Stretch"
             AutomationProperties.AutomationId="AppTitleBar"
             Canvas.ZIndex="1"
             IsHitTestVisible="True">
-            <StackPanel Orientation="Horizontal">
+            <StackPanel VerticalAlignment="Center" Orientation="Horizontal">
                 <Image Width="18" Source="ms-appx:///Assets/Tiles/TitlebarLogo.png" />
                 <TextBlock
                     x:Name="AppTitle"
-                    Margin="16,0,0,0"
+                    Margin="12,0,0,0"
                     VerticalAlignment="Center"
                     Style="{StaticResource CaptionTextBlockStyle}"
                     Text="{x:Bind AppTitleText}" />
@@ -140,8 +152,10 @@
         -->
         <NavigationView
             x:Name="NavigationViewControl"
+            Grid.RowSpan="2"
             Grid.Column="1"
             Canvas.ZIndex="0"
+            DisplayModeChanged="OnPaneDisplayModeChanged"
             IsTabStop="False"
             IsTitleBarAutoPaddingEnabled="True"
             Loaded="OnNavigationViewControlLoaded"

WinUIGallery/Navigation/NavigationRootPage.xaml.cs

@@ -22,7 +22,6 @@
 using Microsoft.UI.Xaml.Controls;
 using Microsoft.UI.Xaml.Input;
 using Microsoft.UI.Xaml.Navigation;
-using Windows.Devices.Input;
 using Windows.Foundation;
 using Windows.System.Profile;
 using Windows.UI.ViewManagement;
@@ -34,9 +33,6 @@ public sealed partial class NavigationRootPage : Page
     {
         public Windows.System.VirtualKey ArrowKey;
         public Microsoft.UI.Dispatching.DispatcherQueue dispatcherQueue;
-
-        private RootFrameNavigationHelper _navHelper;
-        private bool _isKeyboardConnected;
         private UISettings _settings;
 
 
@@ -77,8 +73,6 @@ public NavigationRootPage()
             this.InitializeComponent();
             dispatcherQueue = Microsoft.UI.Dispatching.DispatcherQueue.GetForCurrentThread();
 
-            _navHelper = new RootFrameNavigationHelper(rootFrame, NavigationViewControl);
-
             SetDeviceFamily();
             AddNavigationMenuItems();
 
@@ -91,27 +85,56 @@ public NavigationRootPage()
                 }
             };
 
-            _isKeyboardConnected = Convert.ToBoolean(new KeyboardCapabilities().KeyboardPresent);
-
             // remove the solid-colored backgrounds behind the caption controls and system back button if we are in left mode
             // This is done when the app is loaded since before that the actual theme that is used is not "determined" yet
             Loaded += delegate (object sender, RoutedEventArgs e)
             {
-                NavigationOrientationHelper.UpdateTitleBarForElement(NavigationOrientationHelper.IsLeftMode(), this);
+                NavigationOrientationHelper.UpdateNavigationViewForElement(NavigationOrientationHelper.IsLeftMode(), this);
 
                 Window window = WindowHelper.GetWindowForElement(sender as UIElement);
                 window.Title = AppTitleText;
                 window.ExtendsContentIntoTitleBar = true;
+                window.Activated += Window_Activated;
                 window.SetTitleBar(this.AppTitleBar);
 
                 AppWindow appWindow = WindowHelper.GetAppWindow(window);
                 appWindow.SetIcon("Assets/Tiles/GalleryIcon.ico");
                 _settings = new UISettings();
                 _settings.ColorValuesChanged += _settings_ColorValuesChanged; // cannot use FrameworkElement.ActualThemeChanged event because the triggerTitleBarRepaint workaround no longer works
             };
+        }
+
+        private void Window_Activated(object sender, WindowActivatedEventArgs args)
+        {
+            if (args.WindowActivationState == WindowActivationState.Deactivated)
+            {
+                VisualStateManager.GoToState(this, "Deactivated", true);
+            }
+            else
+            {
+                VisualStateManager.GoToState(this, "Activated", true);
+            }
+        }
 
-            NavigationViewControl.RegisterPropertyChangedCallback(NavigationView.PaneDisplayModeProperty, new DependencyPropertyChangedCallback(OnPaneDisplayModeChanged));
+        private void OnPaneDisplayModeChanged(NavigationView sender, NavigationViewDisplayModeChangedEventArgs args)
+        {
+            if (sender.PaneDisplayMode == NavigationViewPaneDisplayMode.Top)
+            {
+                VisualStateManager.GoToState(this, "Top", true);
+            }
+            else
+            {
+                if (args.DisplayMode == NavigationViewDisplayMode.Minimal)
+                {
+                    VisualStateManager.GoToState(this, "Compact", true);
+                }
+                else
+                {
+                    VisualStateManager.GoToState(this, "Default", true);
+                }
+            }
         }
+
         // this handles updating the caption button colors correctly when indows system theme is changed
         // while the app is open
         private void _settings_ColorValuesChanged(UISettings sender, object args)
@@ -123,12 +146,6 @@ private void _settings_ColorValuesChanged(UISettings sender, object args)
             });
         }
 
-        private void OnPaneDisplayModeChanged(DependencyObject sender, DependencyProperty dp)
-        {
-            var navigationView = sender as NavigationView;
-            NavigationRootPage.GetForElement(this).AppTitleBar.Visibility = navigationView.PaneDisplayMode == NavigationViewPaneDisplayMode.Top ? Visibility.Collapsed : Visibility.Visible;
-        }
-
         // Wraps a call to rootFrame.Navigate to give the Page a way to know which NavigationRootPage is navigating.
         // Please call this function rather than rootFrame.Navigate to navigate the rootFrame.
         public void Navigate(
@@ -186,7 +203,7 @@ private void AddNavigationMenuItems()
         {
             foreach (var group in ControlInfoDataSource.Instance.Groups.OrderBy(i => i.Title).Where(i => !i.IsSpecialSection))
             {
-                var itemGroup = new Microsoft.UI.Xaml.Controls.NavigationViewItem() { Content = group.Title, Tag = group.UniqueId, DataContext = group, Icon = GetIcon(group.ImageIconPath) };
+                var itemGroup = new NavigationViewItem() { Content = group.Title, Tag = group.UniqueId, DataContext = group, Icon = GetIcon(group.ImageIconPath) };
 
                 var groupMenuFlyoutItem = new MenuFlyoutItem() { Text = $"Copy Link to {group.Title} samples", Icon = new FontIcon() { Glyph = "\uE8C8" }, Tag = group };
                 groupMenuFlyoutItem.Click += this.OnMenuFlyoutItemClick;
@@ -196,7 +213,7 @@ private void AddNavigationMenuItems()
 
                 foreach (var item in group.Items)
                 {
-                    var itemInGroup = new Microsoft.UI.Xaml.Controls.NavigationViewItem() { IsEnabled = item.IncludedInBuild, Content = item.Title, Tag = item.UniqueId, DataContext = item };
+                    var itemInGroup = new NavigationViewItem() { IsEnabled = item.IncludedInBuild, Content = item.Title, Tag = item.UniqueId, DataContext = item };
 
                     var itemInGroupMenuFlyoutItem = new MenuFlyoutItem() { Text = $"Copy Link to {item.Title} sample", Icon = new FontIcon() { Glyph = "\uE8C8" }, Tag = item };
                     itemInGroupMenuFlyoutItem.Click += this.OnMenuFlyoutItemClick;
@@ -249,7 +266,7 @@ private void SetDeviceFamily()
 
         private void OnNewControlsMenuItemLoaded(object sender, RoutedEventArgs e)
         {
-            if ( NavigationViewControl.DisplayMode == Microsoft.UI.Xaml.Controls.NavigationViewDisplayMode.Expanded)
+            if ( NavigationViewControl.DisplayMode == NavigationViewDisplayMode.Expanded)
             {
                 controlsSearchBox.Focus(FocusState.Keyboard);
             }
@@ -261,7 +278,7 @@ private void OnNavigationViewControlLoaded(object sender, RoutedEventArgs e)
             Task.Delay(500).ContinueWith(_ => this.NavigationViewLoaded?.Invoke(), TaskScheduler.FromCurrentSynchronizationContext());
         }
 
-        private void OnNavigationViewSelectionChanged(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewSelectionChangedEventArgs args)
+        private void OnNavigationViewSelectionChanged(NavigationView sender, NavigationViewSelectionChangedEventArgs args)
         {
             if (args.IsSettingsSelected)
             {
@@ -554,6 +571,7 @@ private void WaitForDebuggerInvokerButton_Click(object sender, RoutedEventArgs e
         private static extern void DebugBreak();
 
         #endregion
+
     }
 
     public class NavigationRootPageArgs