In this tutorial series, we will see how to use NavigationPage, which provides a hierarchical navigation experience to enable you to na...

.Net MAUI - Page Navigation .Net MAUI - Page Navigation

.Net MAUI - Page Navigation

.Net MAUI - Page Navigation

In this tutorial series, we will see how to use NavigationPage, which provides a hierarchical navigation experience to enable you to navigate or switch between two or more pages in an app.


Quick Links:


Project Setup:

  • Launch Visual Studio 2022, and in the start window click Create a new project to create a new project.
  • In the Create a new project window, select MAUI in the All project types drop-down, select the .NET MAUI App template, and click the Next button:
  • In the configure your new project window, name your project, choose a suitable location for it, and click the Next button:
  • In the Additional information window, click the Create button:
  • Once the project is created, we can able to see the Android, iOS, Windows and other running options in the toolbar. Press the emulator or run button to build and run the app

Implementation:

  • The navigation in .Net MAUI is similar with Xamarin.Forms Naviagtion
  • In Solution Explorer, click on MainPage.xaml. Add Title="Main Page" to ContentPage and replace the content of the page to what is shown below:
  • In the same way, create a new page as "Next Page" with button to navigate back to previous screen
  • The final output will be like below when we come all the above properties come together.

Full Code:

Download Code:

You can download the code from GitHub. If you have any doubts, feel free to post a comment. If you liked this article, and it is useful to you, do like, share the article & star the repository on GitHub.

8 comments:

Please Comment about the Posts and Blog