MAUI UI Fundamentals - Microsoft Learn

Understanding .NET MAUI UI Fundamentals

This tutorial delves into the core concepts of building user interfaces with .NET MAUI (Multi-platform App UI). .NET MAUI is a framework for creating native, cross-platform applications for iOS, Android, macOS, and Windows from a single, shared C# codebase.

Layouts

Layouts are containers that arrange their child elements. .NET MAUI provides several built-in layouts to structure your UI:

StackLayout: Arranges elements in a vertical or horizontal line.
Grid: Arranges elements in rows and columns, allowing for precise positioning.
FlexLayout: Provides flexible arrangement of items, similar to CSS Flexbox.
AbsoluteLayout: Positions elements at specific coordinates.
RelativeLayout: Positions elements relative to each other or the parent.

For example, a basic vertical StackLayout:

                    <VerticalStackLayout Spacing="10" Padding="10">
    <Label Text="Hello, MAUI!" FontSize="Large" HorizontalOptions="Center" />
    <Button Text="Click Me" Clicked="OnButtonClicked" />
</VerticalStackLayout>
                

Controls

.NET MAUI offers a rich set of pre-built UI controls that represent common UI elements:

Label: Displays text.
Button: Triggers an action when tapped.
Entry: Allows single-line text input.
Editor: Allows multi-line text input.
Image: Displays images.
ListView: Displays scrollable lists of data.
CollectionView: A more flexible and performant way to display lists and grids of data.
Slider: Allows users to select a value from a range.
Switch: A toggleable switch control.

Each control can be customized with various properties like text, color, size, and alignment.

Data Binding

Data binding is a powerful technique that synchronizes data between your UI elements and your application's logic. It allows you to update the UI automatically when data changes, and vice-versa. This is typically achieved using the BindingContext and the Binding markup extension.

Consider this example:

                    <!-- In your XAML page -->
<Label Text="{Binding WelcomeMessage}" />

<!-- In your ViewModel -->
public class MyViewModel : INotifyPropertyChanged
{
    private string _welcomeMessage = "Welcome to .NET MAUI!";
    public string WelcomeMessage
    {
        get => _welcomeMessage;
        set
        {
            _welcomeMessage = value;
            OnPropertyChanged();
        }
    }

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

Styling

.NET MAUI supports styling to maintain a consistent look and feel across your application. You can define styles in XAML, either globally in App.xaml or locally within a page. Styles can be applied directly to controls or through Style properties.

Example global style:

                    <!-- In App.xaml -->
<Application ...>
    <Application.Resources>
        <Style TargetType="Button">
            <Setter Property="BackgroundColor" Value="{StaticResource Primary}" />
            <Setter Property="TextColor" Value="White" />
            <Setter Property="CornerRadius" Value="5" />
        </Style>
    </Application.Resources>
</Application>
                

Navigation

Navigating between different pages is a fundamental aspect of application development. .NET MAUI provides a navigation service to manage page transitions.

NavigationPage: Provides a push/pop navigation model.
Shell: A simplified way to build cross-platform apps with common UI patterns like flyouts and tabs.

Next Steps

Explore the official Microsoft Learn documentation for in-depth guides on specific controls, advanced layout techniques, and best practices for building performant and visually appealing .NET MAUI applications.