A panel which lays out its children horizontally or vertically.
Namespace
Inheritance
Control → Panel → StackPanel
Properties
Gets or sets the orientation in which child controls will be laid out. Values: Vertical (default) or Horizontal.
Gets or sets the size of the spacing to place between child controls.
AreHorizontalSnapPointsRegular
Gets or sets whether the horizontal snap points for the StackPanel are equidistant from each other.
AreVerticalSnapPointsRegular
Gets or sets whether the vertical snap points for the StackPanel are equidistant from each other.
Events
HorizontalSnapPointsChanged
EventHandler<RoutedEventArgs>
Occurs when the measurements for horizontal snap points change.
VerticalSnapPointsChanged
EventHandler<RoutedEventArgs>
Occurs when the measurements for vertical snap points change.
Usage
XAML Example - Vertical Stack
<StackPanel Spacing="10">
<TextBlock Text="Item 1" />
<TextBlock Text="Item 2" />
<TextBlock Text="Item 3" />
<Button Content="Click Me" />
</StackPanel>
XAML Example - Horizontal Stack
<StackPanel Orientation="Horizontal" Spacing="5">
<Button Content="Back" />
<Button Content="Forward" />
<Button Content="Refresh" />
</StackPanel>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Right"
Spacing="10"
Margin="10">
<Button Content="Cancel" />
<Button Content="Apply" />
<Button Content="OK" />
</StackPanel>
C# Example
var stackPanel = new StackPanel
{
Orientation = Orientation.Vertical,
Spacing = 10
};
stackPanel.Children.Add(new TextBlock { Text = "Header" });
stackPanel.Children.Add(new TextBox());
stackPanel.Children.Add(new Button { Content = "Submit" });
<StackPanel Spacing="15" Margin="20">
<TextBlock Text="User Information"
FontSize="18"
FontWeight="Bold" />
<StackPanel Spacing="5">
<TextBlock Text="Name" />
<TextBox />
</StackPanel>
<StackPanel Spacing="5">
<TextBlock Text="Email" />
<TextBox />
</StackPanel>
<StackPanel Spacing="5">
<TextBlock Text="Password" />
<TextBox PasswordChar="•" />
</StackPanel>
<Button Content="Register"
HorizontalAlignment="Stretch" />
</StackPanel>
<StackPanel Orientation="Horizontal"
Background="#F0F0F0"
Height="40">
<Button Content="New" Margin="5" />
<Button Content="Open" Margin="5" />
<Button Content="Save" Margin="5" />
<Separator Width="1" Background="Gray" Margin="5,0" />
<Button Content="Cut" Margin="5" />
<Button Content="Copy" Margin="5" />
<Button Content="Paste" Margin="5" />
</StackPanel>
Nested StackPanels
<StackPanel Orientation="Vertical" Spacing="10">
<!-- Horizontal row 1 -->
<StackPanel Orientation="Horizontal" Spacing="5">
<TextBlock Text="Label 1:" Width="100" />
<TextBox Width="200" />
</StackPanel>
<!-- Horizontal row 2 -->
<StackPanel Orientation="Horizontal" Spacing="5">
<TextBlock Text="Label 2:" Width="100" />
<TextBox Width="200" />
</StackPanel>
<!-- Button row -->
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Right"
Spacing="5">
<Button Content="Cancel" />
<Button Content="OK" />
</StackPanel>
</StackPanel>
Responsive Design Pattern
public class ResponsiveStackPanel : StackPanel
{
protected override Size MeasureOverride(Size availableSize)
{
// Switch orientation based on available width
if (availableSize.Width < 600)
{
Orientation = Orientation.Vertical;
}
else
{
Orientation = Orientation.Horizontal;
}
return base.MeasureOverride(availableSize);
}
}
Layout Behavior
StackPanel grows unbounded in the stacking direction:
- Vertical: Grows vertically, constrains children horizontally
- Horizontal: Grows horizontally, constrains children vertically
Children are encouraged to be as large as they like in the stacking direction. In the perpendicular direction, StackPanel assumes the maximum size of its children.
Orientation Enum
Children are laid out vertically from top to bottom.
Children are laid out horizontally from left to right.
Source File
StackPanel.cs:1-478
See Also