Pages in .NET MAUI

Pages in .NET MAUI

In .NET MAUI, Pages are the top-level UI containers that typically occupy the entire screen of an application. All pages derive from the base Page class and serve as a platform for layouts and views.

In .NET MAUI, a Page is the fundamental building block of your app’s UI. Think of it as the screen or view container that hosts your controls, layouts, and navigation logic. Pages are central to how MAUI apps are structured and navigated.

📌 Types of Pages in MAUI

MAUI provides several built-in page types, each suited for different scenarios:

• ContentPage: The most common page type. It displays a single view, which is usually a root layout (like a Grid or StackLayout) containing other controls.
  • Most common page type.
  • Holds a single layout and its child controls.
  • Example: A login screen or a product details page.
• NavigationPage: Provides a hierarchical navigation experience using a Last-In, First-Out (LIFO) stack. It adds a navigation bar to the top of the screen for moving forward and backward between pages.
• TabbedPage: Organizes multiple pages into a series of tabs across the top or bottom of the screen. Each tab loads its own content.
  • Displays multiple child pages with tabs at the top or bottom.
  • Example: Social media apps with tabs for Home, Search, Profile.
• FlyoutPage: Manages two related areas: a flyout (sidebar) for selecting items and a detail area for displaying information about the selected item.
  • FlyoutPage (formerly MasterDetailPage)
  • Provides a side menu (flyout) for navigation.
  • Example: Apps with a hamburger menu for switching sections.
• CarouselPage: Allows users to swipe through a collection of pages, similar to a gallery view.
• Shell
  • A higher-level container that simplifies navigation and app structure.
  • Provides URI-based navigation, flyouts, tabs, and routes in one unified model.

Key Lifecycle Events

Understanding the lifecycle of a page is critical for managing data and resources:

• OnAppearing: Triggered just before the page becomes visible on the screen.
• OnDisappearing: Triggered just before the page is removed from the view.
• NavigatedTo / NavigatedFrom: Specialized events raised specifically during navigation transitions.

🎯 Why Pages Matter

• They define navigation flow (how users move between screens).
• They encapsulate UI + logic for a specific part of the app.
• They integrate with data binding and MVVM to keep UI and data in sync.

✅ When to Use Pages

• ContentPage: For most single-screen views.
• NavigationPage: When you need hierarchical navigation.
• TabbedPage: When you want quick access to multiple related views.
• FlyoutPage: For apps with many sections and a menu-driven structure.
• Shell: For modern apps needing simplified navigation and global structure.

🚫 When Not to Use Pages

• Don’t use multiple nested navigation models (e.g., NavigationPage inside Shell) unless necessary — it complicates navigation.
• Avoid FlyoutPage for simple apps — it adds unnecessary complexity.
• Don’t overload a single ContentPage with too much UI; split into multiple pages for clarity.

⚡ Best Practices

• Keep pages focused: One clear responsibility per page.
• Use MVVM: Bind UI elements to ViewModel properties instead of code-behind.
• Leverage Shell for larger apps: It reduces boilerplate navigation code.
• Consistent navigation: Stick to one navigation paradigm across the app.
• Reuse layouts: Use ContentView for reusable UI pieces inside pages.

🧩 Example: Simple ContentPage

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

    <StackLayout Padding="20">
        <Label Text="Welcome to MAUI!"
               FontSize="24"
               HorizontalOptions="Center" />
        <Button Text="Go to Details"
                Command="{Binding NavigateToDetailsCommand}" />
    </StackLayout>
</ContentPage>
    

This is a ContentPage with a label and a button.

The button uses data binding to trigger navigation via a ViewModel command.

🏆 Summary

• Pages = screens in MAUI apps.
• Choose the right page type based on navigation needs.
• Use Shell for modern, scalable apps.
• Keep pages clean, focused, and MVVM-friendly.

Choosing Between Shell and Base Pages

In modern 2026 development, .NET MAUI Shell is the recommended way to handle application structure. Shell provides a declarative way to define navigation, including built-in flyouts and tabs, without needing to manually wrap pages in NavigationPage or TabbedPage.

Feature	Base Navigation Pages	.NET MAUI Shell
Best For	Simple, linear flows (e.g., a wizard)	Complex apps with many features
Structure	Wrapped manually in code/XAML	Defined declaratively in one file
Performance	Basic stack management	Pages can be created "on demand"
Data Passing	Uses constructors or properties	Uses URL-based query properties