Question

I wanted to remake the layout of an application, so I made a test app to get what I want before making changes to the original project.

What I want to achieve is quite simple, I want a 3 buttons on the top right of the application, and a tabcontrol right under them, taking all the available space.

And in that tabcontrol, I only use the first TabItem for now. In that tabitem, I want 3 columns, the middle being the only one that grows when the user resizes the application.

Each of these columns contain groupboxes, and inside those there is information. These groupboxes are my problem… they just don’t do what I want them to do.

My test app looks like this:

<Window x:Class="WpfDockingTests.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="774" Width="991">
    <DockPanel>
        <StackPanel DockPanel.Dock="Top" Orientation="Horizontal" FlowDirection="RightToLeft">
            <Button 
                Height="31"                
                Width="126" 
                Content="Button 1"
                HorizontalAlignment="Right"/>
            <Button
                Height="31"                
                Width="126" 
                Content="Button 2"
                HorizontalAlignment="Right"/>
        </StackPanel>

        <TabControl DockPanel.Dock="Top">
            <TabItem Header="FirstTab">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="375" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="280" />
                    </Grid.ColumnDefinitions>
                    <DockPanel Grid.Column="0" Grid.Row="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                        <GroupBox DockPanel.Dock="Top" Height="300"/>
                        <GroupBox DockPanel.Dock="Top">
                            <DockPanel VerticalAlignment="Stretch">
                                <Button Name="a1" Content="Test" DockPanel.Dock="Top"/>
                                <Button Name="a2" Content="Test2" DockPanel.Dock="Top" />
                                <Button Name="a3" Content="Test3" DockPanel.Dock="Top"/>
                            </DockPanel>
                        </GroupBox>
                        <GroupBox DockPanel.Dock="Bottom" Height="200"/>
                    </DockPanel>                    
                </Grid>
            </TabItem>
            <TabItem Header="SecondTab" />
        </TabControl>
    </DockPanel>
</Window>

2 main problems: the middle groupbox does not take up all the space, and the bottom groupbox does not dock all the way to the bottom.

Any clue?

Solution:

<TabControl DockPanel.Dock="Top">
            <TabItem Header="FirstTab">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="375" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="280" />
                    </Grid.ColumnDefinitions>
                    <Grid Grid.Column="0" Grid.Row="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="300" />
                            <RowDefinition Height="*" />
                            <RowDefinition Height="200" />
                        </Grid.RowDefinitions>
                        <GroupBox Grid.Row="0"/>
                        <GroupBox Grid.Row="1">
                            <DockPanel VerticalAlignment="Stretch">
                                <Button Name="a1" Content="Test" DockPanel.Dock="Top"/>
                                <Button Name="a2" Content="Test2" DockPanel.Dock="Top" />
                                <Button Name="a3" Content="Test3" DockPanel.Dock="Bottom"/>
                            </DockPanel>
                        </GroupBox>
                        <GroupBox Grid.Row="2"/>
                    </Grid>                    
                </Grid>
            </TabItem>
            <TabItem Header="SecondTab" />
        </TabControl>

Answer 1

Use Grid instead of DockPanel:

<Grid>
   <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="*"/>
   </Grid.RowDefinitions>
   <StackPanel Grid.Row="0" FlowDirection="RightToLeft" Orientation="Horizontal">
      <Button Width="126" Height="31" HorizontalAlignment="Right" Content="Button 1"/>
      <Button Width="126" Height="31" HorizontalAlignment="Right" Content="Button 2"/>
   </StackPanel>
   <TabControl Grid.Row="1">
      <TabItem Header="FirstTab">
         <Grid>
            <Grid.RowDefinitions>
               <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
               <ColumnDefinition Width="375"/>
               <ColumnDefinition Width="*"/>
               <ColumnDefinition Width="280"/>
            </Grid.ColumnDefinitions>
            <GroupBox Height="300" Grid.Column="0"/>
            <GroupBox Grid.Column="1">
               <StackPanel>
                  <Button Name="a1" Content="Test"/>
                  <Button Name="a2" Content="Test2"/>
                  <Button Name="a3" Content="Test3"/>
               </StackPanel>
            </GroupBox>
            <GroupBox Height="200" DockPanel.Dock="Bottom"/>
         </Grid>
      </TabItem>
      <TabItem Header="SecondTab"/>
   </TabControl>
</Grid>