StackLayout
StackLayout organizes elements in a one-dimensional stack, either horizontally or vertically. It is often used as a parent layout, which contains other child layouts. The default orientation is vertical. However, we should not use StackLayout to generate a layout similar to a table by using nested StackLayout horizontally and vertically. The following code shows an example of bad practice:
<StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="Name:" />
<Entry Placeholder="Enter your name" />
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="Age:" />
<Entry Placeholder="Enter your age" />
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="Address:" />
<Entry Placeholder="Enter your address" />
</StackLayout>
</StackLayout>
In the preceding code, we used a StackLayout as the parent layout, where the default orientation is vertical. Then, we nested multiple StackLayout controls with a horizontal orientation to generate a form to fill in. We should use the Grid control to do this.
StackLayout is a frequently used layout control. There are two sub-types of StackLayout that help us directly design the layout horizontally or vertically.
HorizontalStackLayout
HorizontalStackLayout is a one-dimensional horizontal stack. For example, we can generate a row like so:
<HorizontalStackLayout>
<Label Text="Name:" />
<Entry Placeholder="Enter your name" />
</HorizontalStackLayout>
VerticalStackLayout
VerticalStackLayout is a one-dimensional vertical stack. For example, we can display an error message after a form is submitted with an error like so:
<VerticalStackLayout> <Label Text="The Form Is Invalid" /> <Button Text="OK"/> </VerticalStackLayout>
Grid
Grid organizes elements in rows and columns. We can specify rows and columns with the RowDefinitions and ColumnDefinitions properties. In the previous example, we created a form where the user can enter their name, age, and address using a nested StackLayout. We can do this in the Grid layout like so:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Text="Name:" />
<Entry Grid.Column="1"
Placeholder="Enter your name" />
<Label Grid.Row="1" Text="Age:" />
<Entry Grid.Row="1" Grid.Column="1"
Placeholder="Enter your age" />
<Label Grid.Row="2" Text="Address:" />
<Entry Grid.Row="2"
Grid.Column="1"
Placeholder="Enter your address" />
</Grid>
In the preceding example, we created a Grid layout with two columns and three rows.
FlexLayout
FlexLayout is similar to a StackLayout in that it displays child elements either horizontally or vertically in a stack. The difference is a FlexLayout can also wrap its children if there are too many to fit in a single row or column. As an example, we can create a FlexLayout with five labels in a row. If we specify the Direction property as Row, these labels will be displayed in one row. We can also specify the Wrap property, which can cause the items to wrap to the next row if there are too many items to fit in a row:
<FlexLayout Direction="Row" Wrap="Wrap">
<Label Text="Item 1" Padding="10"/>
<Label Text="Item 2" Padding="10"/>
<Label Text="Item 3" Padding="10"/>
<Label Text="Item 4" Padding="10"/>
<Label Text="Item 5" Padding="10"/>
</FlexLayout>
AbsoluteLayout
AbsoluteLayout is a layout type that we can use to position elements using X, Y, width, and height.
The X and Y positions are relative to the top-left corner of the parent element. Width and height are concerned with the size of the child element.
In the following example, we are creating a BoxView control in the layout at (0, 0) with both width and height equal to 10:
<AbsoluteLayout Margin="20">
<BoxView Color="Silver"
AbsoluteLayout.LayoutBounds="0, 0, 10, 10" />
</AbsoluteLayout>