Building Cross-Platform Applications with .NET MAUI/

...

/

Aligning UI Components

Aligning UI Components

Learn how to align elements in a .NET MAUI view.

We'll cover the following...

.NET MAUI provides a relatively easy way of aligning elements on a page. Aligning is putting elements into specific positions relative to each other and their background.

Press + to interact
Aligning elements illustrated
Aligning elements illustrated

In this lesson, we'll cover the process of aligning elements on an MAUI page. We'll do so with the help of the following project. This project has examples of properties used for aligning objects.

<?xml version = "1.0" encoding = "UTF-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MauiGraphicsDemo"
             x:Class="MauiGraphicsDemo.App">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>
.NET MAUI project with alignment demonstrated

Alignment properties

...