UI Design with XAML in .NET MAUI

What is XAML?

XAML allows you to create complex UIs using a hierarchical tag-based structure, much like HTML. It's tightly integrated with .NET MAUI’s control and layout system.

Common Layout Containers

• StackLayout – Stacks child elements vertically or horizontally
• Grid – Defines rows and columns
• AbsoluteLayout – Allows absolute positioning
• FlexLayout – Flexible layout similar to CSS Flexbox

Example: Vertical Stack

<VerticalStackLayout Padding="20">
    <Label Text="Welcome" FontSize="24" />
    <Entry Placeholder="Type here..." />
    <Button Text="Submit" />
</VerticalStackLayout>

Styling and Theming

Use styles to apply consistent appearance across controls:

<ContentPage.Resources>
    <Style TargetType="Label">
        <Setter Property="TextColor" Value="DarkBlue" />
        <Setter Property="FontSize" Value="20" />
    </Style>
</ContentPage.Resources>

Simple Data Binding

XAML supports two-way binding using {Binding} syntax:

<Entry Text="{Binding Username}" />
<Label Text="{Binding Username}" />

You must set the BindingContext in the code-behind:

public partial class MainPage : ContentPage
{
    public string Username { get; set; } = "Guest";

    public MainPage()
    {
        InitializeComponent();
        BindingContext = this;
    }
}

Responsive Layout Tips

• Use * and Auto in Grid for dynamic sizing
• Combine layout containers (e.g., Stack + Grid)
• Apply padding/margins for spacing consistency
• Use device-specific styles or DeviceInfo if needed

XAML enables powerful, reusable, and elegant UI design across platforms. Up next: we’ll learn how to handle user input and navigate between screens in your MAUI app.