**Course Title:** .NET MAUI App Development **Section Title:** Navigation and Page Layouts **Topic:** Modal vs Non-modal navigation In this topic, we'll delve into the different navigation patterns in .NET MAUI, focusing on modal and non-modal navigation. Understanding these patterns is crucial for creating intuitive and user-friendly mobile applications. By the end of this topic, you'll be able to distinguish between modal and non-modal navigation, knowing when to apply each pattern in your .NET MAUI app development projects. **Modal Navigation** Modal navigation is a pattern where a new page is presented on top of the existing page, typically to gather additional information or perform a specific task. When a page is presented modally, the underlying page remains visible in the background, and the user is expected to complete the task or dismiss the modal page before returning to the original page. Here's an example use case for modal navigation: * A user clicks on a button to add a new item to their shopping cart. * A modal page is presented to gather additional information about the item, such as quantity and color. * Once the user fills out the form and submits it, the modal page is dismissed, and the underlying page is updated with the new item. In .NET MAUI, you can implement modal navigation using the `Navigation.PushModalAsync()` method. This method takes the page to be presented modally as a parameter. ```csharp public async Task PresentModalPageAsync(Page modalPage) { await Navigation.PushModalAsync(modalPage); } ``` Here's an example of how to present a modal page in XAML: ```xml <Button Text="Add New Item" Clicked="AddNewItem_Clicked" /> // Code-behind private async void AddNewItem_Clicked(object sender, EventArgs e) { var modalPage = new AddNewItemPage(); await Navigation.PushModalAsync(modalPage); } ``` **Non-Modal Navigation** Non-modal navigation is a pattern where a new page is presented in place of the existing page, replacing the underlying page. Unlike modal navigation, non-modal navigation doesn't present a new page on top of the existing page, but instead, navigates to a completely new page. Here's an example use case for non-modal navigation: * A user clicks on a button to view their order history. * A new page is presented to display the order history, replacing the original page. * Once the user has viewed their order history, they can navigate back to the original page using the navigation hierarchy. In .NET MAUI, you can implement non-modal navigation using the `Navigation.PushAsync()` method. This method takes the page to be presented non-modally as a parameter. ```csharp public async Task PresentNonModalPageAsync(Page nonModalPage) { await Navigation.PushAsync(nonModalPage); } ``` Here's an example of how to present a non-modal page in XAML: ```xml <Button Text="View Order History" Clicked="ViewOrderHistory_Clicked" /> // Code-behind private async void ViewOrderHistory_Clicked(object sender, EventArgs e) { var nonModalPage = new OrderHistoryPage(); await Navigation.PushAsync(nonModalPage); } ``` **When to Use Each Pattern** When deciding whether to use modal or non-modal navigation, consider the following guidelines: * Use modal navigation when: + You need to gather additional information or perform a specific task that doesn't replace the underlying page. + You want to ensure the user completes the task or dismisses the modal page before returning to the original page. * Use non-modal navigation when: + You want to navigate to a completely new page, replacing the underlying page. + You want to present a hierarchical navigation structure, where the user can navigate back to previous pages. **Practical Takeaways** 1. Modal navigation is used for presenting pages on top of the existing page, while non-modal navigation is used for presenting new pages in place of the existing page. 2. Use modal navigation for tasks that don't replace the underlying page, and use non-modal navigation for tasks that replace the underlying page. 3. Consider the navigation hierarchy and use modal navigation when you want to ensure the user completes a task or dismisses the modal page before returning to the original page. **Additional Resources** * .NET MAUI Documentation: [Navigation](https://docs.microsoft.com/en-us/dotnet/maui/user-interface/navigation) * .NET MAUI Documentation: [Modal pages](https://docs.microsoft.com/en-us/dotnet/maui/user-interface/modal-pages) **Try it Yourself!** Create a new .NET MAUI project and implement both modal and non-modal navigation. Experiment with presenting different types of pages, such as `ContentPage` and `ShellContentPage`, using both modal and non-modal navigation. **Leave a Comment or Ask for Help!** If you have any questions or need further clarification on modal vs non-modal navigation, leave a comment below. We'll be happy to help you understand this topic better!