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

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
{
    /// 
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// 
    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

MainPage.xaml

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?

user_14293142 · Answer

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:

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:


    ……

user_15339167 · Answer

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 -

UWP: Navigation View does not fully extend into title bar

2 Answers