Building Cross-Platform Applications with .NET MAUI/

...

/

XAML Page Types

XAML Page Types

Learn about the XAML page types supported by .NET MAUI.

We'll cover the following...

We used only one of the page types supported by MAUI in all our code examples: the ContentPage. However, there are more page types that we can use. We'll have a look at them all. Let's start with the following project setup:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#512BD4</color>
    <color name="colorPrimaryDark">#2B0B98</color>
    <color name="colorAccent">#2B0B98</color>
</resources>
Project example with ContentPage, TabbedPage, and NavigationPage

In this project, we have examples of multiple page types that MAUI supports. Let's have a look at them.

ContentPage

ContentPage is the most basic type of a .NET MAUI page. This is the page type that stores the actual contents, such as labels, buttons, graphics, and so on. All other page types are containers for one or more ContentPage objects.

In the example above, we have a ContentPage represented by the MainPage.xaml file. But we don't have to have a separate file for each ContentPage. We can add the ContentPage element to any container-like page type. To see how it's done, we'll open the MainTabbedPage.xaml file and insert the following markup between the NavigationPage tags on line 12.

Press + to interact
<x:Arguments>
    <ContentPage>
        <StackLayout HorizontalOptions="Center" >
            <Label Text="Choose transport type" />
            <RadioButton Content="Train" />
            <RadioButton Content="Car" />
            <RadioButton Content="Motorbike" />
            <RadioButton Content="Bicycle"
            IsChecked="true" />
        </StackLayout>
    </ContentPage>
</x:Arguments>

Here, we've added a ContentPage with a StackLayout with a Label element and multiple RadioButton elements. This will get translated into a labeled radio button that's positioned at the center of the page horizontally. This positioning is ensured by the HorizontalOptions="Center" on line 3 in the markup above.

TabbedPage

...