Getting Started with .NET MAUI: A Detailed Technical Guide

Microsoft .NET Multi-platform App UI (MAUI) is a cross-platform framework that allows developers to build native applications for Android, iOS, macOS, and Windows using a single codebase. This guide provides a detailed walkthrough of .NET MAUI, its architecture, setup process, and key components to help you get started with building your first multi-platform app.

What is .NET MAUI?

.NET MAUI is the evolution of Xamarin.Forms, designed to streamline cross-platform development by leveraging the capabilities of the .NET ecosystem. It provides a unified API for creating applications with native performance and access to platform-specific features.

• Write Once, Run Anywhere: Build apps that run on Android, iOS, Windows, and macOS.
• Native Performance: Access native APIs and controls for a seamless user experience.
• Modern Development: Use the latest .NET features, including C# 10, .NET 6/7, and hot reload for faster development.

Architecture of .NET MAUI

.NET MAUI adopts a layered architecture:

1. Platform-Specific Layers: Provides access to native platform APIs.
   • iOS: UIKit
   • Android: Android Views
   • Windows: WinUI 3 (via WebView2)
   • macOS: AppKit (via Mac Catalyst)
2. Shared Codebase: Application logic, UI, and shared resources reside in a single project.
3. Handlers Architecture:
   • Replaces Xamarin.Forms renderers.
   • Lightweight and highly performant.
   • Simplifies customization of native controls.

Setting Up .NET MAUI Development

Prerequisites

1. Visual Studio 2022 (17.3 or later):
   • For Windows: Install the .NET MAUI workload during setup.
   • For macOS: Install the Universal macOS Installer to target iOS and macOS.
2. Supported Platforms:
   • Windows: Windows 10/11 with the latest updates.
   • macOS: macOS 11.0 (Big Sur) or later with Xcode installed.
   • Android: API level 21 or later.
   • iOS: iOS 10.3 or later (requires Xcode for deployment).

Creating a .NET MAUI Project

1. Start Visual Studio and create a new project:
   • Choose .NET MAUI App (Preview) as the project template.
2. Configure the Project:
   • Provide a name, location, and framework version (e.g., .NET 7).
3. Project Structure:
   • App.xaml & App.xaml.cs: Entry point for your application.
   • MainPage.xaml & MainPage.xaml.cs: The default page UI.
   • Platforms/: Contains platform-specific configurations and code.

Building a Simple App in .NET MAUI

Let’s create a simple app to display a greeting message.

Define the UI in MainPage.xaml:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.MainPage">
    <VerticalStackLayout>
        <Label Text="Welcome to .NET MAUI!"
               VerticalOptions="Center"
               HorizontalOptions="Center" />
        <Button Text="Click Me" 
                VerticalOptions="Center" 
                HorizontalOptions="Center"
                Clicked="OnButtonClick" />
    </VerticalStackLayout>
</ContentPage>

Add Logic in MainPage.xaml.cs:

namespace MyApp;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    private void OnButtonClick(object sender, EventArgs e)
    {
        DisplayAlert("Hello", "Welcome to your first MAUI app!", "OK");
    }
}

Run the App:

• Select a platform target (e.g., Android Emulator, Windows Machine).
• Click Start to build and run the app.

Key Features of .NET MAUI

1. Cross-Platform Controls

.NET MAUI provides a rich set of controls that render natively on each platform.

2. Single Project Structure

• Shared Resources: Images, fonts, and styles are declared in a centralized location.
• Platform-Specific Code: Customize behavior via the Platforms folder.

3. MVU Pattern

.NET MAUI supports Model-View-Update (MVU) for building UI declaratively.

4. Dependency Injection

Use .NET’s built-in dependency injection for service management.

Using Platform-Specific Features

Example: Accessing Device Sensors

You can use platform-specific APIs through dependency services.

Add Platforms Code:

For Android:

using Android.Content;
using Android.OS;

public class DeviceInfoService
{
    public string GetDeviceName()
    {
        return Build.Model;
    }
}

For iOS:

using UIKit;

public class DeviceInfoService
{
    public string GetDeviceName()
    {
        return UIDevice.CurrentDevice.Name;
    }
}

Tips for Multi-Platform Optimization

1. Use Handlers for Custom Rendering:
   • Modify platform-specific appearance or behavior.
2. Optimize Resources:
   • Use vector images (.svg) for scaling across devices.
   • Define platform-specific image resolutions (@2x, @3x).
3. Test on Real Devices:
   • Emulators may not replicate real-world performance accurately.

Conclusion

.NET MAUI is a robust and modern framework that simplifies cross-platform development. By leveraging its shared project structure, native performance, and .NET ecosystem, developers can build high-quality apps for multiple platforms efficiently. Whether you’re migrating from Xamarin.Forms or starting fresh, .NET MAUI provides all the tools you need for modern app development.