add custom title bar

microsoft · Jul 28, 2021 · 45e5506 · 45e5506
1 parent 8865a05
commit 45e5506
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 10 deletions.
diff --git a/ContosoApp/AppShell.xaml b/ContosoApp/AppShell.xaml
@@ -30,18 +30,41 @@
     TabNavigation="Cycle"
     mc:Ignorable="d"
     muxc:BackdropMaterial.ApplyToRootOrPageBackground="True">
-
+    <Page.Resources>
+        <!--This top margin is the height of the custom TitleBar-->
+        <Thickness x:Key="NavigationViewContentMargin">0,48,0,0</Thickness>
+    </Page.Resources>
     <Grid
         x:Name="LayoutRoot">
-
+        <Border x:Name="AppTitleBar"
+                IsHitTestVisible="True"
+                VerticalAlignment="Top"
+                Background="Transparent"
+                Height="48"
+                Canvas.ZIndex="1" 
+                Margin="48,0,0,0">
+            <StackPanel Orientation="Horizontal">
+                <Border Background="{ThemeResource SystemAccentColor}" 
+                        HorizontalAlignment="Left" 
+                        Width="20" Height="20" >
+                    <Image Source="Assets/Square44x44Logo.png"/>
+                </Border>
+                <TextBlock x:Name="AppTitle"
+                    VerticalAlignment="Center"
+                    Margin="12,0,0,0"
+                    Style="{StaticResource CaptionTextBlockStyle}" />
+            </StackPanel>
+        </Border>
+
         <muxc:NavigationView
             x:Name="NavView"
             OpenPaneLength="160"
             AlwaysShowHeader="False"
             IsSettingsVisible="True"
             ItemInvoked="NavigationView_ItemInvoked"
             BackRequested="NavigationView_BackRequested"
-            IsBackEnabled="{x:Bind AppFrame.CanGoBack, Mode=OneWay}">
+            IsBackEnabled="{x:Bind AppFrame.CanGoBack, Mode=OneWay}"
+            IsTitleBarAutoPaddingEnabled="False">
 
             <muxc:NavigationView.MenuItems>
                 <muxc:NavigationViewItem
@@ -85,8 +108,30 @@
                     </TransitionCollection>
                 </Frame.ContentTransitions>
             </Frame>
-
         </muxc:NavigationView>
+
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup>
+                <VisualState>
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="{StaticResource LargeWindowSnapPoint}" />
+                    </VisualState.StateTriggers>
+                </VisualState>
+                <VisualState>
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="{StaticResource MediumWindowSnapPoint}" />
+                    </VisualState.StateTriggers>
+                </VisualState>
+                <VisualState>
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="{StaticResource MinWindowSnapPoint}" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="AppTitleBar.Margin" Value="88,0,0,0"/>
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
     </Grid>
 </Page>
 
diff --git a/ContosoApp/AppShell.xaml.cs b/ContosoApp/AppShell.xaml.cs
@@ -22,10 +22,12 @@
 //  THE SOFTWARE.
 //  ---------------------------------------------------------------------------------
 
-using System;
 using Contoso.App.Views;
+using System;
+using Windows.ApplicationModel.Core;
 using Windows.System;
-using Windows.UI.Core;
+using Windows.UI;
+using Windows.UI.ViewManagement;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
 using Windows.UI.Xaml.Input;
@@ -53,6 +55,18 @@ public AppShell()
             {
                 NavView.SelectedItem = CustomerListMenuItem;
             };
+
+            // Set up custom title bar.
+            var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
+            coreTitleBar.ExtendViewIntoTitleBar = true;
+            // Set XAML element as a draggable region.
+            Window.Current.SetTitleBar(AppTitleBar);
+
+            var titleBar = ApplicationView.GetForCurrentView().TitleBar;
+            titleBar.ButtonBackgroundColor = Colors.Transparent;
+            titleBar.ButtonInactiveBackgroundColor = Colors.Transparent;
+            titleBar.ButtonForegroundColor = Colors.Black;
+            AppTitle.Text = Windows.ApplicationModel.Package.Current.DisplayName;
         }
 
         /// <summary>

diff --git a/ContosoApp/Views/CustomerDetailPage.xaml b/ContosoApp/Views/CustomerDetailPage.xaml
@@ -320,7 +320,6 @@
                         <AdaptiveTrigger MinWindowWidth="{StaticResource MinWindowSnapPoint}" />
                     </VisualState.StateTriggers>
                     <VisualState.Setters>
-                        <Setter Target="PageTitle.Margin" Value="64,4,0,0"/>
                         <Setter Target="EmailText.(RelativePanel.AlignLeftWithPanel)" Value="True" />
                         <Setter Target="EmailText.(RelativePanel.Below)" Value="CompanyText" />
                         <Setter Target="DetailPanel.Margin" Value="12,0,0,0" />

diff --git a/ContosoApp/Views/CustomerListPage.xaml b/ContosoApp/Views/CustomerListPage.xaml
@@ -165,7 +165,6 @@
                         <AdaptiveTrigger MinWindowWidth="{StaticResource MinWindowSnapPoint}" />
                     </VisualState.StateTriggers>
                     <VisualState.Setters>
-                        <Setter Target="PageTitle.Margin" Value="64,4,0,0"/>
                         <Setter Target="MainCommandBar.DefaultLabelPosition" Value="Bottom"/>
                     </VisualState.Setters>
                 </VisualState>

diff --git a/ContosoApp/Views/OrderDetailPage.xaml b/ContosoApp/Views/OrderDetailPage.xaml
@@ -565,7 +565,6 @@
                         <AdaptiveTrigger MinWindowWidth="{StaticResource MinWindowSnapPoint}" />
                     </VisualState.StateTriggers>
                     <VisualState.Setters>
-                        <Setter Target="PageTitle.Margin" Value="64,4,0,0"/>
                         <Setter Target="sp1.(Grid.ColumnSpan)" Value="1" />
                         <Setter Target="StatusPanel.(Grid.Row)" Value="1" />
                         <Setter Target="StatusPanel.(Grid.RowSpan)" Value="1" />

diff --git a/ContosoApp/Views/OrderListPage.xaml b/ContosoApp/Views/OrderListPage.xaml
@@ -280,7 +280,6 @@
                         <AdaptiveTrigger MinWindowWidth="{StaticResource MinWindowSnapPoint}" />
                     </VisualState.StateTriggers>
                     <VisualState.Setters>
-                        <Setter Target="PageTitle.Margin" Value="64,4,0,0"/>
                         <Setter Target="ListSplitView.DisplayMode" Value="Overlay"/>
                         <Setter Target="OrderInfoPanel.Background" Value="{ThemeResource SystemControlPageBackgroundChromeLowBrush}"/>
                         <Setter Target="OrderInfoPanel.Margin" Value="8,44,0,8"/>