Your First .NET MAUI App

Introduction

Welcome to the world of .NET MAUI (Multi-platform App UI)! This tutorial will guide you through creating your very first .NET MAUI application, from setting up your environment to running your app on a device or emulator. .NET MAUI allows you to build native cross-platform applications for Windows, macOS, Android, and iOS from a single shared C# codebase.

Prerequisites

Before you begin, ensure you have the following installed:

• Visual Studio 2022 (version 17.3 or later) with the .NET MAUI workload. You can download Visual Studio from the official Microsoft website.
• .NET SDK (version 6.0 or later). This is typically installed with Visual Studio.
• For mobile development:
  • Android SDK and emulators
  • Xcode and a Mac for iOS/macOS development

Refer to the official .NET MAUI installation guide for detailed instructions.

Creating the Project

Let's create your first .NET MAUI project:

Step 3: Select the .NET MAUI Project Template

In the "Create a new project" dialog, search for ".NET MAUI App" and select the C# template. Click "Next".

Step 5: Choose Framework

Select the .NET framework version (e.g., .NET 7.0). Click "Create".

Visual Studio will now create your project and open it.

Understanding the Project Structure

The .NET MAUI project template creates a standard structure. Here are some key folders:

• Platforms: Contains platform-specific code. For example, Platforms/Android and Platforms/iOS.
• Resources: Holds shared assets like images, fonts, and styles.
  • Resources/Images: For your application's images.
  • Resources/Styles: For defining shared styles.
• App.xaml and App.xaml.cs: Define the application entry point and resources.
• AppShell.xaml and AppShell.xaml.cs: Define the application's shell, which manages the overall structure and navigation.
• MauiProgram.cs: Configures the application's host, services, and UI.

Adding UI Elements

Let's modify the main page to add some basic UI elements. Open MainPage.xaml.

Replace the existing content with the following XAML:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyFirstMauiApp.MainPage"
             Title="My First MAUI App"
             BackgroundColor="{DynamicResource SecondaryColor}">

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

            <Image
                Source="dotnet_bot.png"
                HeightRequest="180"
                Aspect="AspectFit" />

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

            <Label
                Text="Welcome to your first .NET MAUI app. This is a simple example demonstrating UI creation."
                SemanticProperties.HeadingLevel="Level1"
                FontSize="18"
                HorizontalOptions="Center" />

            <Button
                x:Name="CounterBtn"
                Text="Click me"
                SemanticProperties.Hint="Counts the number of times you have clicked"
                Clicked="OnCounterClicked"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

The Title property sets the title bar text. We've added a ScrollView to ensure content is scrollable on smaller screens. Inside, a VerticalStackLayout arranges our elements vertically. We have an Image, two Labels for text, and a Button.

Adding Logic

Now, let's add some interactivity to the button. Open MainPage.xaml.cs and find the OnCounterClicked method.

Replace the existing OnCounterClicked method with the following code:

private void OnCounterClicked(object sender, EventArgs e)
{
    count++;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenBreaks.Announce("Counter button clicked");
}

private int count = 0;

This code increments a count variable each time the button is clicked and updates the button's text to show the current count.

Running the App

With your project created and modified, it's time to run it.

Step 1: Select a Target Device

In the Visual Studio toolbar, select your desired target platform and device from the dropdown menu. You can choose an emulator (e.g., Android Emulator) or a connected physical device.

You should see your app launch, displaying "Hello, .NET MAUI!" and a button that updates its text when clicked.

Next Steps

Congratulations on creating your first .NET MAUI app! Here are some ideas for your next steps:

• Explore more UI controls like Entry, CheckBox, and Slider.
• Learn about data binding and MVVM (Model-View-ViewModel) for more structured applications.
• Discover how to navigate between pages.
• Add platform-specific features using the #if ANDROID conditional compilation directives.
• Publish your app to the respective app stores.

Continue exploring the official .NET MAUI documentation for in-depth guidance and advanced topics.