Overview

The LayoutOptions structure is used to control alignment and expansion options for a View, relative to its parent, and consists of the following values:

• Start
• Center
• End
• Fill
• StartAndExpand
• CenterAndExpand
• EndAndExpand
• FillAndExpand

The Start, Center, End, and Fill values are used to define the view's alignment within the parent view, and the StartAndExpand, CenterAndExpand, EndAndExpand, and FillAndExpand values are used to define whether the view will occupy more space if available.

The sample application demonstrates a StackLayout that contains a number of Button controls. The StackLayout is gray, and each Button is separated by a small yellow BoxView. This enables the space being occupied by each control to be easily viewed. Each Button occupies the whole width of the layout because its HorizontalOptions property is not set. However, the VerticalOptions property of each Button is set to a different LayoutOptions value, and clicking a Button changes the StackLayout.VerticalOptions property to the indicated LayoutOptions value.

Alignment

Alignment controls how a view is positioned within its parent view when the parent view contains unused space (that is, the parent view is larger than the combined size of all of its children). Note that when all the space in a parent view is used, the alignment options have no effect.

Start

LayoutOptions.Start is used to define a View that will appear at the start of its parent. For horizontal alignment, this positions the View on the left hand side of the parent View, and for vertical alignment, it positions the View at the top of the parent View. The following screenshots demonstrate vertically aligning a StackLayout using LayoutOptions.Start, where each Button uses the indicated LayoutOptions value:

This layout occurs because the StackLayout is vertically aligned to the top of the parent View. However, setting each Button.VerticalOptions property to a different LayoutOptions value has no additional effect because the StackLayout does not contain any unused space.

Center

LayoutOptions.Center is used to define a View that will appear centered in its parent. The View is horizontally or vertically centered. The following screenshots demonstrate vertically aligning a StackLayout using LayoutOptions.Center, where each Button uses the indicated LayoutOptions value:

This layout occurs because the StackLayout is vertically aligned to the center of the parent View. However, setting each Button.VerticalOptions property to a different LayoutOptions value has no additional effect because the StackLayout does not contain any unused space.

End

LayoutOptions.End is used to define a View that will appear at the end of its parent. For horizontal alignment, this positions the View on the right hand side of the parent View, and for vertical alignment, it positions the View at the bottom of the parent View. The following screenshots demonstrate vertically aligning a StackLayout using LayoutOptions.End, where each Button uses the indicatedLayoutOptions value:

This layout occurs because the StackLayout is vertically aligned to the bottom of the parent View. However, setting each Button.VerticalOptions property to a different LayoutOptions value has no additional effect because the StackLayout does not contain any unused space.

Fill

LayoutOptions.Fill is used to define a View that will occupy the full size of its parent. For horizontal alignment, this ensures that the View will fill the width of the parent View, and for vertical alignment, it ensures that the View will fill the height of the parent View. The following screenshots demonstrate vertically aligning a StackLayout using LayoutOptions.Fill, where each Button uses the indicated LayoutOptions value:

This layout occurs because the StackLayout is vertically aligned to fill the height of the parent View. Setting each Button.VerticalOptions property to a different LayoutOptions value results in different Button alignments, because the StackLayout is larger than the combined requested size of its children. Therefore, each Button uses its vertically specified LayoutOptions behavior.

Expansion

Expansion controls whether a view will occupy more space if available. If a parent view contains unused space (that is, the parent view is larger than the combined size of all of its children), the unused space is given to any child views that use the AndExpand suffix. Note that when all the space in a parent view is used, the expansion options have no effect.

StartAndExpand

LayoutOptions.StartAndExpand is used to define a View that will appear at the start of its parent, and that will expand to occupy more space if available. The following screenshots demonstrate vertically aligning a StackLayout using LayoutOptions.StartAndExpand, where each Button uses the indicated LayoutOptions value:

This layout occurs because the StackLayout is vertically aligned to the top of the parent View, but expansion doesn't occur because the parent view isn't larger than its children. Setting each Button.VerticalOptions property to a different LayoutOptions value has no additional effect because the StackLayout does not contain any unused space.

CenterAndExpand

LayoutOptions.CenterAndExpand is used to define a View that will appear centered in its parent, and that will expand to occupy more space if available. The following screenshots demonstrate vertically aligning a StackLayout using LayoutOptions.CenterAndExpand, where each Button uses the indicated LayoutOptions value:

This layout occurs because the StackLayout is vertically aligned to the center of the parent View, but expansion doesn't occur because the parent view isn't larger than its children. Setting each Button.VerticalOptions property to a different LayoutOptions value has no additional effect because the StackLayout does not contain any unused space.

EndAndExpand

LayoutOptions.EndAndExpand is used to define a View that will appear at the end of its parent, and that will expand to occupy more space if available. The following screenshots demonstrate vertically aligning a StackLayout using LayoutOptions.EndAndExpand, where each Button uses the indicated LayoutOptions value:

This layout occurs because the StackLayout is vertically aligned to the bottom of the parent View, but expansion doesn't occur because the parent view isn't larger than its children. Setting each Button.VerticalOptions property to a different LayoutOptions value has no additional effect because the StackLayout does not contain any unused space.

FillAndExpand

LayoutOptions.FillAndExpand is used to define a View that will occupy the full size of its parent, and that will expand to occupy more space if available. The following screenshots demonstrate vertically aligning a StackLayout using LayoutOptions.FillAndExpand, where each Button uses the indicated LayoutOptions value:

This layout occurs because the StackLayout is vertically aligned to fill the height of the parent View. Setting each Button.VerticalOptions property to a different LayoutOptions value results in different Button alignments, because the StackLayout is larger than the combined requested size of its children. Therefore, additional space is uniformly given to all the Button controls with the AndExpand suffix, with the alignment of the Button within its space being controlled by its LayoutOptions value.

Summary

This article demonstrated the effect that each LayoutOptions value has on the alignment and expansion of a view, relative to its parent. The Start, Center, End, and Fill values are used to define the view's alignment within the parent view, and the StartAndExpand, CenterAndExpand, EndAndExpand, and FillAndExpand values are used to define whether the view will occupy more space if available.