How to: Create a StackPanel

This example shows how to create a StackPanel.

Example

A StackPanel allows you to stack elements in a specified direction. By using properties that are defined on StackPanel, content can flow both vertically, which is the default setting, or horizontally.

The following example vertically stacks five TextBlock controls, each with a different Border and Background, by using StackPanel. The child elements that have no specified Width stretch to fill the parent window; however, the child elements that have a specified Width, are centered within the window.

The default stack direction in a StackPanel is vertical. To control content flow in a StackPanel, use the Orientation property. You can control horizontal alignment by using the HorizontalAlignment property.

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" WindowTitle="StackPanel Sample">
  <StackPanel>
    <Border Background="SkyBlue" BorderBrush="Black" BorderThickness="1">
      <TextBlock Foreground="Black" FontSize="12">Stacked Item #1</TextBlock>
    </Border>
    <Border Width="400" Background="CadetBlue" BorderBrush="Black" BorderThickness="1">
      <TextBlock Foreground="Black" FontSize="14">Stacked Item #2</TextBlock>
    </Border>
    <Border Background="LightGoldenRodYellow" BorderBrush="Black" BorderThickness="1">
      <TextBlock Foreground="Black" FontSize="16">Stacked Item #3</TextBlock>
    </Border>
    <Border Width="200" Background="PaleGreen" BorderBrush="Black" BorderThickness="1">
      <TextBlock Foreground="Black" FontSize="18">Stacked Item #4</TextBlock>
    </Border>
    <Border Background="White" BorderBrush="Black" BorderThickness="1">
      <TextBlock Foreground="Black" FontSize="20">Stacked Item #5</TextBlock>
    </Border>
  </StackPanel>
</Page>

See Also

Concepts

Panels Overview

Reference

StackPanel

Other Resources

StackPanel How-to Topics

StackPanel Samples