MAUI UI Basics

This tutorial introduces you to the fundamental concepts of building user interfaces (UI) in .NET MAUI (Multi-platform App UI). .NET MAUI allows you to create native UIs for Android, iOS, macOS, and Windows from a single, shared codebase.

Layouts

Layouts in .NET MAUI are responsible for arranging child elements within a parent container. They define how elements are positioned, sized, and aligned. Common layout containers include:

StackLayout

StackLayout arranges its children in a single horizontal or vertical line. It's one of the simplest and most frequently used layout containers.

<StackLayout Orientation="Vertical" Spacing="10">
    <Label Text="First Item" />
    <Button Text="Click Me" />
    <Image Source="dotnet_bot.png" />
</StackLayout>

Grid

Grid allows you to arrange elements in a flexible row and column system. It's powerful for creating complex and responsive layouts.

<Grid RowDefinitions="Auto,Star" ColumnDefinitions="Auto,Star">
    <Label Text="Header" Grid.Row="0" Grid.Column="0" />
    <Label Text="Content Area" Grid.Row="1" Grid.Column="0" />
    <Image Source="dotnet_logo.png" Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" />
</Grid>

FlexLayout

FlexLayout provides a more flexible way to arrange items, similar to CSS Flexbox. It supports wrapping, justification, and alignment of children, making it ideal for responsive UIs.

<FlexLayout Direction="Row" Wrap="Wrap" JustifyContent="SpaceBetween" AlignItems="Center">
    <Button Text="Button 1" />
    <Button Text="Button 2" />
    <Button Text="Button 3" />
</FlexLayout>

Controls

.NET MAUI provides a rich set of pre-built UI controls that you can use to build your application's interface. These controls are rendered as native platform controls for a consistent look and feel.

Label

Displays read-only text. You can customize its font, color, and alignment.

// C# example
var label = new Label
{
    Text = "Hello, MAUI!",
    FontSize = 24,
    TextColor = Colors.Blue,
    HorizontalOptions = LayoutOptions.Center
};

Button

Represents a button that triggers an action when tapped. It can display text or an image.

<Button Text="Tap Here" Clicked="OnButtonClicked" />

In your code-behind:

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

Entry and Editor

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

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

Image

Displays images from various sources, including local files, embedded resources, or network URLs.

<Image Source="Images/app_icon.png" HeightRequest="100" />

Data Binding

Data binding is a powerful technique that synchronizes data between your UI elements and your application's data model. It simplifies UI development by reducing boilerplate code and enabling dynamic updates.

Here's a simple example using XAML:

<!-- In XAML -->
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyMauiApp.Views.MyPage"
             x:DataType="viewmodels:MyViewModel">

    <Label Text="{Binding Greeting}" />

</ContentPage>

And the corresponding ViewModel:

// In C# ViewModel
public class MyViewModel : INotifyPropertyChanged
{
    private string _greeting;
    public string Greeting
    {
        get => _greeting;
        set
        {
            _greeting = value;
            OnPropertyChanged(nameof(Greeting));
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    public MyViewModel()
    {
        Greeting = "Welcome to MAUI Data Binding!";
    }
}

Styling

.NET MAUI supports several ways to style your application's UI:

Implicit Styles

You can define styles for specific control types that will be applied automatically to all instances of that control within the scope of the style.

<ContentPage.Resources>
    <Style TargetType="Button">
        <Setter Property="BackgroundColor" Value="DodgerBlue" />
        <Setter Property="TextColor" Value="White" />
        <Setter Property="CornerRadius" Value="5" />
    </Style>
</ContentPage.Resources>

Explicit Styles

Explicit styles are defined with a key and can be applied to specific elements by referencing that key.

<ContentPage.Resources>
    <Style x:Key="PrimaryButtonStyle" TargetType="Button">
        <Setter Property="BackgroundColor" Value="Green" />
        <Setter Property="TextColor" Value="White" />
    </Style>
</ContentPage.Resources>

<Button Text="Styled Button" Style="{StaticResource PrimaryButtonStyle}" />

Shell Styling

.NET MAUI Shell provides advanced styling capabilities for navigation bars, tab bars, and more through its styling mechanisms.

Continue exploring the .NET MAUI documentation to delve deeper into advanced UI topics such as gestures, animations, and platform-specific customizations.