Stack

A FluentStack is a container-type component that can be used to arrange its child components in a horizontal or vertical stack.

Characteristics

Although the FluentStack component has a number of different parameters, there are some in particular that define the overall layout that the component has:

1. Orientation: Refers to whether the stacking of child components is horizontal (default) or vertical.
2. Alignment: Refers to how the child components are aligned inside the container. This is controlled via the HorizontalAlignment and VerticalAlignment parameters.
3. Spacing: Refers to the space that exists between child components inside the Stack. This is controlled via the HorizontalGap and VerticalGap parameters.

Wrapping

Aside from the previously mentioned parameters, there is another parameter called Wrap that determines if items overflow the FluentStack container or wrap around it. The wrap property only works in the direction of the FluentStack, which means that the children components can still overflow in the perpendicular direction (i.e. in a vertical FluentStack, items might overflow horizontally and vice versa).

Nesting

Stacks can be nested inside one another in order to be able to configure the layout of the application as desired.

Examples

Default example

Using the FluentStack component

Documentation