Stack Panel
The stack panel 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:
| Property | Description |
|---|---|
Orientation | Sets the direction of the stack. Choose from horizontal or vertical (default). |
Spacing | Creates 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
For the complete API documentation about this control, see here.
View the source code on GitHub StackPanel.cs