UWP: Navigation View does not fully extend into title bar

Question

In my UWP app, I'm trying to extend the navigation view into title bar. But the problem is it does not reach the title bar like below.

What I want is like below.

You can see the "XAML Controls Gallery" and the back button are on the topmost position, in my case they are down. And I want to place my "Student Management" beside the back button like in the second image.

Below is my code.

App.xaml.cs

OnLaunched () {
    // entends views to the title bar
    var coreTitleBar = 
    Windows.ApplicationModel.Core.CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
    ApplicationViewTitleBar titleBar = ApplicationView.GetForCurrentView().TitleBar;
    titleBar.ButtonBackgroundColor = Colors.Transparent;
    titleBar.ButtonInactiveBackgroundColor = Colors.Transparent;
}

MainPage.xaml

<Page
    x:Class="HelloWorld.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloWorld"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{StaticResource NavigationViewExpandedPaneBackground}"
    >

    <Grid x:Name="AppTitleBar" Background="Transparent">
        <Grid.Resources>
            <AcrylicBrush x:Key="NavigationViewExpandedPaneBackground"
                  BackgroundSource="HostBackdrop"
                  TintColor="AliceBlue"
                  TintOpacity="0.6"
                  FallbackColor="White"/>
        </Grid.Resources>
        <NavigationView 
            x:Name="navView" 
            IsBackEnabled="True" 
            Loaded="NavigationView_Loaded" 
            SelectionChanged="NavigationView_SelectionChanged"
            PaneOpening="navView_PaneOpening"
            IsBackButtonVisible="Visible"
            SelectionFollowsFocus="Disabled"
            Header="Students"
            PaneDisplayMode="Auto"
            Background="{StaticResource SystemChromeWhiteColor}" 
            OpenPaneLength="280" UseLayoutRounding="True" ScrollViewer.VerticalScrollBarVisibility="Auto" FontSize="12" PaneTitle="Student Management"
            >
            <NavigationView.MenuItems>
                <NavigationViewItem Icon="People" Content="Students" Tag="students"/>
                <NavigationViewItem Icon="Bookmarks" Content="Gradings" Tag="gradings"/>
                <NavigationViewItem Icon="ContactInfo" Content="Statistics and Reports" Tag="reports"/>
                <NavigationViewItem Icon="Print" Content="Print" Tag="print"/>
                <NavigationViewItem Icon="Admin" Content="Users" Tag="users"/>
            </NavigationView.MenuItems>

            <ScrollViewer>
                <Frame x:Name="ContentFrame"/>
            </ScrollViewer>
        </NavigationView>
    </Grid>
</Page>

MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Numerics;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409

namespace HelloWorld
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void NavigationView_Loaded(object sender, RoutedEventArgs e)
        {
            Console.WriteLine("loaded banana ---");
            ContentFrame.Navigate(typeof(Students));
        }

        private void NavigationView_SelectionChanged(NavigationView sender, NavigationViewSelectionChangedEventArgs args)
        {
            Console.WriteLine("changed banana ---");
            if (args.IsSettingsSelected)
            {
                // if you have setting page, load here. 
            }
            else
            {

                NavigationViewItem item = args.SelectedItem as NavigationViewItem;

                switch (item.Tag.ToString())
                {
                    case "students":
                        sender.Header = "Students";
                        ContentFrame.Navigate(typeof(Students));
                        break;
                    case "gradings":
                        sender.Header = "Gradings";
                        ContentFrame.Navigate(typeof(Gradings));
                        break;
                    case "reports":
                        sender.Header = "Reports";
                        ContentFrame.Navigate(typeof(Reports));
                        break;
                    case "print":
                        sender.Header = "Print";
                        ContentFrame.Navigate(typeof(Print));
                        break;
                    case "users":
                        sender.Header = "Users";
                        ContentFrame.Navigate(typeof(Users));
                        break;
                }
            }
        }

        private void navView_PaneOpening(NavigationView sender, object args)
        {
            Console.WriteLine("opening");
            navView.Translation = new Vector3(0, 0, 0);
        }
    }
}

Edit: Using WinUI

I've tried WinUI to use IsTitleBarAutoPaddingEnabled described in here . But doesn't work.

App.xaml

<Application
    x:Class="HelloWorld.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloWorld">
    <Application.Resources>
        <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
    </Application.Resources>
</Application>

MainPage.xaml

