MAUI Navigation

Navigation is a fundamental aspect of any mobile application. In .NET MAUI, you can implement navigation between pages using various approaches, including shell navigation and programmatic navigation.

Shell Navigation

MAUI Shell provides a simplified way to implement common application navigation patterns. It allows you to define your navigation hierarchy declaratively in XAML or C#.

Navigation Hierarchy

Shell organizes your application's content into a hierarchy of tabs, flyouts, and other navigation elements. The core components are:

Shell: The main entry point for your Shell application.
ShellItem: Represents a top-level item in the Shell navigation, such as a tab or a flyout item.
ShellContent: Represents the content that is displayed when a ShellItem is selected.
FlyoutItem: Represents an item in the flyout menu.
Tab: Represents a tab within a tabbed page.

Example: Basic Tabbed Navigation

<!-- AppShell.xaml -->
<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:YourAppNamespace"
       x:Class="YourAppNamespace.AppShell">

    <TabBar>
        <ShellContent Title="Home"
                      Icon="home.png"
                      ContentTemplate="{DataTemplate local:HomePage}" />
        <ShellContent Title="About"
                      Icon="info.png"
                      ContentTemplate="{DataTemplate local:AboutPage}" />
    </TabBar>

</Shell>

Routing

Shell uses a routing system to navigate between pages. You can navigate to pages by their relative or absolute routes. By default, the route for a page is its class name.

            Tip
            You can define custom routes for your pages in XAML or in code-behind to make navigation more explicit and maintainable.
        

Programmatic Navigation

For more complex scenarios or when you need to navigate based on specific application logic, you can use programmatic navigation. This typically involves using the NavigationService or directly accessing the Navigation property of a page.

Pushing and Popping Pages

You can push new pages onto the navigation stack or pop the current page off to go back.

// Pushing a new page
await Navigation.PushAsync(new DetailPage());

// Popping the current page
await Navigation.PopAsync();

// Pushing a page and removing the current one from the stack
await Navigation.PushAsync(new AnotherPage(), true); // 'true' to remove the previous page

// Popping all pages except the root
await Navigation.PopToRootAsync();

Navigating with Parameters

You can pass data between pages during navigation. One common way is to pass parameters through the constructor of the destination page.

// Sending data
var product = new Product { Id = 123, Name = "Example Item" };
await Navigation.PushAsync(new ProductDetailPage(product));

// Receiving data in the destination page
public partial class ProductDetailPage : ContentPage
{
    public ProductDetailPage(Product product)
    {
        InitializeComponent();
        // Use the product data here
        this.BindingContext = product;
    }
}

When using MAUI Shell, you can leverage its routing capabilities with parameters. This is often a more structured approach for passing data than relying solely on constructors.

Navigation Service

For larger applications, it's recommended to implement a dedicated navigation service. This decouples navigation logic from your UI code, making it easier to manage and test.

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

public class MauiNavigationService : INavigationService
{
    // Implementation using Shell.Current.GoToAsync or Navigation.PushAsync etc.
    // ...
}

Registering Services

Ensure your navigation service is registered with your application's dependency injection container.

Common Navigation Scenarios

Tabbed Navigation: For switching between distinct sections of your app.
Hierarchical Navigation: Navigating from a list to a detail view.
Modal Navigation: Presenting pages that require user interaction before returning to the previous page.
Deep Linking: Allowing users to navigate directly to specific content within your app from external sources.

Always consider the user experience when designing navigation. Ensure it's intuitive and consistent across your application.

Mastering navigation in .NET MAUI is key to building engaging and user-friendly cross-platform applications. Explore the MAUI Shell for its powerful navigation features and consider implementing custom navigation services for complex architectures.