The evils of StackPanel

When I first started coding and reading up on WPF, it seemed like stackpanels were pushed fairly hard as a way to organize controls within your parent control. While Grid is the default opening control on a WPF page, it seemed like you generally saw stackpanels in most sample WPF code. Over time, however, i came to learn that while stackpanels are a quick way to put out some test/sample code, in general they should really never be used in professional code. For the most part, you should be using a Grid.

I would say this for almost all container controls except for WrapPanels, which do offer something useful if you need that kind of functionality. One of the main issues with a stack panel is that the contents of the stack panel determine the size of the stackpanel, as opposed to the Grid, where the Grid itself determines the size of it's contents (this is without setting values like height/width explicitly).

Here's an example with some code I came across:

<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<Label VerticalAlignment="Center" HorizontalAlignment="Left" >Description</Label>
<TextBox MinWidth="100" VerticalContentAlignment ="Stretch" VerticalAlignment="Center" HorizontalAlignment="Left"/>
</StackPanel>

Which leads to the following:










which doesn't look good at all. You'll notice even in the last image that the textbox actually runs off the edge of the parent control. Sure, you could explicitly set the width of the textbox or the Stackpanel itself, but what we want is something that will resize based on the size of the window or control holding this stackpanel. It's generally best to stay away from declaring absolute widths and heights if you can avoid it, since you never really know what resolution your user will have, and you're missing out on some great functionality.

Now lets take basically the same code, and make a Grid instead:

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".2*" />
<ColumnDefinition Width=".8*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Left" >Description</Label>
<TextBox Grid.Column="1" VerticalContentAlignment ="Top" VerticalAlignment="Center" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Height="60" TextWrapping="Wrap" />
</Grid>

With that code, we get something like this:



Which keeps the textbox at a size constant to it's parent, and allows itself to resize based on that parents size, which is much, much better.