.Net Maui Hierarchical And Modal Navigation Complete Guide

Getting Started with .NET MAUI Navigation

Understanding Navigation in .NET MAUI

In .NET MAUI, navigation is essential for moving between different pages within your application. There are two primary types of navigation:

1. Hierarchical Navigation: Used to move between pages in a stack, allowing you to navigate forward and backward.
2. Modal Navigation: Used to display pages in a modal mode, where the user must dismiss the current page to continue interacting with the application.

Setting Up Your .NET MAUI Project

Before diving into navigation, ensure you have a .NET MAUI project set up. If you haven’t already, follow these steps:

1. Install .NET MAUI Workloads: Make sure you have the necessary .NET MAUI workloads installed. You can do this via Visual Studio or using the .NET CLI.

2. Create a New Project: Open Visual Studio and create a new project. Choose "MAUI App (.NET 6+)" from the templates.

Hierarchical Navigation

Overview

Hierarchical navigation involves pushing and popping pages onto and from a navigation stack. The pages are stacked one on top of the other, with the last page being visible. You can navigate backward by popping the pages from the stack.

Step-by-Step Example

Let's create a simple example to demonstrate hierarchical navigation:

1. Create New Pages: First, we'll create two pages, MainPage.xaml and SecondPage.xaml.

2. MainPage.xaml: This will be our initial page with a button to navigate to the second page.

3. SecondPage.xaml: This will be the destination page with a button to return to the main page.

Step 1: Create the SecondPage

<!-- SecondPage.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="YourNamespace.SecondPage"
             Title="Second Page">
    <ContentPage.Content>
        <StackLayout VerticalOptions="Center">
            <Label Text="Welcome to the Second Page!" 
                   HorizontalTextAlignment="Center" 
                   FontSize="Large"/>
            <Button Text="Go Back to Main Page" 
                    Clicked="OnGoBackClicked" 
                    HorizontalOptions="Center"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

// SecondPage.xaml.cs
using Microsoft.Maui.Controls;

namespace YourNamespace
{
    public partial class SecondPage : ContentPage
    {
        public SecondPage()
        {
            InitializeComponent();
        }

        private async void OnGoBackClicked(object sender, EventArgs e)
        {
            await Navigation.PopAsync();
        }
    }
}

Step 2: Update MainPage to Navigate to SecondPage

<!-- MainPage.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="YourNamespace.MainPage"
             Title="Main Page">
    <ContentPage.Content>
        <StackLayout VerticalOptions="Center">
            <Label Text="Welcome to the Main Page!" 
                   HorizontalTextAlignment="Center" 
                   FontSize="Large"/>
            <Button Text="Go to Second Page" 
                    Clicked="OnGoToSecondPageClicked" 
                    HorizontalOptions="Center"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

// MainPage.xaml.cs
using Microsoft.Maui.Controls;

namespace YourNamespace
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private async void OnGoToSecondPageClicked(object sender, EventArgs e)
        {
            await Navigation.PushAsync(new SecondPage());
        }
    }
}

Step 3: Set MainPage as the Root

In your App.xaml.cs, ensure MainPage is set as the root page of the application.

// App.xaml.cs
using Microsoft.Maui.Controls;

namespace YourNamespace
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new NavigationPage(new MainPage());
        }
    }
}

Explanation

• NavigationPage: The NavigationPage is critical as it manages the navigation stack. We wrap MainPage with NavigationPage to enable hierarchical navigation.
• PushAsync: This method pushes a new page onto the navigation stack.
• PopAsync: This method pops the top page from the navigation stack, navigating back to the previous page.

Modal Navigation

Overview

Modal navigation allows you to display a page that blocks interaction with the underlying page until it's dismissed. It's ideal for scenarios like displaying dialogues, login screens, or settings.

Step-by-Step Example

Let's create a simple example to demonstrate modal navigation:

1. Create New Pages: We'll create a ModalPage.xaml to be displayed modally.

2. MainPage.xaml: We'll add a button to display the modal page.

3. ModalPage.xaml: This will be the modally displayed page with a button to dismiss it.

Step 1: Create the ModalPage

<!-- ModalPage.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="YourNamespace.ModalPage"
             Title="Modal Page">
    <ContentPage.Content>
        <StackLayout VerticalOptions="Center">
            <Label Text="This is a Modal Page!" 
                   HorizontalTextAlignment="Center" 
                   FontSize="Large"/>
            <Button Text="Dismiss Modal" 
                    Clicked="OnDismissClicked" 
                    HorizontalOptions="Center"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

// ModalPage.xaml.cs
using Microsoft.Maui.Controls;

namespace YourNamespace
{
    public partial class ModalPage : ContentPage
    {
        public ModalPage()
        {
            InitializeComponent();
        }

        private async void OnDismissClicked(object sender, EventArgs e)
        {
            await Navigation.PopModalAsync();
        }
    }
}

Step 2: Update MainPage to Display the ModalPage

<!-- MainPage.xaml (updated) -->
<?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="YourNamespace.MainPage"
             Title="Main Page">
    <ContentPage.Content>
        <StackLayout VerticalOptions="Center">
            <Label Text="Welcome to the Main Page!" 
                   HorizontalTextAlignment="Center" 
                   FontSize="Large"/>
            <Button Text="Go to Second Page" 
                    Clicked="OnGoToSecondPageClicked" 
                    HorizontalOptions="Center"/>
            <Button Text="Display Modal Page" 
                    Clicked="OnDisplayModalClicked" 
                    HorizontalOptions="Center" 
                    Margin="0,20,0,0"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

// MainPage.xaml.cs (updated)
using Microsoft.Maui.Controls;

namespace YourNamespace
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private async void OnGoToSecondPageClicked(object sender, EventArgs e)
        {
            await Navigation.PushAsync(new SecondPage());
        }

        private async void OnDisplayModalClicked(object sender, EventArgs e)
        {
            await Navigation.PushModalAsync(new ModalPage());
        }
    }
}

Explanation

• PushModalAsync: This method displays a new page modally, blocking interaction with the underlying page.
• PopModalAsync: This method dismisses the modally displayed page, returning control to the previous page.

Summary

In this guide, we covered the basics of navigation in .NET MAUI, focusing on Hierarchical and Modal navigation. We walked through step-by-step examples, creating two pages and demonstrating how to navigate between them.

• Hierarchical Navigation is suitable for moving between pages in a stack, allowing you to navigate forward and backward.
• Modal Navigation is useful for displaying pages that require immediate user attention, such as dialogues or settings.

With these examples, you should be able to implement basic navigation in your .NET MAUI applications. Feel free to expand upon these examples and explore additional navigation features provided by .NET MAUI!

Additional Resources

• .NET MAUI Documentation
• Microsoft Learn - .NET MAUI
• GitHub Repository for the .NET MAUI source code and community contributions.

Happy coding! 🚀✨