Creating User Interfaces with .NET MAUI

Introduction to .NET MAUI UI Development

.NET MAUI (Multi-platform App UI) provides a powerful and flexible framework for building native user interfaces for Windows, macOS, Android, and iOS from a single C# codebase.

With .NET MAUI, you can leverage XAML or C# to define your UI elements, enabling rapid development and consistent user experiences across different platforms.

This document will guide you through the fundamental concepts and components of UI creation in .NET MAUI.

Layouts: Arranging Your UI Elements

Layouts are the backbone of any user interface, dictating how controls are arranged on the screen. .NET MAUI offers a variety of layout containers:

• StackLayout: Arranges child elements vertically or horizontally in a single line.
• Grid: Arranges child elements in rows and columns, similar to an HTML table.
• FlexLayout: Provides flexible arrangement of child elements, allowing for wrapping and alignment.
• AbsoluteLayout: Allows you to position child elements at specific coordinates.
• RelativeLayout: Positions child elements relative to their parent or siblings.
• Border: Encloses a single child element with a border, background, and padding.
• Frame: Similar to Border, but provides more styling options.

Example: Using a Grid

<Grid RowDefinitions="Auto,*" ColumnDefinitions="Auto,*" Padding="10">
    <Label Text="Name:" Grid.Row="0" Grid.Column="0" VerticalOptions="Center" />
    <Entry Grid.Row="0" Grid.Column="1" />
    <Button Text="Submit" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Margin="10,0,0,0" />
</Grid>

UI Controls: Building Blocks of Your Interface

.NET MAUI provides a rich set of controls for building interactive user interfaces:

• Labels: Displaying static text.
• Entries: Single-line text input.
• Editor: Multi-line text input.
• Buttons: Triggering actions.
• Images: Displaying images.
• Checkboxes: Boolean selection.
• RadioButtons: Exclusive selection from a group.
• Sliders: Numeric value selection.
• ListView: Displaying scrollable lists of data.
• CollectionView: A more flexible way to display lists of data.
• ScrollView: Enables scrolling when content exceeds the available space.

Example: A Simple Button and Label

<VerticalStackLayout Spacing="10" Padding="20" HorizontalOptions="Center">
    <Label Text="Welcome to .NET MAUI!" FontSize="Large" TextColor="Blue" />
    <Button Text="Click Me" Clicked="OnButtonClicked" />
</VerticalStackLayout>

In the code-behind (C#):

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

Data Binding: Connecting Your UI to Your Data

Data binding is a powerful mechanism that simplifies the process of synchronizing UI elements with data sources. It reduces boilerplate code and makes your applications more maintainable.

Key concepts:

• Source: The object containing the data.
• Target: The UI element property to be updated.
• Path: The property name on the Source object.
• Mode: Specifies the direction of data flow (OneWay, TwoWay, OneTime).

Example: Binding a Label to a Property

In XAML:

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

In C# (ViewModel or Page class):

public partial class MyViewModel : ObservableObject
{
    [ObservableProperty]
    private string userName;

    public MyViewModel()
    {
        UserName = "John Doe";
    }
}

Make sure to set the BindingContext:

<ContentPage.BindingContext>
    <local:MyViewModel />
</ContentPage.BindingContext>

Styling Your UI

.NET MAUI supports several ways to style your UI elements, ensuring a consistent look and feel:

• Inline Styles: Applying styles directly to individual elements using attributes.
• Resources: Defining reusable styles in a ResourceDictionary (e.g., in App.xaml or a specific page).
• Global Styles: Defining styles that apply to all elements of a specific type across the application.
• Themes: Applying predefined visual themes.

Example: Using a Resource Dictionary

In App.xaml:

<Application ...>
    <Application.Resources>
        <ResourceDictionary>
            <Style TargetType="Button">
                <Setter Property="BackgroundColor" Value="{AppThemeBinding Light=#0078d4, Dark=#50d4a8}" />
                <Setter Property="TextColor" Value="White" />
                <Setter Property="Padding" Value="10,5" />
                <Setter Property="CornerRadius" Value="5" />
            </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Any Button in your application will now inherit these styles.