Building Your First MAUI Hello World Application

Introduction

MAUI, which stands for .NET Multi-platform App UI, is a modern cross-platform framework for building native applications for mobile, desktop, and web using the power of C# and .NET. It’s a part of Microsoft’s ongoing efforts to simplify the development of applications for multiple platforms. In this article, we’ll guide you through creating a basic “Hello World” application using MAUI, showcasing its simplicity and versatility.

Prerequisites

Before you start, ensure that you have the following prerequisites in place:

1. Visual Studio 2022: MAUI development is best done with Visual Studio 2022, which can be downloaded from the official Visual Studio website.
2. MAUI Workload: During the installation of Visual Studio 2022, be sure to include the MAUI workload.
3. .NET 6: MAUI is built on top of .NET 6, so make sure you have it installed.
4. Android Emulator or iOS Simulator: If you’re targeting mobile platforms, you’ll need either an Android emulator or an iOS simulator, depending on your development environment.

Creating a New MAUI Project

Let’s get started by creating a new MAUI project:

1. Open Visual Studio 2022.
2. Click on “Create a new project.”
3. In the “Create a new project” dialog, search for “MAUI” and select the “MAUI Blazor App” template.
4. Click “Next.”
5. Name your project and solution, and choose a location to save your project.
6. Click “Create.”

Designing Your Hello World Interface

MAUI projects consist of both a shared codebase and platform-specific projects. To create the user interface for your “Hello World” application, you’ll be working primarily with the shared codebase. Open the “MainPage.xaml” file.

In this file, you can use XAML to design your application’s user interface. Let’s create a simple “Hello World” page:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             BackgroundColor="{DynamicResource PageBackgroundColor}"
             x:Class="HelloWorld.MainPage">

    <StackLayout>
        <Label Text="Hello, World!"
               VerticalOptions="CenterAndExpand" 
               HorizontalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage>

This XAML code defines a simple page with a label displaying “Hello, World!” in the center.

Running Your MAUI Hello World App

Now that you’ve designed your user interface, it’s time to run your “Hello World” application:

1. Select your target platform from the toolbar in Visual Studio (e.g., Android, iOS, or UWP).
2. Press the “Start Debugging” button (or F5) to build and run your app on the selected platform.
3. Your “Hello World” app should open in the emulator or simulator.

Conclusion

Building a “Hello World” application with MAUI is a straightforward process. The framework’s use of XAML for UI design and the power of C# for coding makes it an excellent choice for developing cross-platform applications. As you become more familiar with MAUI, you can leverage its capabilities to build complex, feature-rich applications for various platforms.

MAUI’s commitment to platform-agnostic code and native performance ensures that your app will provide a seamless and consistent user experience across Android, iOS, and Windows. So whether you’re an experienced developer or just starting out, MAUI is an exciting framework to explore for cross-platform application development.