Skip to main content
Version: 11.0.x

StackPanel

The StackPanel arranges its child controls by stacking them horizontally or vertically. The stack panel is often used to arrange a small subsection of the UI on a page.

Inside a stack panel, if the size property perpendicular to the stack on a child control is not set, the child control will stretch to fill the available space. For example in horizontal orientation, the height of child controls will stretch if not set.

In the direction of the stack, the stack panel will always expand to fit all the child controls.

Useful Properties​

You will probably use these properties most often:

PropertyDescription
OrientationSets the direction of the stack. Choose from horizontal or vertical (default).
SpacingCreates an even spacing between the child controls.

Example​

The following XAML shows how to create a vertical stack panel.

<StackPanel Width="200">
    <Rectangle Fill="Red" Height="50"/>
    <Rectangle Fill="Blue" Height="50"/>
    <Rectangle Fill="Green" Height="100"/>
    <Rectangle Fill="Orange" Height="50"/>
</StackPanel>

The result shows the child controls stretched to fit the width, and the overall height of the stack panel equal to the sum of the child control heights.

More Information​

info

For the complete API documentation about this control, see here.

info

View the source code on GitHub StackPanel.cs