.NET MAUI Documentation

Working with Controls in MAUI XAML

This tutorial explores the various controls available in .NET MAUI and how to effectively use them within your XAML markup to build rich and interactive user interfaces.

Understanding Core Controls

MAUI provides a comprehensive set of built-in controls that map to native UI elements on each platform. These controls allow you to present information, gather user input, and navigate through your application.

Labels and Text

The Label control is fundamental for displaying text. You can customize its appearance with properties like Text, FontSize, TextColor, and FontAttributes.

<Label Text="Hello, MAUI!"
                       FontSize="24"
                       TextColor="Blue"
                       FontAttributes="Bold" />

Buttons and User Interaction

The Button control is used for user actions. It can display text or an image and respond to touch events. The Clicked event is commonly used to trigger logic.

<Button Text="Click Me"
                        Clicked="OnButtonClicked" />

Entry and Text Input

For single-line text input, use the Entry control. It offers properties like Placeholder, Keyboard, and Text.

<Entry Placeholder="Enter your name"
                       Keyboard="Text" />

Editor for Multi-line Text

The Editor control is suitable for multi-line text input, such as text areas or notes.

<Editor Placeholder="Enter your message"
                        HeightRequest="100" />

Images

Display images using the Image control. You can load images from local resources, URIs, or embedded assets.

<Image Source="dotnet_logo.png"
                       Aspect="AspectFit"
                       HeightRequest="100" />

Layout Controls

While not strictly data-entry or display controls, layout controls are crucial for arranging your other controls on the screen. Refer to the Layouts tutorial for more details.

Common Properties and Attributes

Most MAUI controls share common properties that affect their appearance and behavior:

  • Margin: Space outside the control.
  • Padding: Space inside the control, between the border and its content.
  • HorizontalOptions / VerticalOptions: Alignment and stretching behavior within a layout.
  • IsEnabled: Enables or disables user interaction.
  • IsVisible: Controls whether the control is displayed.
Tip: Experiment with these properties to fine-tune the visual presentation and user experience of your application.

Advanced Controls

MAUI also includes more complex controls for specific use cases:

ListView and Collection Views

To display collections of data, you'll use ListView or the more modern and flexible CollectionView. These controls are essential for creating lists, grids, and galleries.

<!-- Conceptual Example for CollectionView -->
<CollectionView ItemsSource="{Binding MyItems}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Label Text="{Binding ItemName}" />
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Tabbed Pages

Organize content into navigable tabs using TabbedPage.

Navigation Pages

Implement hierarchical navigation with NavigationPage.

Example: A Simple Form

Here's a brief example demonstrating a few controls together in a basic form layout:

<VerticalStackLayout Padding="20" Spacing="10">
    <Label Text="User Profile" FontSize="28" FontAttributes="Bold" HorizontalOptions="Center" />
    <Entry Placeholder="Enter your full name" />
    <Entry Placeholder="Enter your email" Keyboard="Email" />
    <Button Text="Save Profile" BackgroundColor="Green" TextColor="White" CornerRadius="5" />
</VerticalStackLayout>

Custom Controls

For unique UI requirements, you can create your own custom controls by combining existing ones or by creating entirely new ones.

By mastering these controls and their properties, you can effectively build user interfaces for your .NET MAUI applications across multiple platforms.