MAUI UI Development Tutorials

Welcome to the .NET MAUI UI Development tutorial series. This guide will walk you through building modern, cross-platform applications with .NET Multi-platform App UI (MAUI). MAUI is an evolution of Xamarin.Forms, enabling you to create native apps for Android, iOS, macOS, and Windows from a single, shared C# codebase.

We'll cover everything from setting up your development environment to mastering complex UI patterns and deploying your applications.

Understanding Layout Containers

Layouts in MAUI are responsible for arranging UI elements on the screen. MAUI provides a variety of layout containers to achieve different arrangement patterns:

StackLayout: Arranges child elements in a linear stack, either horizontally or vertically.
Grid: Arranges child elements in rows and columns, similar to an HTML table.
FlexLayout: Provides flexible layout options, allowing elements to wrap and align in various ways.
AbsoluteLayout: Positions children at absolute coordinates, useful for overlays or custom positioning.
RelativeLayout: Positions children relative to siblings or the parent.

Using StackLayout

A common use case for StackLayout is organizing controls vertically:

                    
<StackLayout Margin="20" Spacing="15" Orientation="Vertical">
    <Label Text="Username:" />
    <Entry Placeholder="Enter your username" />
    <Button Text="Login" />
</StackLayout>
                    
                

Mastering Grid

The Grid is powerful for creating structured UIs:

                    
<Grid RowDefinitions="Auto,*" ColumnDefinitions="Auto,*" Padding="10">
    <Label Grid.Row="0" Grid.Column="0" Text="Name:" FontAttributes="Bold" />
    <Entry Grid.Row="0" Grid.Column="1" />
    <Label Grid.Row="1" Grid.Column="0" Text="Message:" FontAttributes="Bold" />
    <Editor Grid.Row="1" Grid.Column="1" HeightRequest="100" />
</Grid>
                    
                

Essential UI Elements

MAUI offers a rich set of controls for building user interfaces:

Label: Displays text.
Entry: Allows single-line text input.
Editor: Enables multi-line text input.
Button: Triggers an action when tapped.
CheckBox: Represents a boolean state.
RadioButton: Allows selection from a group.
Slider: Allows selection of a numeric value.
Image: Displays images.
ListView: Displays a scrollable list of items.
CollectionView: A more flexible way to display lists and grids of data.

Working with Buttons and Events

Handling user interactions is fundamental. Here's how to hook up a button click event:

                    
<!-- In your XAML file -->
<Button Text="Click Me" Clicked="OnButtonClicked" />

<!-- In your C# code-behind file -->
public partial class MyPage : ContentPage
{
    public MyPage()
    {
        InitializeComponent();
    }

    private void OnButtonClicked(object sender, EventArgs e)
    {
        // Handle button click logic here
        DisplayAlert("Button Clicked", "You tapped the button!", "OK");
    }
}
                    
                

Consistent Look and Feel

MAUI allows you to define styles and themes to ensure a consistent user experience across all platforms. You can use XAML Styles, Resource Dictionaries, and Themes.

XAML Styles

Define reusable styles in your ResourceDictionary:

                    
<!-- In App.xaml or a separate Style.xaml file -->
<Application xmlns="..."
             xmlns:x="..."
             x:Class="MyMauiApp.App">
    <Application.Resources>
        <Style TargetType="Button">
            <Setter Property="BackgroundColor" Value="{StaticResource PrimaryColor}" />
            <Setter Property="TextColor" Value="White" />
            <Setter Property="CornerRadius" Value="5" />
            <Setter Property="Padding" Value="10,5" />
        </Style>
    </Application.Resources>
</Application>
                    
                

And apply it:


<Button Text="Styled Button" />

Dynamic Resources and Theming

Use dynamic resources to allow for runtime theme changes:

                    
<!-- Define a color resource -->
<Color x:Key="AccentColor">Blue</Color>

<!-- Use it dynamically -->
<Label Text="Welcome!" TextColor="{DynamicResource AccentColor}" />

Navigating Between Pages

MAUI supports several navigation patterns, including stack-based navigation and shell navigation.

Stack Navigation

Push and Pop pages onto the navigation stack:

                    
// Navigating to a new page
await Navigation.PushAsync(new NextPage());

// Going back to the previous page
await Navigation.PopAsync();

Connecting UI to Data

Data binding is a powerful technique that simplifies synchronizing data between your UI elements and your application logic. It's key to building dynamic and responsive UIs.

Basic Data Binding

Bind a Label's text to a property in your ViewModel:

                    
<!-- In XAML -->
<Label Text="{Binding UserGreeting}" />

<!-- In ViewModel -->
public string UserGreeting { get; set; } = "Hello, MAUI!";

Implementing INotifyPropertyChanged

For changes to be reflected automatically, your ViewModel needs to implement INotifyPropertyChanged.

Extending UI Capabilities

When built-in controls don't meet your needs, you can create custom controls. This involves defining a new control class and potentially a custom renderer on each platform (though MAUI aims to minimize the need for custom renderers).

Separate UI and Logic: Use MVVM (Model-View-ViewModel) pattern.
Optimize Layouts: Avoid deeply nested layouts. Prefer Grid and FlexLayout for complex arrangements.
Use Styles: Promote consistency and maintainability.
Performance: Virtualize lists with CollectionView.
Platform Consistency: Design with the user in mind on each target platform.

Microsoft Learn

Introduction to .NET MAUI UI Development

Layouts