Navigation in MVVM

So far in our journey of building the Recipes! app, we have laid a robust foundation using the MVVM design pattern. Now, there’s one important part missing: navigation – that is, moving between different pages of the app. This chapter will focus on the practical side of navigation within .NET MAUI. We’ll break down our discussion into four key areas:

• About .NET MAUI Shell
• Setting up navigation in a .NET MAUI Shell app
• Setting up navigation without .NET MAUI Shell
• Passing results back

MVVM largely focuses on the separation of concerns, decoupling the logic from the presentation layer. When we integrate navigation within the MVVM architecture, we’re essentially extending the principle of “separation of concerns” to the navigation logic. To implement this effectively, it’s essential to grasp key principles of navigation.

By the end of this chapter, you’ll have a solid grasp of .NET...

Technical requirements

We will continue to add functionality to the Recipes! app throughout this chapter. As always, everything can be found on GitHub at https://github.com/PacktPublishing/MVVM-pattern-.NET-MAUI/tree/main/Chapter08. You can start from the code provided in the Start folder to follow along with this chapter. The Finish folder contains the completed code, which you can consult for reference.

About .NET MAUI Shell

.NET MAUI Shell is an opinionated way to create the structure of a .NET MAUI app. It introduces a more simplified approach to building mobile applications, which can be quite complex when it comes to structuring and navigation. Shell streamlines these aspects by providing a unified, declarative syntax for expressing the structure and navigation pattern of an application.

Being opinionated, .NET MAUI Shell has specific guidelines and conventions it expects developers to follow, with the benefit of reducing boilerplate code and effort. It brings a variety of features to the table, aiming to reduce the complexity of mobile application development:

• URI-based navigation: Shell supports a URI-based navigation scheme, similar to web development models. Developers can define a route to a particular page. These routes allow for easy and loosely coupled navigation around the app, making the navigation code more straightforward and less error-prone.
• Simplifying...

Setting up navigation in a .NET MAUI Shell app

Effective navigation within the MVVM pattern begins with an integral component: a NavigationService. This service is the driving force behind MVVM navigation. In essence, a NavigationService is a class that implements an INavigationService interface. The INavigationService interface provides the contract for navigating between pages, defining the various methods needed for such operations. These methods could include operations such as GoToDetailPage(), GoBack(), and others, depending on your specific requirements.

Here’s the beauty of this setup: during the app’s startup, we register a framework-specific implementation of the INavigationService interface with the DI container. It’s a perfect illustration of the power of DI, where we program to an interface, not an implementation. This allows our ViewModels to be completely platform-agnostic. This not only promotes code flexibility and testability but also allows...

Setting up navigation without .NET MAUI Shell

As I mentioned earlier, Shell is an opinionated way to create the structure of a .NET MAUI app. This might not work for you or your particular project. Not using Shell complicates the implementation of a NavigationService a lot, especially when your app has a complex structure such as tabs or a flyout menu. Let’s focus on a simple hierarchical navigation and see what is needed to implement a NavigationService without relying on another framework.

Luckily, the interfaces we created earlier (INavigationService, INavigatedTo, INavigatedFrom, and INavigationParameterReceiver) are framework-independent and can still be used as the backbone of this implementation:

1. No Shell means no routing. However, I do like the concept of having keys associated with a particular view as it allows for a loosely coupled way of navigating. That’s why we’re creating a static Routes class in the Navigation folder of the Recipes.Mobile...

Passing results back

In this chapter, we’ve explored passing parameters from one page to another during forward navigation. But what if we need to take an object, use it as a parameter to navigate to another page, manipulate it there, and then retrieve the updated result?

There are various approaches to achieve this, but the most straightforward method is to add a little extension to our navigation framework and allow parameters to be passed when navigating back. For example, on the SettingsPage of the Recipes! app, we show the user’s current language. There’s a button that navigates to the PickLanguagePage, where the user can select a different language. The current language needs to be passed from the SettingsPage to the PickLanguage page so that the latter can show the current value. When the user selects a new language, the PickLanguagePage should navigate back to the SettingsPage and pass the selected language as a parameter. Figure 8.2 shows how this looks...

Summary

The fundamental picture of navigation is quite straightforward: a navigation service, which is injected into ViewModels, is utilized to handle navigation. ViewModels can implement specific interfaces, enabling them to receive parameters or be notified about navigation activities, be it from or to them.

While the overall idea seems simple, the implementation can be complex, and this is where developers often become puzzled. Fortunately, .NET MAUI Shell streamlines the navigation process in complex UIs, providing a level of ease in the implementation. But as with anything, Shell’s opinionated nature may not suit every application or developer’s preferences. Therefore, we didn’t stop at exploring Shell navigation but also dove into building a navigation service that is not reliant on Shell.

Toward the end of this chapter, we looked a bit deeper into passing parameters and results between pages. We demonstrated that by efficiently combining navigation...

Further reading

To learn more about the topics that were covered in this chapter, take a look at the following resources:

• .NET MAUI Shell: https://learn.microsoft.com/dotnet/maui/fundamentals/shell/
• Prism Library: https://prismlibrary.com/
• FreshMvvm: https://github.com/XAM-Consulting/FreshMvvm.Maui