Navigation Using .NET MAUI Shell and NavigationPage

In the preceding chapters, we’ve tackled user interface (UI) design, the MVVM pattern, and data binding. These elements allow us to devise UIs at the page level. For real-world applications, the ability to navigate between pages is crucial. Consequently, most application frameworks include their own distinct navigation mechanisms, .NET MAUI being no exception. In this chapter, we’ll introduce the navigation mechanisms in .NET MAUI. We’ll start by demonstrating how to accomplish the most basic navigation using NavigationPage, then we’ll delve into a more structured navigation mechanism – Shell.

Subsequently, we’ll enhance the navigation capabilities of our application with Shell. In Chapter 2, Building Our First .NET MAUI App, we created our app using a Shell template. Despite this, our app has not yet reached the complexity required for multi-level navigation. With the integration of...

Technical requirements

To test and debug the source code in this chapter, you need to have Visual Studio 2022 installed on your PC or Mac. Please refer to the Development environment setup section in Chapter 1, Getting Started with .NET MAUI, for the details.

The source code for this chapter is available in the following branch on GitHub: https://github.com/PacktPublishing/.NET-MAUI-Cross-Platform-Application-Development-Second-edition/tree/main/2nd/chapter05.

To check out the source code of this chapter, we can use the following command:

$ git clone -b 2nd/chapter05 https://github.com/PacktPublishing/.NET-MAUI-Cross-Platform-Application-Development-Second-edition.git PassXYZ.Vault2

To find out more about the source code in this book, please refer to the Managing the source code in this book section in Chapter 2, Building Our First .NET MAUI App.

Implementing navigation

In this chapter, we are going to implement the navigation logic of our password manager app. This will include the following functionalities:

• Logging in and connecting to the database
• Exploring data in the password database

Navigation design has a significant impact on user experience. In .NET MAUI, there is a built-in mechanism to help developers implement navigation efficiently. As we saw in the previous chapters, we can use Shell in our app. In this chapter, we will learn about Shell and enhance our app with features provided by Shell. Before we dive into Shell, we will explore the basic navigation mechanism in .NET MAUI.

The most common ways to implement navigation are hierarchial and modal:

• Hierarchical navigation provides a navigation experience where the user can navigate through pages, both forward and backward. This pattern typically uses a toolbar or navigation bar at the top of the screen to display an Up...

Using Shell

The INavigation interface and NavigationPage offer basic navigation functionality. Relying solely on them would require us to create complex navigation mechanisms by ourselves. Fortunately, .NET MAUI provides built-in page templates to choose from, which can deliver various navigation experiences.

As shown in the class diagram in Figure 5.2, there are built-in pages available for different use cases. All these pages – TabbedPage, ContentPage, FlyoutPage, NavigationPage, and Shell – are derived classes of Page:

Figure 5.2: Class diagram of the built-in pages in .NET MAUI

ContentPage, TabbedPage, and FlyoutPage can be used to create various UIs per your requirements:

• ContentPage is the most commonly used page type and can include any layout and view elements. It is suitable for single-page designs.
• TabbedPage can be used to host multiple pages. Each child page can be selected by a series of tabs, located at either the top or...

Improving our app

In Chapter 4, Exploring MVVM and Data Binding, we analyzed various use cases and developed a few. In this section, utilizing the knowledge we have acquired, we will augment the existing use cases and introduce new ones.

We will be working on the following use cases:

• Use case 1: As a password manager user, I want to log in to the password manager app so that I can access my password data.

In this use case, we have not yet fully implemented user login; we plan to complete this in the subsequent chapter. For now, we will implement a pseudo-logic that encompasses all aspects except the data layer.

Previously, in Chapter 4, Exploring MVVM and Data Binding, we covered a use case that supports one level of navigation.

• Use case 3: As a password manager user, I want to see a list of groups and entries so that I can explore my password data.

To accommodate multiple levels of navigation, we will implement the following use cases...

Improving the login process

In the process of user management, we may need to add new users or remove outdated users from the system. For our app, it only allows one user to log in at a time. To support this feature, we can implement a class using the singleton pattern. Alternatively, we can implement a class and utilize dependency injection to have a similar effect on the singleton pattern. For instance, we can create a LoginService class that inherits from the User class, as demonstrated in Listing 5.4:

using System.Diagnostics;
using PassXYZLib;
namespace PassXYZ.Vault.Services;
public class LoginService : PxUser {                             //(1)
  private IUserService<User> _userService;
  private const string PrivacyNotice = "Privacy Notice";
  public static bool IsPrivacyNoticeAccepted {
    get => Preferences.Get(PrivacyNotice, false);
    set => Preferences.Set(PrivacyNotice, value);
  }
  public LoginService(IUserService<User> userService...

Summary

In this chapter, we focused on fundamental navigation principles and the Shell framework. We chose Shell as the navigation foundation for our app design, examined its capabilities, and discussed how to integrate it into our app’s UI.

After we completed most of the UI design, we enhanced our model by making changes to two service interfaces: IDataStore and IUserService. We improved the login process after making changes in the view, view model, and service layers. In the service layer, we are still using the MockDataStore class. However, we haven’t finalized the implementation in the IDataStore service to perform the actual login activities yet. We will leave this to the next chapter.

Upon completing the majority of the UI design, we proceeded to refine our model by modifying two service interfaces: IDataStore and IUserService. By making alterations in the view, view model, and service layers, we enhanced the login process. In the service layer, we continued...