.NET MAUI - Basic Navigation

Introduction

In this article, I'm going to introduce basic navigation into my .NET MAUI PDF Splitter application.

If you're following my PDF Splitter Application series, you will have a simple application based on the out-the-box .NET template with a menu bar, which we will use to drive our navigation.

If not you can jump to the complete code for the series here.

The PDF View Page

Before we can add navigation to our application, we first need to create a new page to navigate to. Go ahead and create a new PdfViewPage.xaml file in our Views directory, and a PdfViewPageViewModel.cs file in our ViewModels directory.

These will eventually display the components that form the UI of our application, but for now, we don't need to add anything to it.

Registering our Pages

Let go and update our MauiProgram.cs to make sure our new view and view model are registered, so we're ready to use them. If you've not followed the series from the start, the full code for this page can be found here:

public static MauiAppBuilder RegisterViews(this MauiAppBuilder builder) 
    {
        builder.Services.AddSingleton<AppShell>();
        builder.Services.AddSingleton<MainPage>();
        builder.Services.AddSingleton<PdfViewPage>();        

        return builder;
    }

    public static MauiAppBuilder RegisterViewModels(this MauiAppBuilder builder)
    {
        builder.Services.AddSingleton<AppShellViewModel>();
        builder.Services.AddSingleton<MainPageViewModel>();
        builder.Services.AddSingleton<PdfViewPageViewModel>();

        return builder;
    }

Registering Routes

We now need to register a route with our AppShell view. To keep it simple we can define a name for our page in the XAML for the page, then use that name for routing.

Define a name in the PdfViewPage.xaml using the x:Name property.

<?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"
             xmlns:Controls="clr-namespace:PdfSplitter.Controls"
             x:Class="PdfSplitter.Views.PdfViewPage"             
             x:Name="pdfExtractorViewPage">

    <Grid />
</ContentPage>

We can then register our route in the AppShell.xaml.cs file:

public partial class AppShell : Shell
{
    public AppShell(AppShellViewModel viewModel)
    {
        InitializeComponent();
        BindingContext = viewModel;

        // Register routes
        Routing.RegisterRoute(nameof(PdfViewPage), typeof(PdfViewPage));
    }   

}

Finally, to use our route, we will update the Open File command to navigate when selected. We will implement the file selection command later but for now, we can just add the routing to a new SelectFile function into our AppShellViewModel.cs file and extend our menu item command functionality from our previous post to call out to our new function:

public async Task OnMenuItemClicked(string item)
    {
        switch (item) {
            case "Exit":
                Application.Current.Quit();
                break;
            case "Open":
                await SelectFile();
                break;
            case "Close":        
                break;
            default:
                break;
        }
    }

    public async Task SelectFile()
    {      
         await Shell.Current.GoToAsync(nameof(PdfViewPage));        
    }

Summary

As you can see, adding basic navigation to an MAUI app is as simple as creating a page, giving it a name and registering it as a route. Next up for us is to start looking at how we can load and display a PDF file.

.NET MAUI - Basic Navigation

Comments

PDF Application with .NET MAUI

.NET MAUI - Working with PDF Files Pt. 1

More from this blog

Beginner's Guide to Semantic Kernel with Dapper, PostgreSQL, and PGVector in C#

.NET MAUI - Saving PDF Files with ITextSharp

.NET MAUI - Working with PDF Files Pt. 2

.NET MAUI - Working with PDF Files Pt. 1

Introduction

The PDF View Page

Registering our Pages

Registering Routes

Summary

Command Palette

Comments

PDF Application with .NET MAUI

.NET MAUI - Working with PDF Files Pt. 1

More from this blog

Introduction

The PDF View Page

Registering our Pages

Registering Routes

Summary