Exploring .NET MAUI: A Cross-Platform Framework for Modern App Development

.NET MAUI (Multi-platform App UI) is Microsoft’s solution for building cross-platform applications, allowing developers to create apps for Android, iOS, macOS, and Windows from a single codebase. Leveraging C# and XAML for a unified UI experience, MAUI is the evolution of Xamarin.Forms, offering enhanced capabilities and greater flexibility for developing modern, responsive applications across platforms.

In this article, we’ll dive into .NET MAUI’s background, explore key features, and provide a hands-on example of building a simple app. Finally, we’ll compare .NET MAUI with WPF (Windows Presentation Foundation) to highlight where each shines.


Background: UWP and WinUI

Before MAUI, Microsoft developers primarily used UWP (Universal Windows Platform) and WinUI (Windows UI Library) for Windows applications. UWP aimed to unify app development across Windows devices, while WinUI provided a more modern, flexible UI toolkit. .NET MAUI extends this approach by offering a fully cross-platform framework that keeps the familiar structure of XAML-based UIs and the .NET ecosystem, supporting not only Windows but also macOS, iOS, and Android. This makes MAUI a versatile choice for developers who want to reach users on multiple devices with a single, cohesive app.


What Makes .NET MAUI Different?

.NET MAUI provides a robust suite of controls and tools to create interactive UIs that look and feel native on each platform. Here are some defining features of .NET MAUI:

  1. Single Codebase: Develop applications for multiple platforms in one project using shared C# and XAML files.
  2. Unified .NET Runtime: MAUI is built on the .NET runtime, meaning it integrates seamlessly with the .NET ecosystem.
  3. Enhanced Performance: Optimized to deliver near-native performance on each platform.
  4. Native Access: Access platform-specific APIs with dependency injection and platform abstractions for a true native feel.

Key .NET MAUI Controls

.NET MAUI offers a comprehensive set of controls to help you build responsive, adaptive UIs across different platforms. Here are some of the most essential:

ControlDescription
ButtonTriggers actions or commands when clicked.
LabelDisplays static or dynamic text, customizable with various styles and colors.
EntryA single-line text input control, suitable for collecting short text input.
EditorA multi-line text field, often used for capturing notes or longer inputs.
CollectionViewDisplays a list or collection of data items with support for templates and layouts.
ImageEmbeds images from local or remote sources into the application.
ProgressBarVisualizes the progress of an operation.
SwitchA toggle control with “On” and “Off” states.
DatePickerAllows the user to select a date from a calendar-style interface.
TimePickerLets the user pick a time.

Getting Started: Building a Simple .NET MAUI App in Visual Studio 2022

Follow these steps to create a basic .NET MAUI app with a button and a text entry field that displays a greeting when clicked.

Step 1: Set Up Your Project

  1. Open Visual Studio 2022 and go to File > New > Project.
  2. Select .NET MAUI App and click Next.
  3. Name your project (e.g., MauiHelloWorldApp), choose a location, and click Create.

Step 2: Design the User Interface in XAML

In the MainPage.xaml file, define the UI layout with a label, an entry field, and a button:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiHelloWorldApp.MainPage">

    <VerticalStackLayout Padding="30" Spacing="20" VerticalOptions="Center">
        <Label Text="Welcome to .NET MAUI!" FontSize="24" HorizontalOptions="Center"/>

        <Entry x:Name="UserEntry" Placeholder="Type your name here" />

        <Button Text="Say Hello" Clicked="OnButtonClicked" />

        <Label x:Name="HelloLabel" FontSize="20" TextColor="Blue" HorizontalOptions="Center"/>
    </VerticalStackLayout>
</ContentPage>

Step 3: Implement the Code-Behind Logic

In MainPage.xaml.cs, add an event handler to display a greeting based on the text entered:

using Microsoft.Maui.Controls;

namespace MauiHelloWorldApp
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void OnButtonClicked(object sender, EventArgs e)
        {
            string name = UserEntry.Text;
            HelloLabel.Text = $"Hello, {name}!";
        }
    }
}

Step 4: Run Your Application

  1. Choose your target platform (e.g., Android, iOS, Windows) in the Visual Studio toolbar.
  2. Click Start to build and launch the app.

Now, you’ll see a welcome message. Type a name in the Entry field, press Say Hello, and a greeting will appear, like “Hello, Alex!”


.NET MAUI vs. WPF: Key Differences

While WPF is primarily used for Windows desktop applications, .NET MAUI targets a broader array of platforms. Here’s a comparison of the two frameworks:

Feature.NET MAUIWPF (Windows Presentation Foundation)
Platform SupportAndroid, iOS, macOS, WindowsWindows only
UI FrameworkXAMLXAML
Best forCross-platform applicationsWindows desktop applications with complex UI
Design PhilosophyWrite once, run on multiple platformsOptimized for Windows UI on desktops
Native PerformanceNear-native performance on all platformsHigh-performance on Windows
CommunityGrowing, officially supported by MicrosoftMature and well-established on Windows

Conclusion

.NET MAUI offers an excellent choice for building cross-platform applications, reusing code across Android, iOS, macOS, and Windows. For developers familiar with UWP, WinUI, or WPF, MAUI builds on similar concepts and extends the flexibility of .NET development to more devices.

Edvaldo Guimrães Filho Avatar

Published by