Create Your First .NET MAUI App

A step-by-step guide to building a simple cross-platform application with .NET MAUI.

Introduction to .NET MAUI

.NET Multi-platform App UI (.NET MAUI) is a cross-platform framework for creating native mobile and desktop apps with C# and XAML from a single shared codebase. This tutorial will guide you through creating your first .NET MAUI application.

Prerequisites

Before you begin, ensure you have the following installed:

  • Visual Studio 2022 version 17.3 or later with the .NET MAUI workload.
  • .NET SDK 6.0.400 or later.

If you don't have Visual Studio installed, download it from the official Visual Studio website.

Step 1: Create a New Project

1

Launch Visual Studio

Open Visual Studio and select "Create a new project".

2

Select the MAUI template

In the "Create a new project" dialog, search for ".NET MAUI". Select the ".NET MAUI App" template and click "Next".

Visual Studio .NET MAUI App Template
3

Configure your project

In the "Configure your new project" dialog, enter a project name (e.g., MyMauiApp) and a location for your project. Click "Next".

4

Select the .NET MAUI version

In the "Additional information" dialog, ensure the target framework is set to ".NET 6.0" (or later). Click "Create".

Visual Studio .NET MAUI Framework Selection

Step 2: Explore the Project Structure

Once the project is created, Visual Studio will display the project structure. Key folders include:

  • Platforms: Contains platform-specific code for Android, iOS, macOS, and Windows.
  • Resources: Holds assets like images, fonts, and styles.
  • App.xaml and App.xaml.cs: The entry point of your application.
  • MainPage.xaml and MainPage.xaml.cs: The main UI page of your application.

The UI is defined using XAML, a declarative markup language.

Step 3: Run Your Application

You can now run your application on a simulator or a physical device.

1

Select a target

In the Visual Studio toolbar, select a target device or emulator from the dropdown menu (e.g., "Windows Machine", "Android Emulator", "iPhone Simulator").

Visual Studio Run Target Selection
2

Start debugging

Click the "Start" button (or press F5) to build and run your application.

You should see a simple application with a button that increments a counter when clicked.

Step 4: Modify the UI

Let's make a small change to the user interface. Open the MainPage.xaml file.

Locate the Button element and change its Text property: 

<Button 
    x:Name="CounterBtn"
    Text="Click me!" 
    SemanticProperties.Hint="Counts the number of times that button has been clicked"
    HorizontalOptions="Center" />

After saving the changes, Visual Studio's Hot Reload feature should update the running application without needing a full restart. If not, stop and rerun the application.

Note: .NET MAUI Hot Reload allows you to inject code changes into your running application without restarting or losing application state.

Conclusion

Congratulations! You have successfully created and run your first .NET MAUI application. This is just the beginning of what you can achieve with .NET MAUI.

Explore more tutorials to learn about navigation, data binding, styling, and platform-specific features.

Explore More .NET MAUI Tutorials