**Course Title:** .NET MAUI App Development **Section Title:** Navigation and Page Layouts **Topic:** Creating and navigating between pages: NavigationPage, TabbedPage, and Shell ### Introduction In this topic, we will explore the various navigation patterns and page layouts available in .NET MAUI. You'll learn how to create and navigate between pages using NavigationPage, TabbedPage, and Shell. By the end of this topic, you'll be able to design and implement intuitive navigation flows for your .NET MAUI apps. ### Navigation Patterns Before we dive into the specifics of each navigation pattern, let's quickly review the different types of navigation patterns: * **Hierarchical navigation**: A stack-based navigation pattern where users navigate through a series of pages, with each page building upon the previous one. * **Tab-based navigation**: A navigation pattern where users can switch between multiple pages or views, with each tab representing a separate page or view. * **Flyout navigation**: A navigation pattern where users can access a menu or flyout that allows them to navigate to different pages or views. ### NavigationPage NavigationPage is a built-in page in .NET MAUI that provides a hierarchical navigation pattern. It allows you to create a stack of pages, with each page supporting navigation to other pages. #### Creating a NavigationPage To create a NavigationPage, you need to create a new instance of the NavigationPage class and pass in the initial page: ```csharp var navigationPage = new NavigationPage(new MainPage()); ``` #### Navigating between pages To navigate between pages, you can use the Navigation.PushAsync() and Navigation.PopAsync() methods: ```csharp // Navigate to a new page await Navigation.PushAsync(new DetailsPage()); // Go back to the previous page await Navigation.PopAsync(); ``` You can also pass parameters to the new page using the Navigation.PushAsync() method: ```csharp // Navigate to a new page with a parameter await Navigation.PushAsync(new DetailsPage(parameter)); ``` ### TabbedPage TabbedPage is a built-in page in .NET MAUI that provides a tab-based navigation pattern. It allows you to create a page with multiple tabs, each representing a separate page or view. #### Creating a TabbedPage To create a TabbedPage, you need to create a new instance of the TabbedPage class and add child pages: ```csharp var tabbedPage = new TabbedPage(); tabbedPage.Children.Add(new MainPage()); tabbedPage.Children.Add(new DetailsPage()); ``` #### Customizing tab icons and titles You can customize the tab icons and titles by setting the Icon and Title properties: ```csharp var tabbedPage = new TabbedPage(); tabbedPage.Children.Add(new MainPage { Title = "Home", Icon = "home.png" }); tabbedPage.Children.Add(new DetailsPage { Title = "Details", Icon = "details.png" }); ``` ### Shell Shell is a built-in page in .NET MAUI that provides a flyout navigation pattern. It allows you to create a page with a flyout menu that allows users to navigate to different pages or views. #### Creating a Shell To create a Shell, you need to create a new instance of the Shell class and add flyout items: ```xaml <Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MyApp.AppShell"> <FlyoutItem Title="Home" Icon="home.png"> <ShellContent ContentTemplate="{DataTemplate local:MainPage}" /> </FlyoutItem> <FlyoutItem Title="Details" Icon="details.png"> <ShellContent ContentTemplate="{DataTemplate local:DetailsPage}" /> </FlyoutItem> </Shell> ``` #### Customizing flyout items You can customize the flyout items by setting the Title and Icon properties: ```xaml <FlyoutItem Title="Home" Icon="home.png"> <ShellContent ContentTemplate="{DataTemplate local:MainPage}" /> </FlyoutItem> <FlyoutItem Title="Details" Icon="details.png"> <ShellContent ContentTemplate="{DataTemplate local:DetailsPage}" /> </FlyoutItem> ``` ### Conclusion In this topic, you learned about the different navigation patterns and page layouts available in .NET MAUI, including NavigationPage, TabbedPage, and Shell. You also learned how to create and navigate between pages using these navigation patterns. ### Next steps * Experiment with different navigation patterns and page layouts to see what works best for your app. * Use the [Xamarin.Forms Navigation Documentation](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/) as a reference for more information on navigation patterns and page layouts. * Check out the [NET MAUI Samples GitHub repository](https://github.com/dotnet/maui-samples) for more examples of navigation patterns and page layouts. **Leave a comment or ask for help if you have any questions or need further clarification on any of the concepts covered in this topic.**