MAUI Basics

Welcome to the basics of .NET MAUI (Multi-platform App UI). This section covers fundamental concepts and building blocks essential for developing cross-platform applications with .NET.

Understanding .NET MAUI

.NET MAUI is an evolution of Xamarin.Forms, allowing you to build native applications for Android, iOS, macOS, and Windows from a single, shared codebase. It leverages C# and XAML to define your application's UI and logic.

Key Concepts

Single Project: .NET MAUI consolidates all your platform-specific code and assets into a single project structure, simplifying project management.
Platform Abstraction: MAUI provides a consistent API that abstracts away platform-specific differences, enabling you to write code once and run it everywhere.
Native UI: Unlike web-based solutions, MAUI renders native UI controls on each platform, ensuring a familiar and performant user experience.
XAML: Extensible Application Markup Language (XAML) is an XML-based language used for defining user interfaces declaratively. It separates UI design from application logic.
C#: C# is used for writing application logic, handling events, and interacting with platform APIs.

Project Structure

A typical .NET MAUI project includes the following key folders:

Platforms: Contains platform-specific files for each target (Android, iOS, macOS, Windows).
Resources: Holds shared resources like images, fonts, and styling information.
App.xaml and App.xaml.cs: The entry point of your application, where you define the root of your UI.
AppShell.xaml and AppShell.xaml.cs: Defines the overall structure and navigation of your application.
MauiProgram.cs: Configures the MAUI application, including dependency injection and third-party libraries.

Creating Your First MAUI App

You can create a new .NET MAUI project using Visual Studio or the .NET CLI:

Using Visual Studio

Open Visual Studio.
Select "Create a new project".
Search for ".NET MAUI App" and select the template.
Configure your project name and location, then click "Create".

Using .NET CLI

dotnet new maui -n MyMauiApp

This command creates a new MAUI project named MyMauiApp in the current directory.

Basic UI with XAML

XAML is used to define the visual elements of your application. Here's a simple example:

<!-- MainPage.xaml -->
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMauiApp.MainPage"
             Title="Welcome">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Image
                Source="dotnet_bot.png"
                SemanticProperties.Description="Cute dot net bot waving"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Label
                Text="Hello, .NET MAUI!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />

            <Label
                Text="Welcome to your .NET MAUI application. This is a great starting point for building cross-platform apps."
                SemanticProperties.HeadingLevel="Level1"
                FontSize="18"
                HorizontalOptions="Center" />

            <Button
                Text="Click me"
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCounterClicked"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

The corresponding C# code-behind file (MainPage.xaml.cs) handles events and logic:

// MainPage.xaml.cs
namespace MyMauiApp;

public partial class MainPage : ContentPage
{
    int count = 0;

    public MainPage()
    {
        InitializeComponent();
    }

    private void OnCounterClicked(object sender, EventArgs e)
    {
        count++;
        ((Button)sender).Text = $"Clicked {count} times";

        SemanticScreenReaders.Announce(((Button)sender).Text);
    }
}

Understanding XAML Elements

In the example above:

ContentPage is the root element, representing a screen.
ScrollView allows the content to be scrolled if it exceeds the screen height.
VerticalStackLayout arranges its children vertically.
Image displays an image.
Label displays text.
Button is an interactive element that triggers an event.
SemanticProperties helps improve accessibility for screen readers.

Next Steps

Now that you understand the basics, you can explore more advanced topics like layouts, controls, and data binding to build sophisticated applications.