Microsoft Docs

Introduction to UI in .NET MAUI

Welcome to the foundational tutorial on building user interfaces with .NET MAUI. This guide will introduce you to the core concepts of UI development in MAUI, helping you create visually appealing and interactive applications across multiple platforms.

What is .NET MAUI?

.NET MAUI (Multi-platform App UI) is an open-source framework for creating native mobile and desktop applications with C# and XAML from a single shared codebase. It’s the evolution of Xamarin.Forms, providing a streamlined development experience for building rich, cross-platform UIs.

The MAUI UI Architecture

MAUI utilizes a platform-agnostic approach to UI definition. You define your UI once using either XAML or C#, and MAUI’s rendering engine translates these definitions into native UI controls for each target platform (Windows, macOS, Android, iOS). This ensures that your app looks and feels native on every device.

XAML for UI Definition

XAML (eXtensible Application Markup Language) is the declarative language used to define your UI in .NET MAUI. It allows you to separate the UI structure from the application logic, making your code cleaner and more maintainable.

Here's a simple example of a XAML page that displays a label:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMauiApp.Views.HomePage"
             Title="Welcome">

    <Label Text="Hello, .NET MAUI!"
           VerticalOptions="Center"
           HorizontalOptions="Center"
           FontSize="32"
           TextColor="Blue" />

</ContentPage>

C# for UI Definition

While XAML is the preferred method for defining complex UIs, you can also create UI elements programmatically using C#. This approach is useful for dynamic UI generation or simpler scenarios.

Here's the equivalent C# code for the label above:

using Microsoft.Maui.Controls;

namespace MyMauiApp.Views
{
    public partial class HomePage : ContentPage
    {
        public HomePage()
        {
            InitializeComponent(); // If using XAML alongside C#

            var label = new Label
            {
                Text = "Hello, .NET MAUI!",
                VerticalOptions = LayoutOptions.Center,
                HorizontalOptions = LayoutOptions.Center,
                FontSize = 32,
                TextColor = Colors.Blue
            };

            Content = label;
        }
    }
}

Key UI Concepts

• Views: These are the visual elements that make up your UI, such as buttons, labels, text fields, and images.
• Layouts: Containers that arrange and position other views on the screen. Common layouts include StackLayout, Grid, and FlexLayout.
• Pages: The highest-level container for UI content in a MAUI application, typically representing a single screen.

Next Steps

Now that you have a basic understanding of MAUI UI fundamentals, you're ready to explore more advanced topics such as layout management and common UI controls. Continue to the next section to learn about Layout Concepts.