Chapter 5 User Interface Essentials

<Border

BackgroundColor="LightGray"

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

</FlexLayout>

Each of the properties you are using allows you to customize where each item is positioned during the rendering process and how they will move around in the application if it is resized. For further information on the possible ways of configuring the FlexLayout, read the Microsoft documentation at https://learn.microsoft.com/dotnet/maui/userinterface/layouts/flexlayout.

Your BoardDetailsPage only needs controls positioned vertically so a FlexLayout feels like an overly complicated layout for this purpose.

Grid

I love Grids. They are usually my go-to layout option, mainly because I have become used to thinking about how they lay out controls and because they tend to allow you to keep your visual tree depth shallow. The layout essentially works by allowing you to define a set of rows and

columns and then define which control should be displayed in which row/ column combination.

Figure 5-4 shows how controls can be positioned inside a Grid.

128

Chapter 5 User Interface Essentials

Figure 5-4.  Grid layout overview

Controls inside a Grid are allowed to overlay each other, which can provide an extra tool in a developers toolbelt when needing to show/ hide controls. Controls in the Grid are arranged by first defining the

ColumnDefinitions and RowDefinitions. Let’s take a look at how to create the above layout with a Grid.

<Grid

ColumnDefinitions ="*,2*,250,Auto" ColumnSpacing="20"

Margin="30"

RowDefinitions="*,*"

RowSpacing="20">

<Border

BackgroundColor="LightGray"

Grid.Column="0" Grid.Row="0" />

<Border

129

Chapter 5 User Interface Essentials

BackgroundColor="LightGray"

Grid.Column="1"

Grid.Row="1" />

<Border

BackgroundColor="LightGray"

Grid.Column="2" Grid.Row="0" />

<Border

BackgroundColor="LightGray"

Grid.Column="3"

Grid.Row="1"

WidthRequest="30" HeightRequest="30" />

</Grid>

You can see that you have created columns using a variety of different options:

•\ 250: This is a fixed width of 250

•\ Auto: This means that the column will grow in width based on its contents. It is recommended to use this option sparingly as it will result in the Grid control having to measure its children and force a rerender of itself and the other children

•\ *: This is proportional and will result in the leftover space being allocated out. In this example, two columns use the * notation. This results in those two columns being allocated 1/3 and 2/3 of the remaining width respectively. This is because * is actually considered 1*.

130

Chapter 5 User Interface Essentials

In your scenario, you are going to need multiple groups of controls. For this reason, I believe grids will just make it slightly more complicated for you.

HorizontalStackLayout

The name really gives this away. It positions its children horizontally. The HorizontalStackLayout is not responsible for providing sizing information to its children, so the children are responsible for calculating their own size.

Figure 5-5 shows how controls can be positioned inside a

HorizontalStackLayout.

Figure 5-5.  HorizontalStackLayout overview

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

<HorizontalStackLayout

Spacing="20"

Margin="30">

<Border

BackgroundColor="LightGray"

131