.NET MAUI FAQ - Pages

How do I create a navigation page in .NET MAUI?

Create a content page named DetailsPage in the .NET MAUI project.
Change the following line the in App.xaml.cs file:

MainPage = new MainPage();

To

MainPage = new NavigationPage(new MainPage());

Add the Button control in the MainPage.xaml for navigation to the DetailsPage when clicking the button.

XAML

<?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"
             Title="MainPage"
             x:Class="NavigationDemo.MainPage">

    <VerticalStackLayout VerticalOptions="Center">
        <Button Text="Navigate to DetailsPage"
                Clicked="Button_Clicked" />
    </VerticalStackLayout>

</ContentPage>

Add the Button_Clicked method in the Main.xaml.cs file.

C#

private async void Button_Clicked(object sender, EventArgs e)
    {
        await Navigation.PushAsync(new DetailsPage());
    }
Permalink
How do I add a frame to my .NET MAUI page in XAML?

You can add a frame to your XAML layout by using the element. For example:

XAML

<Frame CornerRadius="5" BorderColor="Black" 
                        	  HasShadow="True" 
                            HeightRequest="200" 
                            WidthRequest="200">        
            <Label Text="Frame wrapped around a Label" /> 
</Frame>
Permalink
How do I pass data between pages in MAUI navigation?

Data can be passed between pages by using the target page’s constructor or by setting properties on the target page before navigating to it. You can also use services or dependency injection.

var detailsPage = new DetailsPage();
detailsPage.BindingContext = new ViewModel(); // Set your data here
await Navigation.PushAsync(detailsPage);
Permalink
Can I have multiple pages within a single .NET MAUI project?

Yes, you can have multiple pages within a single .NET MAUI project. You can create and manage multiple pages to represent different screens, views, or sections of your application. The navigation system allows you to navigate between these pages based on user interactions or application logic.

Permalink
Can I pass data between pages in .NET MAUI?

Yes, you can pass data between pages in .NET MAUI. You can use parameters in navigation methods to pass data from one page to another, or you can utilize a shared ViewModel or messaging system to move data between pages.

Permalink
How do I navigate between pages in .NET MAUI?

Navigation among pages in .NET MAUI can be achieved using navigation stacks and navigation methods provided by the navigation-aware page types. For example, you can push a new page onto the navigation stack using the PushAsync method of the NavigationPage or navigate to a specific tab using the SelectedTab property of the TabbedPage.

Permalink
How can I create a page in .NET MAUI?

To create a page in .NET MAUI, you can derive one from the appropriate page type, such as ContentPage, and define the visual structure and behavior of the page using XAML and code-behind files. You can also create reusable base pages or custom page classes to promote code reusability.

Permalink
What types of pages are available in .NET MAUI?

.NET MAUI provides different types of pages, including ContentPage, NavigationPage, TabbedPage, CarouselPage, and MasterDetailPage. Each page type has its own purpose and functionality, such as displaying content, facilitating navigation, or organizing multiple views.

Permalink