NavigationPage
A NavigationPage provides a hierarchical navigation experience to enable you to navigate or switch between two or more pages in an app.
Follow the steps below to create the NavigationPage sample shown above:
1. Create a new .NET MAUI project in Visual Studio.
2. In Solution Explorer, click on App.xaml.cs.
3. Change the following line:
MainPage = new MainPage();
to:
MainPage = new Microsoft.Maui.Controls.NavigationPage(new MainPage());
4. 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:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="NavigationPage.MainPage"
BackgroundColor="{DynamicResource SecondaryColor}"
Title="Main Page">
<StackLayout
VerticalOptions="Center"
HorizontalOptions="Center">
<Button
Text="Navigate to NewPage1"
BackgroundColor="Blue"
Clicked="OnButton_Clicked" />
</StackLayout>
</ContentPage>
5. In Solution Explorer, click on MainPage.xaml.cs, and add the following OnButton_Clicked method. This method navigates to NewPage1 which will add in the next step.
private async void OnButton_Clicked(object sender, EventArgs e)
{
await Navigation.PushAsync(new NewPage1());
}
6. Add a .NET MAUI ContentPage to the project.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="NavigationPage.NewPage1"
Title="NewPage1"
BackgroundColor="White">
<StackLayout>
<Label Text="Welcome to .NET MAUI!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage>
6. Run the project.
Download