Navigate to a new page in .NET MAUI

23/01/2023 23/01/2023 628 words 3 minutes

Contents

‎

To ease your read, please start from the project containing all the different steps applied so far in this tutorial. To do so, refer to the project setup guide and resume from the sample located in the folder “1 - MVVM”.

Hey, you’re back! We’re now done with MVVM and believe me, you did take a big step forward!

Today it will be much simpler, we start the creation of the application main page. But new page also means, enable the user going to that page! So let’s see how to implement the navigation from one page to another.

Navigate to a new page

Let’s start by adding our new page. To do this, right click on the Views folder to add a new file, then choose the template “.NET MAUI ContentPage (C#)” as below. We’ll name this file: MusicPlayerView.cs.

As you will have noticed, the template used to create the page provides us with a default content. So all we have to do now is navigating to this new page!

To do so, go to the file HomeViewModel.cs and modify the method Enter() as follows:

Filename:HomeViewModel.cs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
using NightClub.Views; // Reminder: without this line, it would not compile!

...

[RelayCommand]
async Task Enter()
{
    await Application.Current.MainPage.Navigation.PushAsync(
        new MusicPlayerView());
}

All that is done here is accessing the navigation service provided by the application in order to display a new page MusicPlayerView.

Actually, when the method PushAsync() is called, the page MusicPlayerView is then added to the very top of the stack of existing pages, exactly as shown in the diagram below:

As with a deck of playing cards, only the top one is visible.

‎

🐒‎ ‎ Ha! That’s it, can I test it then?

We’re almost there! For the navigation to work, we need the first page displayed at startup to be included in a NavigationPage.

If you go back to the App.cs file, there is a method called OnStart() that is automatically executed each time the app is initialized. So modify this method to set HomeView as the application root page, in a NavigationPage:

Filename:App.cs

1
2
3
4
5
6
7
8
protected override void OnStart()
{
    base.OnStart();

    Console.WriteLine("[NightClub] App - OnStart");

    MainPage = new NavigationPage(new HomeView());
}

That’s it, restart the application and click on the Enter button!

As you will surely have understood, our home page is now contained in a page specially configured for navigation. It therefore contains a navigation bar by default:

From a design point of view, this is not necessarily what you want. So let’s take a quick look at how to remove this header for the home page. Go to the file HomeView.cs and invoke the method SetHasNavigationBar() in the page constructor, like this:

Filename:HomeView.cs

1
2
3
4
5
6
7
8
9
public HomeView()
{
	...
	BindingContext = new HomeViewModel();
	
	NavigationPage.SetHasNavigationBar(this, false);
	BackgroundColor = Colors.Black;
	...
}

And now restarting the app, it’s a lot nicer!

The application is slowly coming alive, and even more so with the next chapter! See you soon for the construction of our main page.

Navigate to a new page in .NET MAUI

Navigate to a new page

Remove the navigation bar