.NET MAUI NavigationPage
Learn .NET MAUI creating projects
Learn how to create cross-platform applications, thanks to the power of .NET MAUI and a series of real projects.
Knowing about navigation between pages is important when working with mobile applications. That is why, in this lesson, you will learn how to use the NavigationPage type, which will allow you to work with the navigation stack in .NET MAUI.
How does navigation work in .NET MAUI?
The way navigation works in .NET MAUI is based on a navigation stack. How does this stack work? An initial page is set up and as we access pages, they are stacked in the navigation stack.
If we want to return to a previous page, the page at the top of the stack is removed from the navigation stack and we return to a previous window.
We can implement this navigation stack in .NET MAUI by going to the MainPage.xaml file, where we have a button that, when clicked, will execute an action due to the Clicked event:
<Button
x:Name="CounterBtn"
Clicked="OnCounterClicked"
HorizontalOptions="Center"
SemanticProperties.Hint="Counts the number of times you click"
Text="Click me" />
This event, in line 3, references an event handler called OnCounterClicked.
The .XAML file and the .CS file are linked as we have seen previously, so by having an event handler defined in the XAML file, we establish that when the button is clicked, we want the event handler logic to be executed.
Navigating between pages in .NET MAUI (PushAsync and PopAsync)
As part of the ContentPage page, we have a property called Navigation, which allows navigation between pages. This property has a method called PushAsync and another called PopAsync. PushAsync allows stacking new pages to place them at the top of the navigation stack, while PopAsync allows removing them, starting with the page located at the top of the navigation stack.
Let's do a practical exercise, suppose we want to navigate to a page named ContentPageDemo.xaml.
Using the PushAsync method, we will see that it receives a parameter type Page
If we review the class hierarchy in which a ContentPage is placed, we would see something similar to this:
So we can intuit that we can pass a ContentPage as a parameter of the method.
We can then pass the new instance of the page to which we want to navigate as follows:
private void OnCounterClicked(object sender, EventArgs e)
{
Navigation.PushAsync(new ContentPageDemo());
}
Now, we must consider that for this to work correctly, we must establish as page to start the NavigationPage, that is to say, we are going to navigate to App.xaml.cs, and to change the ContentPage for a NavigationPage:
public App()
{
InitializeComponent();
MainPage = new NavigationPage(new MainPage());
}
If we start the application, we will see that we can navigate to the new page by pressing the button we have modified:
We can see that this page has a bar at the top that we had not seen before, this happens thanks to the NavigationPage. We even have an arrow that tells us that we can go back to the previous page by pressing it.
How to modify the colors of a NavigationPage in .NET MAUI?
Another thing we can do with the navigation bar is to modify its properties. I am going to do this, separating the instance creation and altering its properties in App.xaml.cs, as follows:
public App()
{
InitializeComponent();
var navPage = new NavigationPage(new MainPage());
navPage.BarBackground = Colors.Chocolate;
navPage.BarTextColor = Colors.White;
MainPage = navPage;
}
These changes modify the navigation bar showing the following:
This is the way to navigate between pages in .NET MAUI, let's continue analyzing the other types of pages in the framework.
Video about navigation in .NET MAUI
Here is where you can see more information about navigation in .NET MAUI
