MAUI Controls - Windows Desktop Tutorials

MAUI Controls: Building User Interfaces

This tutorial will guide you through the essential controls available in .NET MAUI (Multi-platform App UI) for building rich and interactive user interfaces on Windows Desktop.

Introduction to MAUI Controls

MAUI controls are the building blocks of your application's UI. They abstract away platform-specific UI elements, allowing you to write C# and XAML code once and deploy it across multiple platforms, including Windows, macOS, iOS, and Android.

Common Controls

Here are some of the most frequently used MAUI controls:

Labels

Displaying text is a fundamental requirement. The Label control is used for this purpose. You can customize its appearance, text properties, and alignment.

XAML Example:

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

C# Example:

var myLabel = new Label
                {
                    Text = "Hello from C#!",
                    FontSize = 20,
                    TextColor = Colors.Green,
                    HorizontalTextAlignment = TextAlignment.Center
                };
                Content = myLabel;

Buttons

Buttons are crucial for user interaction. The Button control allows users to trigger actions in your application. You can define its text, style, and command.

XAML Example:

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

In your code-behind:

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

Entry and Editor

For text input, MAUI provides Entry for single-line input and Editor for multi-line input. Both offer customization for keyboard types, placeholders, and more.

XAML Example:

<Entry Placeholder="Enter your name"
                       Keyboard="Text" />
                <Editor Placeholder="Enter your message"
                        AutoSize="TextChanges" />

Image

Displaying images is straightforward with the Image control. You can load images from various sources, including embedded resources and network URLs.

XAML Example:

<Image Source="dotnet_bot.png"
                       Aspect="AspectFit"
                       HeightRequest="200" />

Note: dotnet_bot.png should be placed in your project's Resources/Images folder.

ListView and CollectionView

To display collections of data, ListView and CollectionView are indispensable. CollectionView is generally recommended for its flexibility and performance, especially for large datasets.

XAML Example (Simplified CollectionView):

<CollectionView ItemsSource="{Binding Items}">
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <Label Text="{Binding .}" />
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>

Layout Controls

While not strictly UI elements, layout controls are vital for arranging other controls. MAUI offers StackLayout, Grid, FlexLayout, and more to structure your UI effectively.

Refer to the Layouts tutorial for more details.

Customizing Controls

Most MAUI controls offer extensive customization options through their properties, allowing you to tailor their appearance and behavior to match your application's design language.

Next Steps

Now that you're familiar with the basic controls, explore how to bind data to them and create dynamic UIs in the Data Binding tutorial.