Working With NavigationPage In .NET MAUI

Introduction

In this article, we will learn about the NavigationPage in .NET MAUI. In case you are new to MAUI, then I will recommend you to go through the below articles of this series.

• How .Net MAUI work?
• Project Structure of .NET MAUI Application

Navigation is one of the fundamental aspects of building an application. NavigationPage in .NET MAUI provides a hierarchical navigation experience through which we can navigate through pages. NavigationPage provides the navigation as a LIFO (Last-In, First-Out) stack of page objects. For demonstration, I will add three ContentPages in the .NET MAUI project and show How to navigate from one page to another. ContentPage is a single view, the most common page type in .NET MAUI, and a single .NET MAUI application can contain multiple pages derived from the ContentPage.

Let's add three .NET MAUI ContentPage (XAML) in a .NET MAUI project.

I named the three ContentPages as HomePage, ProductPage, and ProductDetails page.

An app that has multiple pages must have a root page. Now, let's configure the HomePage as the root page in the Navigation stack. For this, we need to set the App.Main page property with the NavigationPage object whose constructor is accepting the root page as a parameter i.e. HomePage for the App.

Now, add a button (named btnGoToProductPage) to navigate from the HomePage to ProductPage. 

HomePage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="NavigationPageDemo.HomePage"
             Title="Home Page">
    <VerticalStackLayout>
        <Label Text="Home Page Content"
               VerticalOptions="Center"
               HorizontalOptions="Center"
               Margin="10" />
        <Button x:Name="btnGoToProductPage"
                Text="Go to Product Page"
                Clicked="btnGoToProductPage_Clicked"
                Margin="10" />
    </VerticalStackLayout>
</ContentPage>

A page can be navigated by calling the PushAsync method on the Navigation property of the Current Page. In the below example, ProductPage is pushed onto the Navigation stack where it becomes the active page.

HomePage.xaml.cs

using System;
using Microsoft.Maui.Controls;
namespace NavigationPageDemo
{
    public partial class HomePage : ContentPage
    {
        public HomePage()
        {
            InitializeComponent();
        }
        private void btnGoToProductPage_Clicked(object sender, EventArgs e)
        {
            Navigation.PushAsync(new ProductPage());
        }
    }
}

In ProductPage, I have added two buttons named “btnGoToProductDetails” and ”btnGoBackToHomePage”. On clicking on btnGoToProductDetails, the ProductDetails page will be added to the navigation stack, and it will become the active page. On clicking on btnGoBackToHomePage, the PopAsync method will remove the current page i.e., Product Page, from the navigation stack, and the topmost page of the stack will become the active page.

ProductPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="NavigationPageDemo.ProductPage"
             Title="Product Page">
    <VerticalStackLayout>
        <Label Text="Product Page"
               VerticalOptions="Center"
               HorizontalOptions="Center"
               Margin="10" />
        <Button x:Name="btnGoToProductDetails"
                Text="Go to Product Details"
                Clicked="btnGoToProductDetails_Clicked"
                Margin="10" />
        <Button x:Name="btnGoBackToHomePage"
                Text="Go back to Home Page"
                Clicked="btnGoBackToHomePage_Clicked"
                Margin="10" />
    </VerticalStackLayout>
</ContentPage>

ProductPage.xaml.cs

using System;
using Microsoft.Maui.Controls;
namespace NavigationPageDemo
{
    public partial class ProductPage : ContentPage
    {
        public ProductPage()
        {
            InitializeComponent();
        }
        private void btnGoToProductDetails_Clicked(object sender, EventArgs e)
        {
            Navigation.PushAsync(new ProductDetails());
        }
        private void btnGoBackToHomePage_Clicked(object sender, EventArgs e)
        {
            Navigation.PopAsync();
        }
    }
}

On the ProductDetails Page, I have added a button i.e. btnGoBackToProductPage. On Clicking, it will remove the current page from the navigation stack with the PopAsync method call.

ProductDetails.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="NavigationPageDemo.ProductDetails"
             Title="Product Details">
    <VerticalStackLayout>
        <Label Text="Product Details"
               VerticalOptions="Center"
               HorizontalOptions="Center"
               Margin="10" />
        <Button x:Name="btnGoBackToProductPage"
                Text="Go back to Product Page"
                Clicked="btnGoBackToProductPage_Clicked"
                Margin="10" />
    </VerticalStackLayout>
</ContentPage>

ProductDetails.xaml.cs

using System;
using Microsoft.Maui.Controls;
namespace NavigationPageDemo
{
    public partial class ProductDetails : ContentPage
    {
        public ProductDetails()
        {
            InitializeComponent();
        }
        private void btnGoBackToProductPage_Clicked(object sender, EventArgs e)
        {
            Navigation.PopAsync();
        }
    }
}

Working Preview on Android

Preview on Windows

The navigation property of the page also provides the InsertPageBefore and RemovePage methods for manipulating the Stack by inserting the pages or removing them.

.NET MAUI also supports Modal navigation. A modal page encourages users to complete a self-contained task that cannot be navigated away until the task is completed or canceled. PushModalAsync and PopModalAsync are the methods to push and pop pages from the modal stack.

NavigationPage has several properties; a few are listed below. (For more details, you can refer to the documentation on Microsoft's official website)
1. BarBackgroundColor: Specifies the background color of the Navigation Bar.
2. BarTextColor: Specifies the Text color of the Navigation Bar
3. HasNavigationBar: Specifies whether a navigation bar is present on the NavigationPage. Its default value is true.
4. HasBackButton: Represent whether the navigation bar includes the back button. The default value of this property is true.

Let’s try to change the navigation bar and text color. Use the below code in the App class; we can change the BarBackground and BarTextColor.

Preview on Android

Preview on Windows