This is an overview of the most common usage of StackLayout. For more information about the available properties, methods, or events, head over to the complete API documentation for StackLayout.
<StackLayout>
is a layout container that lets you stack the child elements vertically (default) or horizontally.
The following example creates a vertical stack of 3 equally-sized elements. Items are stretched to cover the entire width of the screen. Items are placed in the order they were declared in.
<StackLayout backgroundColor="#3c495e">
<Label text="first" height="70" backgroundColor="#43b883"/>
<Label text="second" height="70" backgroundColor="#289062"/>
<Label text="third" height="70" backgroundColor="#1c6b48"/>
</StackLayout>
The following example creates a horizontal stack of 3 equally-sized elements. Items are stretched to cover the entire height of the screen. Items are placed in the order they were declared in.
<StackLayout orientation="horizontal" backgroundColor="#3c495e">
<Label text="first" width="70" backgroundColor="#43b883"/>
<Label text="second" width="70" backgroundColor="#289062"/>
<Label text="third" width="70" backgroundColor="#1c6b48"/>
</StackLayout>
The following example creates a diagonal stack of items with responsive sizes. Items are vertically stacked.
<StackLayout backgroundColor="#3c495e">
<Label text="left" horizontalAlignment="left"
width="33%" height="70" backgroundColor="#43b883"/>
<Label text="center" horizontalAlignment="center"
width="33%" height="70" backgroundColor="#289062"/>
<Label text="right" horizontalAlignment="right"
width="33%" height="70" backgroundColor="#1c6b48"/>
<Label text="stretch" horizontalAlignment="stretch"
height="70" backgroundColor="#43b883"/>
</StackLayout>
The following example creates a diagonal stack of items with responsive sizes. Items are horizontally stacked.
<StackLayout orientation="horizontal" backgroundColor="#3c495e">
<Label text="top" verticalAlignment="top"
width="70" height="33%" backgroundColor="#43b883"/>
<Label text="center" verticalAlignment="center"
width="70" height="33%" backgroundColor="#289062"/>
<Label text="bottom" verticalAlignment="bottom"
width="70" height="33%" backgroundColor="#1c6b48"/>
<Label text="stretch" verticalAlignment="stretch"
width="70" backgroundColor="#43b883"/>
</StackLayout>
Name | Type | Description |
---|---|---|
orientation | String | Specifies the stacking direction. Valid values: vertical and horizontal .Default value: vertical . |
None.