.NET 4.0+

WPF Layout Controls - StackPanel

by Richard Carr, published at http://www.blackwasp.co.uk/WPFStackPanel.aspx

The fifth part of the Windows Presentation Foundation Fundamentals tutorial continues the examination of the layout controls. The second WPF layout control is the StackPanel, which automatically creates a horizontal or vertical stack of controls.

The StackPanel

The StackPanel provides a way to arrange a set of WPF controls in a column or row automatically. Unlike the Canvas control, StackPanels do not require their children to have co-ordinates. Indeed, the layout control is so simple that is does not have any attached properties.

By default, StackPanels have a vertical orientation. The first child control appears at the top of the StackPanel's assigned area. The child control stretches to the full width of the panel but has the minimum required height for its content, unless its alignment options are modified. The second child control appears directly beneath the first and subsequent controls are stacked beneath each other in the order that they are declared in XAML.

You can change the StackPanel alignment to horizontal, making the child controls be stacked from left to right instead of top to bottom. Each control's width is automatically sized and the height stretched to fill the container. In either orientation, if the child controls cannot all be fitted within the StackPanel they are clipped.

StackPanel Example

We can create a sample StackPanel in a new WPF application project in Visual Studio. The XAML below defines a window containing a StackPanel. The panel holds two labels, two text boxes and a pair of buttons. The background for the StackPanel is orange so that you can easily see its extent.

<Window x:Class="StackPanelDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StackPanel Demo"
        Height="200"
        Width="250">
    <StackPanel Background="Orange">
        <Label Content="First Name" />
        <TextBox x:Name="FirstName"/>
        <Label Content="Last Name"/>
        <TextBox x:Name="LastName"/>
        <Button Content="OK"/>
        <Button Content="Cancel"/>
    </StackPanel>
</Window>

The above XAML gives the following results. Note that the text boxes and buttons fill the StackPanel's width.

Orientation

The Orientation property allows you to change the placement of child controls. You can set the property to either Vertical or Horizontal. The next sample places the two buttons within a second, nested StackPanel. The inner panel has a horizontal orientation so that the buttons appear side by side. Its background is yellow to show its positioning.

<StackPanel Background="Orange">
    <Label Content="First Name" />
    <TextBox x:Name="FirstName"/>
    <Label Content="Last Name"/>
    <TextBox x:Name="LastName"/>
    <StackPanel Orientation="Horizontal" Background="Yellow">
        <Button Content="OK"/>
        <Button Content="Cancel"/>
    </StackPanel>
</StackPanel>

This gives the following results. Note that the inner StackPanel follows the sizing rules of its parent. It stretches to the full width of its container but has the smallest height possible. The two buttons stretch vertically to fill the height of the yellow, horizontally orientated StackPanel but their width is determined by their contents. This is why the button widths do not match.

Common Properties

We can apply some of the common properties mentioned in the Canvas article to change the overly colourful design into something more appropriate for a business application. In the XAML below I've removed the background colours and added some width, height, alignment and margin properties.

<StackPanel Margin="10">
    <Label Content="First Name" />
    <TextBox x:Name="FirstName"/>
    <Label Content="Last Name"/>
    <TextBox x:Name="LastName"/>
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Height="60">
        <Button Content="OK" Width="85" VerticalAlignment="Center" Margin="0 0 10 0" />
        <Button Content="Cancel" Width="85" VerticalAlignment="Center"/>
    </StackPanel>
</StackPanel>

The results are shown below.