StackPanel

The StackPanel is one of the WPF panels that only provides limited resizing abilities to its child items. It will automatically set the HorizontalAlignment and VerticalAlignment properties of each of its children to Stretch, as long as they don't have explicit sizes specified. In these cases alone, the child elements will be stretched to fit the size of the containing panel. This can be easily demonstrated as follows:

<Border Background="Black" Padding="5"> 
  <Border.Resources> 
    <Style TargetType="{x:Type TextBlock}"> 
      <Setter Property="Padding" Value="5" /> 
      <Setter Property="Background" Value="Yellow" /> 
      <Setter Property="TextAlignment" Value="Center" /> 
    </Style> 
  </Border.Resources> 
  <StackPanel TextElement.FontSize="14"> 
    <TextBlock Text="Stretched Horizontally" /> 
    <TextBlock Text="With Margin" Margin="20" /> 
    <TextBlock Text="Centered Horizontally" 
      HorizontalAlignment="Center" /> 
    <Border BorderBrush="Cyan" BorderThickness="1" Margin="0,5,0,0"
      Padding="5" SnapsToDevicePixels="True"> 
      <StackPanel Orientation="Horizontal"> 
        <TextBlock Text="Stretched Vertically" /> 
        <TextBlock Text="With Margin" Margin="20" /> 
        <TextBlock Text="Centered Vertically" 
          VerticalAlignment="Center" /> 
      </StackPanel> 
    </Border> 
  </StackPanel> 
</Border> 

This panel literally lays each child element out one after the other, vertically by default, or horizontally when its Orientation property is set to Horizontal. Our example uses both orientations, so let's take a quick look at its output before continuing:

Our whole example is wrapped in a Border element with a black background. In its Resources section, we declared a few style properties for the TextBlock elements in our example. Inside the border, we declare our first StackPanel control, with its default vertical orientation. In this first panel, we have three TextBlock elements and another StackPanel wrapped in a border.

The first TextBlock element is automatically stretched to fit the width of the panel. The second adds a margin, but would otherwise also be stretched across the width of the panel. The third, however, has its HorizontalAlignment property explicitly set to Center and so it is not stretched to fit by the panel.

The inner panel has three TextBlock elements declared inside it and has its Orientation property set to Horizontal. Its children are therefore laid out horizontally. Its border is colored, so that it is easier to see its bounds. Note the use of the SnapsToDevicePixels property set on it.

As WPF uses device-independent pixel settings, thin straight lines can sometimes lie across individual pixel boundaries and appear anti-aliased. Setting this property to true will force the element to be rendered exactly in line with the physical pixels, using device-specific pixel settings and forming a clearer, sharper line.

The first TextBlock element in the lower panel is automatically stretched to fit the height of the panel. As with the elements in the upper panel, the second adds a margin, but would otherwise also be stretched across the height of the panel. The third, however, has its VerticalAlignment property explicitly set to Center and so it is not stretched vertically to fit by the panel.

As a side note, we have used the hexadecimal entity to add a new line in some of our text strings. This could also have been achieved using the TextBlock.TextWrapping property and hard coding a Width for each element, but this way is obviously far simpler.