MAUI Components: ContentPage, ContentView, and Window

This page explains what ContentPage, ContentView, and Window are in .NET MAUI, and when to use each. For runnable code examples, open the separate page: maui-examples.htmlMAUI Code Examples.

1. ContentPage

Definition: A ContentPage represents a single screen in a .NET MAUI application.

• Common building block for mobile and desktop apps.
• Contains one main layout (e.g., StackLayout, Grid) and child controls.
• Supports navigation and lifecycle events like OnAppearing and OnDisappearing.
• Works with Shell navigation, NavigationPage, modal pages, and Flyout structures.

When to use:

• Full-screen pages such as Home, Settings, Details, or Wizards.
• Any screen you navigate to or from.

2. ContentView

Definition: A ContentView is a reusable UI component that can be embedded inside a ContentPage or other views.

• Encapsulates a chunk of UI and optional logic into a single, reusable unit.
• Ideal for custom controls or modular UI sections (cards, headers, profile blocks).
• Does not participate in page-level navigation or page lifecycle events.
• Great for code sharing between pages and for MVVM composition.

When to use:

• Reusable UI components across multiple pages.
• Breaking complex pages into smaller, testable pieces.

3. Window

Definition: A Window is a top-level container for your app’s UI. Every MAUI app starts with at least one Window.

• Primarily important for desktop scenarios (Windows, macOS) where multi-window is useful.
• Hosts a Page (usually a ContentPage) and has its own lifetime.
• You can create additional windows at runtime (for tools, inspectors, dashboards).

When to use:

• Desktop apps that need multiple top-level windows.
• Secondary windows for settings, previews, or multi-document interfaces.
• Typically not needed on mobile (apps are single-window).

Summary Table

Component	Purpose	Typical Use Case
ContentPage	Full screen UI with navigation	Main screens
ContentView	Reusable UI component	Custom controls and modular UI
Window	Top-level container for Pages	Multi-window desktop scenarios

See maui-examples.htmlMAUI Code Examples for XAML and C# code samples.

MAUI Code Examples

This page shows minimal XAML and C# examples for ContentPage, ContentView, and Window (including multi-window). Copy snippets into your MAUI project structure as indicated by the file names.

1) ContentPage Example

Files

• Views/HomePage.xaml
• Views/HomePage.xaml.cs

HomePage.xaml

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

    <VerticalStackLayout Padding="16" Spacing="12">
        <Label Text="Welcome to MAUI" FontSize="24" />

        <Button Text="Go to Details"
                Clicked="OnGoToDetailsClicked" />

        <!-- Reuse a ContentView below (see section 2) -->
        <local:InfoCardView x:Name="InfoCard" />
    </VerticalStackLayout>
</ContentPage>

HomePage.xaml.cs

using MyApp.Views;

namespace MyApp.Views
{
    public partial class HomePage : ContentPage
    {
        public HomePage()
        {
            InitializeComponent();
            // Example of updating a ContentView property if exposed via BindableProperty
            // InfoCard.Title = "Quick Tips";
        }

        private async void OnGoToDetailsClicked(object sender, EventArgs e)
        {
            await Navigation.PushAsync(new DetailsPage());
        }

        protected override void OnAppearing()
        {
            base.OnAppearing();
            // Page lifecycle hook
        }

        protected override void OnDisappearing()
        {
            base.OnDisappearing();
        }
    }
}

DetailsPage (optional quick stub)

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

    <VerticalStackLayout Padding="16" Spacing="8">
        <Label Text="Details Page" FontSize="20" />
        <Button Text="Go Back" Clicked="OnBackClicked" />
    </VerticalStackLayout>
</ContentPage>

DetailsPage.xaml.cs

namespace MyApp.Views
{
    public partial class DetailsPage : ContentPage
    {
        public DetailsPage()
        {
            InitializeComponent();
        }

        private async void OnBackClicked(object sender, EventArgs e)
        {
            await Navigation.PopAsync();
        }
    }
}

---

2) ContentView Example (Reusable Component)

Files

• Controls/InfoCardView.xaml
• Controls/InfoCardView.xaml.cs

InfoCardView.xaml

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

    <Frame Padding="12" HasShadow="True">
        <VerticalStackLayout Spacing="6">
            <Label Text="{Binding Source={x:Reference Name=Root}, Path=Title}" FontAttributes="Bold" />
            <Label Text="{Binding Source={x:Reference Name=Root}, Path=Description}" />
            <Button Text="Action" Clicked="OnActionClicked" />
        </VerticalStackLayout>
    </Frame>

</ContentView>

InfoCardView.xaml.cs

namespace MyApp.Controls
{
    public partial class InfoCardView : ContentView
    {
        public static readonly BindableProperty TitleProperty =
            BindableProperty.Create(nameof(Title), typeof(string), typeof(InfoCardView), default(string));

        public static readonly BindableProperty DescriptionProperty =
            BindableProperty.Create(nameof(Description), typeof(string), typeof(InfoCardView), default(string));

        public string Title
        {
            get => (string)GetValue(TitleProperty);
            set => SetValue(TitleProperty, value);
        }

        public string Description
        {
            get => (string)GetValue(DescriptionProperty);
            set => SetValue(DescriptionProperty, value);
        }

        public InfoCardView()
        {
            InitializeComponent();
        }

        private void OnActionClicked(object sender, EventArgs e)
        {
            // Raise an event or Command for parent pages to handle
        }
    }
}

Using the ContentView inside a Page

Add the namespace and set properties:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:MyApp.Controls"
             x:Class="MyApp.Views.UsingInfoCardPage"
             Title="Using InfoCard">

    <controls:InfoCardView Title="Welcome"
                           Description="This card is reusable across pages." />

</ContentPage>

---

3) Window Example (including multi-window)

Create additional windows at runtime

In a MAUI app, your App creates the first window via CreateWindow. On desktop, you can create more windows by instantiating Window with a Page and using Application.Current.OpenWindow.

App.xaml.cs

namespace MyApp
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();
        }

        protected override Window CreateWindow(IActivationState activationState)
        {
            return new Window(new NavigationPage(new Views.HomePage()))
            {
                Title = "Main Window"
            };
        }
    }
}

Open a secondary Window from a page (desktop focused)

private void OnOpenSecondaryWindow(object sender, EventArgs e)
{
    var secondaryPage = new Views.SecondaryPage();

    var newWindow = new Window(new NavigationPage(secondaryPage))
    {
        Title = "Secondary Window"
    };

    Application.Current.OpenWindow(newWindow);
}

SecondaryPage.xaml

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

    <VerticalStackLayout Padding="16" Spacing="8">
        <Label Text="This is a secondary window (desktop)." FontSize="18" />
        <Button Text="Close This Window" Clicked="OnCloseClicked" />
    </VerticalStackLayout>
</ContentPage>

SecondaryPage.xaml.cs

namespace MyApp.Views
{
    public partial class SecondaryPage : ContentPage
    {
        public SecondaryPage()
        {
            InitializeComponent();
        }

        private void OnCloseClicked(object sender, EventArgs e)
        {
            // Close the hosting window
            var window = this.Window;
            if (window != null)
            {
                Application.Current.CloseWindow(window);
            }
        }
    }
}

Notes

• Multi-window is supported on desktop (Windows, macOS). Mobile platforms generally run a single window.
• Use Window.Created, Activated, Deactivated, and Destroying events for window lifecycle if needed.
• Always test window behavior per platform because window features vary.

Back to overview: maui-components-overview.htmlMAUI Components Explained.