Chapter 5 User Interface Essentials

parents content, but you are going to make it float in the Center. The main reason is so it will stay there regardless of the screen size it is running on. Of course, there are more in-depth ways of handling different screen sizes and you will explore them in the coming chapters.

While you have much more content to add to this XAML, file you are going to do so in the context of the following topics. Your next step is to add multiple child views. For this, you are going to need to choose a suitable Layout.

Layouts

.NET MAUI provides you with a set of prebuilt layout classes that allow you to group and arrange views in your application. The aim of this section is to explore each layout control and how it might be used for your application. I strongly recommend playing around with each of the layouts to see what will fit best for each individual use case and always remember to keep the visual tree as simple as possible.

AbsoluteLayout

As the name suggests, the AbsoluteLayout allows the positioning of its children with absolute values. The x, y, width, and height of a child is controlled through the LayoutBounds attached property. This means you use as follows:

<AbsoluteLayout>

<Label

AbsoluteLayout.LayoutBounds="0,0,600,200"/>

</AbsoluteLayout>

Figure 5-2 shows how a control is positioned inside an

AbsoluteLayout.

124

Chapter 5 User Interface Essentials

Figure 5-2.  Absolute layout overview

There is also the option to define layout bounds that are proportional to the AbsoluteLayout itself. You can control this with the

AbsoluteLayout.LayoutFlags attached property.

<AbsoluteLayout>

<Label

AbsoluteLayout.LayoutBounds="0,0,0.5,0.2"

AbsoluteLayout.LayoutFlags="All"/> </AbsoluteLayout>

This will result in the Label being positioned at 0,0 but the width will be 50% of the AbsoluteLayout and the height will be 20%,. This provides a lot of power when defining a user interface that can grow as the size of a device also increases.

The LayoutFlags option provides you with a lot of power. You can choose which part of the LayoutBounds are applied absolutely and which are applied proportionally. Here are the possible values for LayoutFlags and what they impact:

125

Chapter 5 User Interface Essentials

The AbsoluteLayout can be an incredibly powerful layout when used in the right scenario. For your scenario, it offers more complexities than I really think you need to handle.

FlexLayout

The FlexLayout comes with a large number of properties to configure how its children are positioned. If you want your controls to wrap, this is the control for you! A good example for using the FlexLayout is a media gallery.

Figure 5-3 shows how controls can be positioned inside a FlexLayout.

126

Chapter 5 User Interface Essentials

Figure 5-3.  FlexLayout overview

The above layout can be achieved with the following code example:

<FlexLayout

AlignItems="Start"

Wrap="Wrap"

Margin="30"

JustifyContent="SpaceEvenly">

<Border

BackgroundColor="LightGray"

WidthRequest="100" HeightRequest="100" />

<Border

BackgroundColor="LightGray"

WidthRequest="100" HeightRequest="100" />

<Border

BackgroundColor="LightGray"

WidthRequest="100" HeightRequest="100" />

127