WPF Layout - The StackPanel
Introduction
One of the more basic panels provided in WPF is the StackPanel. As you would expect, it stacks its child elements one after the other - by default stacking them vertically. You can however override this setting and change the Orientation to Horizontal. As with the WrapPanel, I think that in the majority of cases you will use this panel as part of a larger, more complex display.
To begin with, to see an example of it as the root element, you can use the following code snippet, which simply stacks a TextBlock and three Buttons vertically:
StackPanel As Root Element
<Window x:Class="StackPanelSingle"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Demo" Height="180" Width="180" MinHeight="165" MinWidth="140">
<StackPanel >
<TextBlock Margin="6" Padding="3" HorizontalAlignment="Center"
FontFamily="Verdana" FontSize="12" FontWeight="Bold">
Make a choice:
</TextBlock>
<Button Margin="3,8,3,4" Padding="2"> Do Something </Button>
<Button Margin="3,4,3,4" Padding="2"> Something Else </Button>
<Button Margin="3,4,3,4" Padding="2"> Something Else </Button>
</StackPanel>
</Window>
When run, the display looks like this:-
You may have noticed that I inserted MinHeight and MinWidth values to ensure that all the items remain visible.
I didn't however set maximum widths or heights (although I could have), so when the size is increased, so is the width of the buttons and the amount of unused lower window increased.
Often this will not be what you want as the display can soon become disproportionate. You could use the Window's MaxWidth and MaxHeight properties to restrict the total size of the display. Alternatively you can set the HorizontalAlignment property of the Buttons so that they are changed from the default of "Stretch" (as demonstrated in the screenshot above) to a setting of "Center".
With this change made, the Buttons remain at the correct size needed to display their content (which in this case is simple text). As the form is enlarged the Buttons remain at their original size, but move within the StackPanel so that they remain centered.
You can still set MaxWidth (and Max Height) values on the Window if you wish.
Title="Demo" Height="180" Width="180" MinHeight="165" MinWidth="140" MaxWidth="300">
So the amended XAML now would only allow the following display width to be set by the user:
StackPanel As Child Element
The following example places two StackPanels side by side in a Grid. (We will be dealing with the very versatile Grid control next). The first panel has the default orientation of Vertical; the second one has its Orientation set to "Horizontal".
The XAML code used is as follows:
<Window x:Class="StackPanelDemo1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="StackPanelDemo1" Height="300" Width="660">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel >
<TextBlock Margin="6" Padding="3" HorizontalAlignment="Center" FontFamily="Verdana" FontSize="12" FontWeight="Bold"> Make a choice: </TextBlock>
<Button Margin="3,8,3,4" Padding="2"> Do Something </Button>
<Button Margin="3,4,3,4" Padding="2"> Something Else </Button>
<Button Margin="3,4,3,4" Padding="2"> Something Else </Button>
</StackPanel>
<Border Grid.Column="1" BorderBrush="Black" BorderThickness="4" Margin="5" Background="LightBlue"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Padding="2" >
<StackPanel Orientation="Horizontal" >
<ListBox Margin="3,3,9,3" Padding="2" HorizontalAlignment="Center">
<ListBoxItem> Document 1 </ListBoxItem>
<ListBoxItem> Document 2 </ListBoxItem>
<ListBoxItem> Document 3 </ListBoxItem>
</ListBox>
<ListBox Margin="3,3,29,3" Padding="2" >
<ListBoxItem> Page 1 </ListBoxItem>
<ListBoxItem> Page 2 </ListBoxItem>
<ListBoxItem> Page 3 </ListBoxItem>
</ListBox>
<DocumentViewer Grid.Column="1" Margin="2" Name="DocumentViewer1" Width="322" />
</StackPanel>
</Border>
</Grid>
</Window>
I think you can quite clearly see the nesting used. Just for display clarity, to show the two separate entities I enclosed the second StackPanel in a Border, but as you will discover later there are several other ways of delineating available to you. The Grid ColumnDefinition Width setting decree that the widths of both parts are sufficiently wide to accommodate the content, but don't stretch the content if the Window width is increased.
We could do much more to improve this display, but for now the purpose of this item is to introduce you to the basic StackPanel and see it in action. Used as part of a larger display it can be a very handy tool.