Building Cross-Platform Applications with .NET MAUI/

...

/

XAML Layout Types

XAML Layout Types

Learn about the XAML layout types in .NET MAUI.

We'll cover the following...

Layouts in XAML are used for arranging the content and applying common styling to it. There are different layout types we can choose from, depending on how we want to arrange the elements of our user interface. We're going to look at them all.

In this lesson, we'll go through all the supported layout types. We'll look at some examples of the layout markup and see how it's rendered on the device screen.

VerticalStackLayout

VerticalStackLayout is a layout type in which child elements are stacked vertically. This is the layout weve defined in the MainPage.xaml file in the project below. The layout is defined on lines 8–39.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#512BD4</color>
    <color name="colorPrimaryDark">#2B0B98</color>
    <color name="colorAccent">#2B0B98</color>
</resources>
Base project setup with VerticalStackLayout

We have some attributes within the layout element that define how elements within the layout are arranged. The Spacing attribute on line 9 controls the distance between the child elements. The Padding element on line 10 controls how much padding is applied around each element. The VerticalOptions attribute controls how each element is arranged vertically. When this value is set to ...