Create Your First .NET MAUI App

Welcome to the exciting world of .NET Multi-platform App UI (MAUI)! This tutorial will guide you through the process of creating your very first .NET MAUI application. By the end of this guide, you'll have a simple app running on your chosen platform.

Prerequisites

Before you begin, ensure you have the following installed:

Visual Studio 2022 version 17.3 or later with the ".NET Multi-platform App UI development" workload.
The .NET MAUI workload includes the necessary SDKs and targets for building MAUI applications.

Step 1: Create a New Project

Let's start by creating a new project in Visual Studio.

Open Visual Studio.
Click on "Create a new project".
In the project type search box, type ".NET MAUI".
Select the ".NET MAUI App" template and click "Next".
In the "Configure your new project" dialog, enter a project name, for example, MyFirstMauiApp.
Choose a location for your project and click "Next".
Select the .NET version you want to use (e.g., .NET 7.0 or later) and click "Create".

Step 2: Explore the Project Structure

Once the project is created, Visual Studio will open it. Take a moment to examine the project structure:

App.xaml and App.xaml.cs: These define the application entry point and global resources.
AppShell.xaml and AppShell.xaml.cs: This is the main page of your application, acting as a shell for navigation.
Platforms folder: Contains platform-specific code and resources.
Resources folder: Holds assets like images, fonts, and styles.
MainPage.xaml and MainPage.xaml.cs: This is typically the first page users see.

Step 3: Run Your Application

Now, let's build and run your application to see it in action.

In the Visual Studio toolbar, select your target platform from the dropdown (e.g., Windows Machine, Android Emulator, iOS Simulator).
Click the "Start Debugging" button (the green play icon) or press F5.

Visual Studio will build your project and deploy it to the selected target. You should see a simple application window or emulator appear with a welcome message.

Note: The first build and deployment might take longer as Visual Studio downloads necessary components.

Step 4: Modify the User Interface

Let's make a small change to the UI. Open MainPage.xaml. You'll see XAML code that defines the layout. Find the Label element:

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

Change the Text property to something else, for example:

<Label
                Text="Welcome to My First MAUI App!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />

Save the MainPage.xaml file. If you are debugging, Visual Studio might offer "Hot Reload" which updates the UI without a full restart. If not, stop the debugger and press F5 again.

Step 5: Add a Button

Let's add a button to MainPage.xaml. Locate the VerticalStackLayout and add the following inside it, after the Label:

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

Now, open MainPage.xaml.cs. You'll need to define the OnCounterClicked method. The template might already have a similar counter example, but let's add a simple message box to show the button was clicked.

Add the following method inside the MainPage class:

private async void OnCounterClicked(object sender, EventArgs e)
{
    await DisplayAlert("Button Clicked", "You successfully clicked the button!", "OK");
}

Save both files and run the application again. You should see the updated label and the button. Clicking the button will now display an alert dialog.

Tip: .NET MAUI uses XAML for UI definition, which is similar to XAML used in WPF and UWP. This allows for a declarative way to build your interfaces.

Conclusion

Congratulations! You've successfully created, modified, and run your first .NET MAUI application. This is just the beginning of your MAUI journey. In the next tutorials, we'll dive deeper into UI customization, data binding, and platform-specific features.