Titlebar improvements (#1179)

microsoft · Jan 25, 2023 · dbff666 · dbff666
1 parent 7ed9c35
commit dbff666
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 95 deletions.
diff --git a/WinUIGallery/App.xaml.cs b/WinUIGallery/App.xaml.cs
@@ -94,7 +94,7 @@ protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs ar
             IdleSynchronizer.Init();
 
             startupWindow = WindowHelper.CreateWindow();
-
+            startupWindow.ExtendsContentIntoTitleBar = true;
 #if DEBUG
             //if (System.Diagnostics.Debugger.IsAttached)
             //{

diff --git a/WinUIGallery/Navigation/NavigationRootPage.xaml b/WinUIGallery/Navigation/NavigationRootPage.xaml
@@ -33,36 +33,38 @@
             <ColumnDefinition />
         </Grid.ColumnDefinitions>
         <VisualStateManager.VisualStateGroups>
-            <VisualStateGroup>
-                <VisualState>
+            <VisualStateGroup x:Name="TitleBarStates">
+                <VisualState x:Name="WideLayout">
                     <VisualState.StateTriggers>
-                        <local:DeviceFamilyTrigger DeviceFamily="Windows.Xbox" />
+                        <AdaptiveTrigger MinWindowWidth="640" />
+                    </VisualState.StateTriggers>
+                </VisualState>
+                <VisualState x:Name="SmallLayout">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="0" />
                     </VisualState.StateTriggers>
                     <VisualState.Setters>
-                        <Setter Target="XboxContentSafeRect.Visibility" Value="Visible" />
+                        <Setter Target="AppTitleBar.Margin" Value="96,0,0,0" />
                     </VisualState.Setters>
                 </VisualState>
             </VisualStateGroup>
-
         </VisualStateManager.VisualStateGroups>
-
-        <Rectangle
-            x:Name="XboxContentSafeRect"
-            Width="48"
-            Fill="{ThemeResource NavigationViewDefaultPaneBackground}"
-            Visibility="Collapsed" Canvas.ZIndex="0" />
-
+
         <Border x:Name="AppTitleBar"
                 Grid.Column="1"
+                Margin="48,0,0,0"
                 IsHitTestVisible="True"
                 VerticalAlignment="Top"
                 Height="{Binding ElementName=NavigationViewControl, Path=CompactPaneLength}"
                 Canvas.ZIndex="1">
-            <TextBlock x:Name="AppTitle"
+            <StackPanel Orientation="Horizontal">
+                <Image Width="18" Source="ms-appx:///Assets/Tiles/SmallTile-sdk.png"/>
+                <TextBlock x:Name="AppTitle"
                        Text="{x:Bind AppTitleText}"
-                       VerticalAlignment="Top"
-                       Margin="0,15,0,0"
+                       VerticalAlignment="Center"
+                       Margin="16,0,0,0"
                        Style="{StaticResource CaptionTextBlockStyle}" />
+            </StackPanel>
         </Border>
 
         <Grid x:Name="AutomationHelpersPanel"  Grid.Column="1">
@@ -105,9 +107,6 @@
             HeaderTemplate="{StaticResource NavigationViewHeaderTemplate}"
             IsTabStop="False"
             IsTitleBarAutoPaddingEnabled="False"
-            PaneOpening="NavigationViewControl_PaneOpening"
-            PaneClosing="NavigationViewControl_PaneClosing"
-            DisplayModeChanged="NavigationViewControl_DisplayModeChanged"
             SelectionChanged="OnNavigationViewSelectionChanged"
             Loaded="OnNavigationViewControlLoaded">
             <NavigationView.AutoSuggestBox>

diff --git a/WinUIGallery/Navigation/NavigationRootPage.xaml.cs b/WinUIGallery/Navigation/NavigationRootPage.xaml.cs
@@ -338,7 +338,6 @@ private void OnNavigationViewSelectionChanged(Microsoft.UI.Xaml.Controls.Navigat
                         var item = (ControlInfoDataItem)selectedItem.DataContext;
                         Navigate(typeof(ItemPage), item.UniqueId);
                     }
-
                 }
             }
         }
@@ -499,33 +498,6 @@ public void EnsureItemIsVisibleInNavigation(string name)
             }
         }
 
