Navigation in .Net Maui/Xamarin Forms

Hi guys, In this blog, we will learn the basic navigation of .Net Maui/Xamarin Forms.

If you want to learn Shell Navigation then you can check out my blog on Shell Navigation by clicking here.

Output

As shown above, in the output we are going to demonstrate some of the very basic navigation examples

1. Simple Navigation
2. Navigate Back
3. Navigation With Data
4. PopToRootAsync
5. InsertPageBefore
6. RemovePage

Important:

Make sure you have wrapped your MainPage with NavigationPage in App.cs

MainPage = new NavigationPage(new MainPage());

App.cs

Simple Navigation

In the simple navigation, we are navigating to Page1 from MainPage.

await Navigation.PushAsync(new Page1());

PushAsync is used to navigate from the current page to the next page taking the Page object in the parameter to which we want to navigate.

Navigate Back

To navigate back simply use PopAsync

await Navigation.PopAsync();

Navigation With Data

To send data along with navigation to the next page we can use the PushAsync method of navigation, passing data with the page.

await Navigation.PushAsync(new Page2(“Data from main page transferred!”));

Passing Data

Make sure to have Page accepting the data in the constructor.

Page with constructor

PopToRootAsync

PopToRootAsync is used to navigate back to the root/first page of the navigation stack.

await Navigation.PopToRootAsync();

This will navigate back to the MainPage removing all the other pages from the navigation stack.

InsertPageBefore

InsertPageBefore is used to add a page in the navigation stack even after navigation.

For example, I am navigating from

Page1 → to Page3

Making our navigation stack looks like Page1/Page3.

But what if I want to add another page let’s say Page2 between Page1 & Page3? To make our navigation stack looks like Page1/Page2/Page3.

To do that we will use the InsertPageBefore method of Navigation.

Note: Use this InsertPageBefore in the page3 after OnAppearing.

Navigation.InsertPageBefore(new Page2(), this);

As we can see we are inserting Page2 after navigating to Page3.

InsertPageBefore

RemovePage

This is useful to remove a page from the navigation stack. Here in the example, I am navigating from Page5 to Page 6.

And after navigating to Page6 I am removing Page5 from Navigation as shown below.

Navigation.RemovePage(this);

Remove Page

As you can see after navigating to Page6 I am removing the current Page5 from navigation.

Navigation stack before removing page:

MainPage → Page5 → Page6

Navigation stack after removing page:

MainPage → Page6

Happy Coding :D