Lesson 11 of 40 Mobile & Desktop Intermediate 55 min

MAUI Cross-Platform Apps

In this lesson, you will learn how .NET MAUI helps you build cross-platform apps for Windows, Android, iOS, and macOS using one C# codebase and Visual Studio 2026.

← Back to Visual Studio 2026 Tutorial Home

What you will learn

How a MAUI project is organized
How XAML Hot Reload speeds up UI work
How Shell simplifies app navigation
How MVVM works with the Community Toolkit
How to follow a practical MAUI development workflow

Why this matters: MAUI helps you reuse skills, logic, and UI concepts across multiple platforms while still delivering native application experiences.

Part 1: MAUI project architecture

A MAUI application typically uses one project to target multiple platforms. Platform-specific code lives in dedicated folders, while shared UI and logic stay in the main project structure.

Platforms/ contains platform-specific startup and configuration code
Resources/ stores fonts, images, styles, and other shared assets
MauiProgram.cs configures services and startup behavior

Part 2: XAML Hot Reload

XAML Hot Reload lets you update UI markup and immediately see the result while the app is running. This greatly speeds up experimentation and design work.

Instead of stopping and restarting the app after every UI tweak, you can make small adjustments interactively and verify them right away.

Benefit: This is especially useful when adjusting layouts, spacing, colors, and visual hierarchy.

Part 3: Shell navigation

Shell provides a structured way to define navigation, tabs, flyout menus, and routes in a MAUI application.

Using Shell reduces navigation boilerplate and makes app structure easier to understand.

Part 4: MVVM with the Community Toolkit

MVVM separates UI logic from business logic. The Community Toolkit makes this pattern easier by reducing repetitive code for properties and commands.

[ObservableObject]
public partial class MainViewModel
{
    [ObservableProperty]
    private string _title = "Hello MAUI!";

    [RelayCommand]
    private void Navigate() => Shell.Current.GoToAsync("//details");
}
    

This helps keep pages cleaner and makes testing and maintenance easier.

When to use MAUI features

Feature	Best used for
Single project structure	Sharing most code across platforms
XAML Hot Reload	Fast UI iteration during design and development
Shell	Structured navigation and route management
MVVM Toolkit	Reducing UI logic inside pages and keeping code organized

A practical MAUI workflow

Step 1: Create the MAUI project and explore its structure

Step 2: Build a basic page with XAML

Step 3: Use Hot Reload to refine the UI

Step 4: Add navigation with Shell

Step 5: Move logic into a ViewModel

Step 6: Test on devices or emulators for multiple platforms

Best practices

Keep UI markup readable and well organized
Use MVVM to reduce code-behind complexity
Test layouts on more than one screen size
Use shared resources for consistent styling
Keep platform-specific code isolated where possible
Start simple before adding advanced features

Summary

In this lesson, you learned how MAUI projects are structured, how XAML Hot Reload accelerates development, how Shell handles navigation, and how MVVM helps organize app logic.

In the next lesson, you will move into Blazor full-stack web applications.