-        private void NavigationViewControl_PaneClosing(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewPaneClosingEventArgs args)
-        {
-            UpdateAppTitleMargin(sender);
-        }
-
-        private void NavigationViewControl_PaneOpening(Microsoft.UI.Xaml.Controls.NavigationView sender, object args)
-        {
-            UpdateAppTitleMargin(sender);
-        }
-
-        private void NavigationViewControl_DisplayModeChanged(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewDisplayModeChangedEventArgs args)
-        {
-            Thickness currMargin = AppTitleBar.Margin;
-            if (sender.DisplayMode == Microsoft.UI.Xaml.Controls.NavigationViewDisplayMode.Minimal)
-            {
-                AppTitleBar.Margin = new Thickness() { Left = (sender.CompactPaneLength * 2), Top = currMargin.Top, Right = currMargin.Right, Bottom = currMargin.Bottom };
-
-            }
-            else
-            {
-                AppTitleBar.Margin = new Thickness() { Left = sender.CompactPaneLength, Top = currMargin.Top, Right = currMargin.Right, Bottom = currMargin.Bottom };
-            }
-
-            UpdateAppTitleMargin(sender);
-            UpdateHeaderMargin(sender);
-        }
-
         private void UpdateAppTitleMargin(Microsoft.UI.Xaml.Controls.NavigationView sender)
         {
             const int smallLeftIndent = 4, largeLeftIndent = 24;
@@ -560,21 +532,6 @@ private void UpdateAppTitleMargin(Microsoft.UI.Xaml.Controls.NavigationView send
             }
         }
 
-        private void UpdateHeaderMargin(Microsoft.UI.Xaml.Controls.NavigationView sender)
-        {
-            if (PageHeader != null)
-            {
-                if (sender.DisplayMode == Microsoft.UI.Xaml.Controls.NavigationViewDisplayMode.Minimal)
-                {
-                    PageHeader.HeaderPadding = (Thickness)App.Current.Resources["PageHeaderMinimalPadding"];
-                }
-                else
-                {
-                    PageHeader.HeaderPadding = (Thickness)App.Current.Resources["PageHeaderDefaultPadding"];
-                }
-            }
-        }
-
         private void CtrlF_Invoked(KeyboardAccelerator sender, KeyboardAcceleratorInvokedEventArgs args)
         {
             controlsSearchBox.Focus(FocusState.Programmatic);

diff --git a/WinUIGallery/PageHeader.xaml b/WinUIGallery/PageHeader.xaml
@@ -10,26 +10,6 @@
     HighContrastAdjustment="Auto">
     <Grid>
         <VisualStateManager.VisualStateGroups>
-            <VisualStateGroup>
-                <VisualState>
-                    <VisualState.StateTriggers>
-                        <local:DeviceFamilyTrigger DeviceFamily="Windows.Xbox" />
-                    </VisualState.StateTriggers>
-                    <VisualState.Setters>
-                        <Setter Target="headerControl.Padding" Value="24,15,48,0" />
-                        <Setter Target="headerControl.Height" Value="75" />
-                    </VisualState.Setters>
-                </VisualState>
-                <VisualState>
-                    <VisualState.StateTriggers>
-                        <local:DeviceFamilyTrigger DeviceFamily="Windows.Mobile" />
-                    </VisualState.StateTriggers>
-                    <VisualState.Setters>
-                        <Setter Target="headerControl.Padding" Value="14,0,14,0" />
-                    </VisualState.Setters>
-                </VisualState>
-            </VisualStateGroup>
-
             <VisualStateGroup x:Name="TitleForegroundStates">
                 <VisualState x:Name="DefaultForeground" />
                 <VisualState x:Name="AlternateForeground">

diff --git a/WinUIGallery/PageHeader.xaml.cs b/WinUIGallery/PageHeader.xaml.cs
@@ -54,19 +54,6 @@ public object Subtitle
         public static readonly DependencyProperty SubtitleProperty =
             DependencyProperty.Register("Subtitle", typeof(object), typeof(PageHeader), new PropertyMetadata(null));
 
-
-
-        public Thickness HeaderPadding
-        {
-            get { return (Thickness)GetValue(HeaderPaddingProperty); }
-            set { SetValue(HeaderPaddingProperty, value); }
-        }
-
-        // Using a DependencyProperty as the backing store for BackgroundColorOpacity.  This enables animation, styling, binding, etc...
-        public static readonly DependencyProperty HeaderPaddingProperty =
-            DependencyProperty.Register("HeaderPadding", typeof(Thickness), typeof(PageHeader), new PropertyMetadata((Thickness)App.Current.Resources["PageHeaderDefaultPadding"]));
-
-
         public double BackgroundColorOpacity
         {
             get { return (double)GetValue(BackgroundColorOpacityProperty); }