StackLayout Alignment

The StackLayout provides multiple options by which you can control the Horizontal or Vertical alignment of the content displayed inside the component.

Horizontal Alignment

To set the StackLayout horizontal alignment, use the align property. The horizontal key controls the alignment of the inner elements based on the X axis.

The available values are:

• start—Uses the start point of the container.
• center—Uses the central point of the container.
• end—Uses the end point of the container.
• (Default)stretch—Stretches the items to fill the width of the container.

Vertical alignment

To set the StackLayout vertical alignment, use the align property. The vertical key controls the alignment of the inner elements based on the Y axis.

The available values are:

• top—Uses the top point of the container.
• middle—Uses the middle point of the container.
• bottom—Uses the bottom point of the container.
• (Default)stretch—Stretches the items to fill the height of the container.

Suggested Links

• API Reference of the StackLayoutProps