ContentPage vs Page in .NET MAUI

ContentPage vs Page in .NET MAUI

In .NET MAUI, the root element of a XAML file should match the type of the page class defined in the code-behind. Most commonly, this is ContentPage, not Page.

ContentPage

• Designed to host a single layout and its child controls.
• Ideal for simple screens like forms, dashboards, or detail views.
• Provides built-in layout support.

Page

• Base class for all page types (ContentPage, Shell, FlyoutPage, TabbedPage).
• Rarely used directly because it has no layout features.
• Requires manual layout handling if used.

Which Should Be the Root?

✅ Use <ContentPage> as the root element for most screens.

✅ Use <Shell> for Shell-based navigation.

✅ Use <FlyoutPage> or <TabbedPage> for those specific navigation patterns.

❌ Avoid <Page> unless creating a custom page type.

Comparison Table

Feature	ContentPage	Page
Usage	Most common for screens	Base class, rarely used directly
Layout Support	Yes (StackLayout, Grid, etc.)	No
Recommended as Root	✅ Yes	❌ No

Flow Diagram (XAML Structure)

XAML File
 └── Root Element
      ├── Matches Code-Behind Class Type
      ├── Defines Layout
      └── Contains Controls
    

Example: ContentPage as Root

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.MainPage">

    <VerticalStackLayout Padding="20">
        <Label Text="Welcome to .NET MAUI!" FontSize="24" />
        <Button Text="Click Me" Command="{Binding ClickCommand}" />
    </VerticalStackLayout>

</ContentPage>
    

Other Page Types

• Shell – For Shell-based navigation and tabs.
• FlyoutPage – For side menu navigation.
• TabbedPage – For tabbed navigation.

MVVM Flow Diagram

+---------------------+       +-------------------+       +-------------------+
|      View           |       |    ViewModel      |       |     Model         |
| (XAML + CodeBehind) | --->  |  Commands & Data  | --->  | Business Logic    |
|  UI Elements        |       |  Properties       |       | Data Access       |
+---------------------+       +-------------------+       +-------------------+

Flow:
1. XAML binds to ViewModel properties using BindingContext.
2. ViewModel exposes Commands for user actions.
3. ViewModel interacts with Model for data and logic.
4. Updates propagate back to View via data binding.
    

Best Practices

• 💡 Always match the XAML root element with the code-behind class type.
• 💡 Use ContentPage for most screens.
• 💡 Use Shell for modern navigation patterns.
• 💡 Avoid using Page directly unless creating a custom page type.
• 💡 Follow MVVM for clean separation of UI and logic.