MAUI Navigation: Getting Started

This tutorial will guide you through the fundamental concepts of navigation in .NET MAUI, enabling you to build sophisticated multi-screen applications.

Introduction

Navigation is a core aspect of mobile and desktop application development. In .NET MAUI, navigation allows users to move between different pages or views within your application. MAUI provides a flexible and powerful navigation system that supports various patterns, from simple page transitions to complex hierarchical navigation.

Basic Navigation

The most common form of navigation is push and pop. When you navigate to a new page, it's pushed onto the navigation stack. When you go back, the current page is popped off the stack, revealing the previous page.

Pushing a Page

To navigate to a new page, you'll typically use the Navigation.PushAsync() method:

await Navigation.PushAsync(new MySecondPage());

Popping a Page

To go back to the previous page, use the Navigation.PopAsync() method:

await Navigation.PopAsync();

Passing Data

Often, you'll need to pass data from one page to another. The most straightforward way to do this is by passing data through the constructor of the target page.

// In the source page
            var person = new Person { Name = "Alice" };
            await Navigation.PushAsync(new DetailsPage(person));

            // In the target page (DetailsPage)
            public DetailsPage(Person person)
            {
                InitializeComponent();
                // Use the person object here
                this.BindingContext = person;
            }

Modal Navigation

Modal pages are used for tasks that require user attention without interrupting the main flow of the application, such as login screens or settings dialogs. They are presented modally, meaning the user must interact with the modal page before returning to the previous one.

Presenting a Modal Page

Use Navigation.PushModalAsync() to present a page modally:

await Navigation.PushModalAsync(new LoginPage());

Dismissing a Modal Page

To dismiss a modal page, use Navigation.PopModalAsync():

await Navigation.PopModalAsync();

Tabbed Navigation

Tabbed navigation organizes content into different categories, each accessible via a tab bar. This is commonly used in mobile applications.

You can achieve tabbed navigation using the TabbedPage class:

<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                        xmlns:local="clr-namespace:MyMauiApp.Pages"
                        x:Class="MyMauiApp.Pages.MainTabbedPage">

                <local:HomePage Title="Home" />
                <local:SettingsPage Title="Settings" />
                <local:ProfilePage Title="Profile" />

            </TabbedPage>

Flyout Navigation

Flyout navigation (also known as hamburger navigation or drawer navigation) provides a slide-out menu that can contain navigation links and other options. This is often used for applications with many top-level sections.

Use the Shell class for flyout navigation:

<-- AppShell.xaml -->
            <Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                   x:Class="MyMauiApp.AppShell"
                   FlyoutBehavior="Disabled">

                <ShellContent Title="Home"
                              ContentTemplate="{DataTemplate local:HomePage}"
                              Route="HomePage" />
                <ShellContent Title="About"
                              ContentTemplate="{DataTemplate local:AboutPage}"
                              Route="AboutPage" />

            </Shell>

Navigation Parameters

When using Shell's routing, you can pass parameters to navigate to specific items or with specific data.

// Navigate to a profile with a user ID
            await Shell.Current.GoToAsync($"ProfilePage?userId=123");

            // In ProfilePage
            [QueryProperty(nameof(UserId), "userId")]
            public string UserId { get; set; }
            protected override void OnNavigatedTo(NavigatedToEventArgs args)
            {
                base.OnNavigatedTo(args);
                // Use UserId here
            }

Tip: Always ensure that your navigation logic is clear and user-friendly. Consider using navigation parameters for passing complex data or identifying specific resources.