Working with MAUI Controls

This tutorial explores common controls available in .NET MAUI (Multi-platform App UI) and how to use them to build engaging user interfaces for your cross-platform applications.

Understanding Core Controls

MAUI provides a rich set of controls that abstract the native UI elements of each platform, ensuring a consistent look and feel while leveraging platform-specific capabilities.

Labels

The Label control is used to display text. It supports various text formatting options.

XAML Example:

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

C# Example:

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

Buttons

The Button control is interactive and typically used to trigger an action.

XAML Example:

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

C# Example:

var myButton = new Button
{
    Text = "Click Me",
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center
};
myButton.Clicked += OnButtonClicked;

You would then define the OnButtonClicked method in your code-behind file.

Entry and Editor

Entry is for single-line text input, while Editor is for multi-line text input.

XAML Example:

<Entry Placeholder="Enter your name"
       MaxLength="50"
       Keyboard="Default"
       HorizontalOptions="Fill" />

<Editor Placeholder="Enter your message"
        AutoSize="TextChanges"
        HeightRequest="100"
        HorizontalOptions="Fill" />

Image

The Image control displays images. MAUI supports various image sources.

XAML Example:

<Image Source="dotnet_bot.png"
           WidthRequest="200"
           HeightRequest="200"
           HorizontalOptions="Center" />

This assumes dotnet_bot.png is in your project's Resources/Images folder.

ListView and CollectionView

These controls are used to display collections of data. CollectionView is more flexible and recommended for modern development.

XAML Example (CollectionView):

<CollectionView ItemsSource="{Binding Items}"
                HeightRequest="300"
                HorizontalOptions="Fill">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Label Text="{Binding .}" Padding="10" />
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Items would be a collection (e.g., ObservableCollection<string>) bound to your ViewModel.

Layout Controls

While this tutorial focuses on content controls, remember that MAUI's layout controls like StackLayout, Grid, and FlexLayout are essential for arranging these controls effectively.

Next Steps

Explore more advanced controls and customization options in the official .NET MAUI documentation. Learn how to use data binding to create dynamic and responsive UIs.