MAUI Controls Documentation

.NET MAUI Controls

Microsoft .NET MAUI (Multi-platform App UI) provides a rich set of controls that enable you to build native user interfaces for desktop and mobile applications from a single C# codebase. These controls are built on top of native UI elements, ensuring a consistent and performant user experience across different platforms.

This document provides an overview of the common .NET MAUI controls and how to use them. For detailed API documentation, please refer to the official Microsoft Learn reference.

Core Controls

These are the fundamental building blocks for your UI:

Label

Displays read-only text. Supports styling for font, color, and alignment.

Editor

Allows multi-line text input. Useful for user-generated content.

Entry

Provides single-line text input. Ideal for names, passwords, etc.

Button

An interactive element that triggers an action when tapped.

Image

Displays images from various sources (local, remote).

CheckBox

A boolean input control that can be checked or unchecked.

RadioButton

Selects one option from a group of mutually exclusive choices.

Slider

Allows users to select a numeric value within a range.

Switch

A toggle control that represents a binary state (on/off).

Layout Controls

These controls arrange other controls within your UI:

StackLayout

Arranges child elements in a linear orientation (vertical or horizontal).

Grid

Arranges child elements in rows and columns, providing powerful layout capabilities.

FlexLayout

A versatile layout that can arrange items in multiple directions with options for wrapping and alignment.

ScrollView

Enables content that exceeds the screen bounds to be scrolled.

List Controls

For displaying collections of data:

CollectionView

A highly flexible and performant control for displaying lists and grids of data.

ListView

A classic control for displaying scrollable lists of items.

Example Usage: A Simple Button

Here's a basic example of how to declare and use a Button in XAML:


<Button Text="Click Me!"
        Clicked="OnButtonClicked"
        HorizontalOptions="Center"
        VerticalOptions="Center" />

And the corresponding C# code-behind:


public partial class MyPage : ContentPage
{
    public MyPage()
    {
        InitializeComponent();
    }

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

Ensure you have the necessary namespaces imported in your XAML file to use these controls. For example: xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

Customization and Styling

.NET MAUI controls can be extensively customized using XAML or C#. You can modify properties like text, color, size, margins, padding, and more.

For advanced styling, consider using styles, templates, and handlers to create reusable and platform-specific appearances.

Explore the MAUI Styling documentation to learn about best practices for creating consistent and beautiful UIs.

Platform-Specific Controls

While MAUI abstracts many platform differences, some controls might have specific behaviors or appearances on different platforms. You can leverage platform-specific APIs or handlers to fine-tune these.

Always test your application on all target platforms to ensure the controls behave as expected and look visually appealing.

This overview covers the most frequently used controls. Refer to the comprehensive API documentation for a complete list and detailed information on each control's properties, methods, and events.