![]()
In the world of .NET MAUI, navigation is a fundamental aspect that can significantly affect the structure and flow of an application. Two primary navigation patterns stand out: Shell navigation and NavigationPage. Each has its strengths and ideal use cases, and understanding when to use one over the other is key to building efficient and user-friendly apps.
Shell Navigation
The Integrated Approach
Shell navigation is a feature-rich framework that simplifies complex navigation scenarios. It’s best suited for applications that require a unified experience across different platforms, deep linking capabilities, and an integrated search feature. Shell is particularly useful for apps with multiple levels of navigation, such as those with a flyout menu, bottom tabs, and top tabs.
For example, consider an e-commerce app that requires a bottom tab bar for quick access to browsing, cart, and profile sections, along with a flyout menu for settings and customer support. Shell navigation allows you to define all these navigation patterns declaratively in one place, making the code more maintainable and the user experience consistent.
NavigationPage
The Stack-Based Classic
NavigationPage, on the other hand, is ideal for simpler applications where a stack-based navigation model is sufficient. This might be the case for apps that follow a linear flow, such as a form submission process or a step-by-step tutorial. NavigationPage provides a straightforward push-and-pop navigation model that is easy to understand and implement.
For instance, a survey app that guides users through a series of questions, one screen at a time, would benefit from the simplicity of NavigationPage. Users can easily move forward to the next question or go back to the previous one without the need for complex navigation structures.
Sending Parameters between Pages
When it comes to passing data between pages, both navigation patterns offer solutions. However, the method differs based on the pattern used.
With Shell Navigation
Shell navigation uses query properties to pass parameters. This means you don’t need to modify the constructor of the destination page to accept parameters. Instead, you can pass parameters as part of the URI.
// Navigate to a details page with a parameter
await Shell.Current.GoToAsync($"details?id={itemId}");
On the destination page, you retrieve the parameter like this.
[QueryProperty(nameof(ItemId), "id")]
public partial class DetailsPage : ContentPage
{
private string _itemId;
public string ItemId
{
set
{
// Decode the query parameter using Uri.UnescapeDataString
// to handle special characters in the URI.
_itemId = Uri.UnescapeDataString(value);
// Now you can use _itemId to load data
}
}
}
With NavigationPage
If you’re using NavigationPage and need to pass parameters to a page that expects them in the constructor, you’ll need to create a new instance of the page with the parameters.
await Navigation.PushAsync(new DetailsPage(/* parameter */));
And the destination page’s constructor would look like this.
public partial class DetailPage : ContentPage
{
private string _itemId;
public DetailPage(string itemId)
{
InitializeComponent();
_itemId = itemId;
// Use _itemId to load data
}
}
Modal Navigation
Focused User Tasks
Modal navigation is used when you want to present content that captures the user’s full attention, preventing them from interacting with the rest of the app until they have completed a specific task. It’s akin to a conversation that needs to be finished before another can begin.
For example, in a shopping app, when a user taps on Checkout, you might present a modal page where they can enter payment information. The user must either complete the payment process or explicitly cancel it before
Implementing Modal Navigation in .NET MAUI
To implement modal navigation, you would use the following methods.
// To present a modal page
await Navigation.PushModalAsync(new PaymentPage());
// To dismiss a modal page and go back to the previous page
await Navigation.PopModalAsync();
Modal navigation is a powerful tool for creating a seamless and non-disruptive user experience, ensuring that tasks are completed with minimal distraction. It’s an essential part of the navigation toolkit in .NET MAUI, enabling developers to create intuitive and task-focused user interfaces.
Conclusion
Choosing between Shell and NavigationPage in .NET MAUI depends on the complexity of your app’s navigation needs. Shell is the go-to for more complex scenarios, offering a plethora of features out of the box. NavigationPage is perfect for simpler, linear navigations. When passing parameters, Shell’s query properties provide a flexible approach without the need for custom constructors, while NavigationPage requires a more traditional method of passing parameters through constructors.
Understanding these nuances will help you make informed decisions about structuring your app’s navigation, leading to a better overall design and user experience.