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

NavigationPage.zip