Chapter 5 User Interface Essentials

WidthRequest="100" />

<Border

BackgroundColor="LightGray" WidthRequest="100" />

<Border

BackgroundColor="LightGray" WidthRequest="100" />

</HorizontalStackLayout>

You wish to layout your controls vertically so you can guess where this is going, although you will actually use one to group some of your inner controls.

VerticalStackLayout

The name really gives this away. It positions its children vertically. The VerticalStackLayout follows the same sizing rules as the

HorizontalStackLayout, so the children are responsible for calculating their own size.

And there you have it: something that arranges its children vertically, which is exactly what you need!

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

VerticalStackLayout.

132

Chapter 5 User Interface Essentials

Figure 5-6.  VerticalStackLayout overview

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

<VerticalStackLayout

Spacing="20"

Margin="30">

<Border

BackgroundColor="LightGray" HeightRequest="100" />

<Border

BackgroundColor="LightGray" HeightRequest="100" />

<Border

BackgroundColor="LightGray" HeightRequest="100" />

</VerticalStackLayout>

133

Chapter 5 User Interface Essentials

Let’s go ahead and create it. Inside the Border you added earlier, add the following to your BoardDetailsPage.xaml file.

<VerticalStackLayout>

<VerticalStackLayout

Padding="20">

<Label

Text="Name" FontAttributes="Bold" />

<Entry />

<Label

Text="Layout" FontAttributes="Bold" />

<HorizontalStackLayout>

<RadioButton

x:Name="FixedRadioButton" Content="Fixed" />

<!--<RadioButton Content="Freeform" />-->

</HorizontalStackLayout>

<VerticalStackLayout>

<Label

Text="Number of Columns" FontAttributes="Bold" />

<Entry Keyboard="Numeric" />

<Label

Text="Number of Rows"

134