MAUI Navigation

Introduction to MAUI Navigation

.NET MAUI (Multi-platform App UI) provides a robust and flexible navigation system that allows you to build sophisticated user experiences across Android, iOS, macOS, and Windows. Understanding how to navigate between pages is fundamental to creating engaging mobile and desktop applications.

MAUI's navigation model is built around the concept of NavigationPage, which provides a customizable navigation bar and manages a history of pages. For more advanced scenarios, .NET MAUI Shell offers a streamlined way to define application structure and navigation.

Types of Navigation

MAUI supports various navigation patterns to suit different application designs:

Modal Navigation

Modal navigation is used for presenting pages that require user interaction without allowing them to return to the previous page directly. This is often used for settings, login screens, or confirmation dialogs.

You can initiate modal navigation using the Navigation.PushModalAsync() method:

await Navigation.PushModalAsync(new MyModalPage());

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

await Navigation.PopModalAsync();

Tabbed Navigation

Tabbed navigation presents a set of tabs at the bottom of the screen, allowing users to switch between different sections of your application. This is achieved using the TabbedPage control.

Here's a simple example:

<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                        xmlns:local="clr-namespace:MyApp.Views"
                        x:Class="MyApp.Views.MainTabPage"
                        >
    <local:HomePage Title="Home" />
    <local:SettingsPage Title="Settings" />
</TabbedPage>

Shell Navigation

.NET MAUI Shell simplifies the creation of apps with common UI patterns like flyouts and tabs. It provides a declarative way to define your app's navigation hierarchy.

With Shell, you can define routes for pages and navigate to them using string-based URIs. This reduces boilerplate code and streamlines navigation logic.

await Shell.Current.GoToAsync("//LoginPage");

Shell automatically handles the navigation bar, back button, and other UI elements, making it ideal for complex apps.

Implementing a Navigation Service

For larger applications, it's good practice to abstract navigation logic into a dedicated service. This promotes testability and maintainability.

A common pattern involves an interface defining navigation methods and a concrete implementation that uses Shell.Current.GoToAsync() or Navigation.PushAsync().

public interface INavigationService
{
    Task NavigateToAsync(string route, Dictionary<string, object> parameters = null);
    Task GoBackAsync();
}

public class MauiNavigationService : INavigationService
{
    public async Task NavigateToAsync(string route, Dictionary<string, object> parameters = null)
    {
        // Implementation using Shell.Current.GoToAsync or NavigationPage
        if (Shell.Current != null)
        {
            await Shell.Current.GoToAsync(route, parameters);
        }
        else
        {
            // Handle NavigationPage scenario if not using Shell
        }
    }

    public async Task GoBackAsync()
    {
        if (Shell.Current != null)
        {
            await Shell.Current.GoBackAsync();
        }
        else
        {
            // Handle NavigationPage scenario if not using Shell
        }
    }
}

Passing Data Between Pages

You can pass data to the destination page using navigation parameters. This is particularly useful when navigating to a detail view or a form.

When using Shell.Current.GoToAsync(), you can pass a dictionary of parameters:

// From the source page
var parameters = new Dictionary<string, object>
{
    { "ItemId", 123 },
    { "ItemName", "Sample Item" }
};
await Shell.Current.GoToAsync("detailsPage", parameters);

On the destination page, you can retrieve these parameters by subscribing to the NavigatedTo event or by accessing them directly within the page's constructor or `OnAppearing` method when using Shell's routing.

protected override void OnNavigatedTo(NavigatedToEventArgs args)
{
    base.OnNavigatedTo(args);

    if (args.Parameters.ContainsKey("ItemId"))
    {
        var itemId = (int)args.Parameters["ItemId"];
        // Load item with itemId
    }
}

Navigation Parameters

Navigation parameters allow you to send data and configuration options when navigating. These can be query parameters in a URI or key-value pairs in a dictionary.

Example with query parameters:

await Shell.Current.GoToAsync($"detailsPage?id={itemId}&name={itemName}");

When using NavigationPage, you can pass parameters by creating an instance of the destination page and passing data through its constructor or properties.

await Navigation.PushAsync(new DetailsPage { ItemId = 123, ItemName = "Sample Item" });

Handling the Back Button

MAUI provides mechanisms to control the back button behavior.

For NavigationPage, the back button is automatically managed. You can control whether a page can be dismissed by using NavigationPage.HasBackButtonProperty attached property or by overriding NavigationPage.ShouldPopOnBackNavigation.

With MAUI Shell, the back navigation is integrated into the shell's routing system. You can define the navigation hierarchy and Shell will manage the back button's visibility and functionality.

To intercept back navigation requests, you can use the BackButtonPressed event or override the OnBackButtonPressed method in your page:

protected override bool OnBackButtonPressed()
{
    // Your custom back button logic here
    // Return true to consume the back button press
    // Return false to allow default back button behavior
    return base.OnBackButtonPressed();
}