Stack is a container-type control that allows to define the layout of its children controls.
Although the Stack control has a number of different properties, there are three in particular that define the overall layout that the component has:
- Direction: Refers to whether the stacking of children components is horizontal or vertical. By default the Stack control is vertical, but can be turned horizontal by adding
horizontalproperty when using the control.
- Alignment: Refers to how the children controls are aligned inside the container. This is controlled via
- Spacing: Refers to the space that exists between children controls inside the Stack. This is controlled via
Stacks can be nested inside one another in order to be able to configure the layout of the application as desired.
|bool||Defines whether to render Stack children horizontally.|
|bool||Defines whether the Stack should take up 100% of the height of its parent.|
|string||Defines how to align stack children horizontally: |
|string||Defines how to align stack children vertically: |
|string||A gap between stack child controls.|
|bool||Defines whether Stack children should wrap onto multiple rows or columns when they are about to overflow the size of the Stack.|
- Any control - will be rendered in the body of the stack.
Adding a new horizontal stack to a page:
Adding a stack with buttons in it:
Hiding stack from a previous example:
Removing all children of a stack: