Quick Start Tutorial: Creating Universal Apps Via Xamarin: Stack Layout and Layout Options - Part Seven

Read the previous parts of the series here,

1. Quick Start Tutorial: Creating Universal Apps Via Xamarin - Part One
2. Quick Start Tutorial: Creating Universal Apps Via Xamarin - Part Two
3. Quick Start Tutorial: Creating Universal Apps via Xamarin: Label and Button - Part Three
4. Quick Start Tutorial: Creating Universal Apps Via Xamarin: Device class - Part Four
5. Quick Start Tutorial: Creating Universal Apps via Xamarin: Device Class (cont.) - Part Five
6. Quick Start Tutorial: Creating Universal Apps Via Xamarin: Entry Control - Part Six

StackLayout

Stack layout is a container control or a layout control (like stackpanel in wpf) to add one more control at a time. The control has been arranged automatically, whether it is a horizontal or a vertical property.

1. Orientation
2. Spacing

Orientation

Orientation is used to arrange the controls horizontally or vertically and the default option is vertical.

Spacing

Spacing property is used to give the space between all the controls, inside the stack layout.

Default value of this property is “6.0” (double datatype). 

Example



Code sample



C# code sample



Content Property in Page

Content property accepts only one child of the elements, adds multiple controls into the page, and all the controls should be added into the layout controls (ex: StackLayout) and layout controls are assigned into the content property.


Nested StackLayout

Inside stack, we can define one or more controls also.


 
Layout options

Generally, all Xamarin controls contain two layout options, i.e, horizontal options and vertical options. This layout option is used to occupy the parent control's remaining space.

Type of Layout options



The type of options have been divided into the three sets, namely:

1. Start, center, end
2. Expand
3. Fill

Start: Set as top of the control (left side).
Center: Control is placed in the center of the parent. 
End: Control is placed in the bottom right of the parent. 

Example




Expand Options

It is based on the remaining parent size. This option occupies the size of the parent control (i.e.) remaining Size = parent size - (total size of all the child elements).




Control is placed on the position and it expands. 

Fill

Fill is used to stretch the full size of the control.




As you can see, of the two options, it’s with the expand option, but there is no space to expand. The last option is to fill and stretch. 

Fill And Expand

This option is used to stretch the control and get it filled.