<Page
    x:Class="HelloWorld.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloWorld"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls" // <- this is added according to documentation
    mc:Ignorable="d"
    Background="{StaticResource NavigationViewExpandedPaneBackground}"
    >

    <Grid x:Name="AppTitleBar" Background="Transparent">
        <Grid.Resources>
            <AcrylicBrush x:Key="NavigationViewExpandedPaneBackground"
                  BackgroundSource="HostBackdrop"
                  TintColor="AliceBlue"
                  TintOpacity="0.6"
                  FallbackColor="White"/>
        </Grid.Resources>
        <muxc:NavigationView 
            IsTitleBarAutoPaddingEnabled="False"
            x:Name="navView" 
            Loaded="NavigationView_Loaded" 
            SelectionChanged="NavigationView_SelectionChanged"
            PaneOpening="navView_PaneOpening"
            IsBackButtonVisible="Collapsed"
            SelectionFollowsFocus="Disabled"
            Header="Students"
            PaneDisplayMode="Auto"
            Background="{StaticResource SystemChromeWhiteColor}" 
            OpenPaneLength="320" 
            UseLayoutRounding="True" 
            ScrollViewer.VerticalScrollBarVisibility="Auto" 
            FontSize="14"
            PaneTitle="STUDENT MANAGEMENT" 
            CharacterSpacing="20" 
            FontStretch="SemiExpanded" 
            RequestedTheme="Default"
            >
            <muxc:NavigationView.PaneHeader>
                <Image Source="/Assets/logo.png" HorizontalAlignment="Left" Margin="5,5,5,5"></Image>
            </muxc:NavigationView.PaneHeader>
            <muxc:NavigationView.MenuItems>
                <muxc:NavigationViewItem Icon="People" Content="Students" Tag="students" Width="320"/>
                <muxc:NavigationViewItem Icon="Bookmarks" Content="Gradings" Tag="gradings" Width="320"/>
                <muxc:NavigationViewItem Icon="ContactInfo" Content="Statistics and Reports" Tag="reports" Width="320"/>
                <muxc:NavigationViewItem Icon="Print" Content="Print" Tag="print" Width="320"/>
                <muxc:NavigationViewItem Icon="Admin" Content="Users" Tag="users" Width="320"/>
            </muxc:NavigationView.MenuItems>

            <ScrollViewer>
                <Frame x:Name="ContentFrame"/>
            </ScrollViewer>
        </muxc:NavigationView>
    </Grid>
</Page>

Above usage, I got the following error.

Error   CS0426  
The type name 'NavigationView' does not exist in the type 'Controls'.

When I remove muxc around the navigation and its children, I got a warning in the IsTitleBarAutoPaddingEnabled which says The property 'IsTitleBarAutoPaddingEnabled' was not found in type 'NavigationView'. & Unknown member 'IsTitleBarAutoPaddingEnabled' on element 'NavigationView' and can't run the project.

I'm using Microsoft.UI.Xaml 2.5.0. What did I miss?

Answer 1

You could try to set the Margin property of the Grid to let the navigation view extend into title bar. And you could add a TextBlock control over the NaviagtionView control to meet your second requirement.

Please check the following code as a reference:

<Grid x:Name="AppTitleBar" Background="Transparent" Margin="0,-1,0,0">  <!--Use the Margin with a negative vlue.-->
    <Grid.Resources>
        <AcrylicBrush x:Key="NavigationViewExpandedPaneBackground"
              BackgroundSource="HostBackdrop"
              TintColor="AliceBlue"
              TintOpacity="0.6"
              FallbackColor="White"/>
    </Grid.Resources>

    <NavigationView 
        x:Name="navView" 
        IsBackEnabled="True" 
        Loaded="NavigationView_Loaded" 
        SelectionChanged="NavigationView_SelectionChanged"
        PaneOpening="navView_PaneOpening"
        IsBackButtonVisible="Visible"
        SelectionFollowsFocus="Disabled"
        PaneDisplayMode="Auto"
        Background="{StaticResource SystemChromeWhiteColor}" 
        OpenPaneLength="280" UseLayoutRounding="True" ScrollViewer.VerticalScrollBarVisibility="Auto" FontSize="12"
        >
        <NavigationView.MenuItems>
            <NavigationViewItem Icon="People" Content="Students" Tag="students"/>
            <NavigationViewItem Icon="Bookmarks" Content="Gradings" Tag="gradings"/>
            <NavigationViewItem Icon="ContactInfo" Content="Statistics and Reports" Tag="reports"/>
            <NavigationViewItem Icon="Print" Content="Print" Tag="print"/>
            <NavigationViewItem Icon="Admin" Content="Users" Tag="users"/>
        </NavigationView.MenuItems>

        <ScrollViewer>
            <Frame x:Name="ContentFrame"/>
        </ScrollViewer>
    </NavigationView>
    <!--Add a TextBlock over the NaviagationView control to show a text beside the back button.-->
    <!--Note to put the TextBlock below the NavigationView to prevent the TextBlock from being hidden by the NavigationView.-->
    <TextBlock Text="Student Management" Margin="40,6,0,0"  FontSize="20"/>

</Grid>

In addition, there is an easier way to hide the title bar by using the NavigationView control in WinUI library. You could set the value of IsTitleBarAutoPaddingEnabled property to False in NavigationView control referring to the document .

For example:

<muxc:NavigationView IsTitleBarAutoPaddingEnabled="False"
    x:Name="navView" 
    ……
   >
    ……
 </muxc:NavigationView>

Answer 2

Add only property like IsTitleBarAutoPaddingEnabled to false in muxc:NavigationView if didn't working so another property doesn't allow to control this property.

XAML code looks like -

<muxc:NavigationView
    ...
    IsTitleBarAutoPaddingEnabled="False"
    ... />