How to use DockStyle.Fill for standard controls in WPF?

Question

I'm used from windows forms, that I create a panel, place controls inside it and give them DockStyle.Fill to max out their size to the surrounding panel.

In WPF I want to have the same. I have a TabControl and I want its size to fill as much of the form as possible. I have a ribbon control (RibbonControlsLibrary) and want the rest of the form to be filled with the TabControl at max size.

(I do not want to dock controls like docking in Visual Studio, just old docking mechanisms)

Answer 1

The WPF equivalent of WinForms' DockStyle.Fill is:

HorizontalAlignment="Stretch" VerticalAlignment="Stretch"

This is the default for almost controls, so in general you don't have to do anything at all to have a WPF control fill its parent container: They do so automatically. This is true for all containers that don't squeeze their children to minimum size.

Common Mistakes

I will now explain several common mistakes that prevent HorizontalAlignment="Stretch" VerticalAlignment="Stretch" from working as expected.

1. Explicit Height or Width

One common mistake is to explicitly specify a Width or Height for a control. So if you have this:

<Grid>
  <Button Content="Why am I not filling the window?" Width="200" Height="20" />
  ...
</Grid>

Just remove the Width and Height attributes:

<Grid>
  <Button Content="Ahhh... problem solved" />
  ...
</Grid>

2. Containing panel squeezes control to minimum size

Another common mistake is to have the containing panel squeezing your control as tight as it will go. For example a vertical StackPanel will always squeeze its contents vertically as small as they will go:

<StackPanel>
  <Button Content="Why am I squished flat?" />
</StackPanel>

Change to another Panel and you'll be good to go:

<DockPanel>
  <Button Content="I am no longer squished." />
</DockPanel>

Also, any Grid row or column whose height is "Auto" will similarly squeeze its content in that direction.

Some examples of containers that don't squeeze their children are:

• ContentControls never squeeze their children (this includes Border, Button, CheckBox, ScrollViewer, and many others)
• Grid with a single row and column
• Grid with "*" sized rows and columns
• DockPanel doesn't squeeze its last child
• TabControl doesn't squeeze its content

Some examples of containers that do squeeze their children are:

• StackPanel squeezes in its Orientation direction
• Grid with an "Auto" sized row or column squeezes in that direction
• DockPanel squeezes all but its last child in their dock direction
• TabControl squeezes its header (what is displayed on the tab)

3. Explicit Height or Width further out

It's amazing how many times I see Grid or DockPanel given an explicit height and width, like this:

<Grid Width="200" Height="100">
  <Button Content="I am unnecessarily constrainted by my containing panel" />
</Grid>

In general you never want to give any Panel an explicit Height or Width. My first step when diagnosing layout problems is to remove every explicit Height or Width I can find.

4. Window is SizeToContent when it shouldn't be

When you use SizeToContent, your content will be squeezed to minimum size. In many applications this is very useful and is the correct choice. But if your content has no "natural" size then you'll probably want to omit SizeToContent.

Answer 2

You can do what you want by just saying DockPanel LastChildFill="True" and then making sure what you want to be the filler is actually the last child!

The Grid is the beast of a layout that you can make do most anything, but the DockPanel is usually the right choice for your outermost layout panel. Here is an psuedocode example:

<DockPanel LastChildFill="True">
    <MyMenuBar DockPanel.Dock="Top"/>
    <MyStatus DockPanel.Dock="Bottom"/>

    <MyFillingTabControl />
</DockPanel>