MAUI Basic Controls Tutorial

Basic Controls

This tutorial covers some of the fundamental controls available in .NET MAUI for building user interfaces. These controls form the building blocks of most applications.

Labels

The Label control is used to display text. It supports various properties for customization, such as font size, color, and alignment.

XAML Example:

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

C# Example:

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

Buttons

The Button control is used to trigger an action when tapped. It can display text or an image.

XAML Example:

<Button Text="Click Me"
                        Clicked="OnButtonClicked"
                        BackgroundColor="Purple"
                        TextColor="White" />

In your code-behind file (e.g., MainPage.xaml.cs):

private void OnButtonClicked(object sender, EventArgs e)
{
    // Handle button click event
    System.Diagnostics.Debug.WriteLine("Button was clicked!");
}

Entry and Editor

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

XAML Example:

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

Image

The Image control allows you to display images from various sources, including local resources and remote URLs.

XAML Example:

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

Place dotnet_bot.png in your project's Resources/Images folder.

Checkboxes and Radio Buttons

CheckBox provides a toggle option, while RadioButton is typically used in groups for exclusive selection.

XAML Example:

<StackLayout>
    <CheckBox IsChecked="True" Content="Remember Me" />
    
    <!-- RadioButton Group -->
    <RadioGroup>
        <RadioButton Content="Option 1" />
        <RadioButton Content="Option 2" IsChecked="True" />
    </RadioGroup>
</StackLayout>

Sliders

The Slider control allows users to select a numeric value from a range.

XAML Example:

<Slider Minimum="0" Maximum="100" Value="50" />

Progress Indicators

ActivityIndicator and ProgressBar are used to show the status of an ongoing operation.

XAML Example:

<!-- For background tasks -->
<ActivityIndicator IsRunning="True" Color="Orange" />

<!-- For progress tracking -->
<ProgressBar Progress="0.75" />

Next Steps

Now that you're familiar with basic controls, explore how to arrange them using layout controls or dive into more advanced concepts like data binding and navigation.

Next: Collection Controls