Aligning UI Components
Understand how to align UI elements on a .NET MAUI page by using properties like VerticalOptions and HorizontalOptions. Learn to control layout with spacing, padding, and margin to create well-structured interfaces across multiple platforms.
We'll cover the following...
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.
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
The most basic alignment properties available in .NET MAUI ...