Док-панель WPF с групповыми ящиками не занимает все доступное пространство

Question

Я хотел переделать макет приложения, поэтому я сделал тестовое приложение, чтобы получить то, что я хочу, прежде чем вносить изменения в исходный проект.

То, чего я хочу добиться, довольно просто: мне нужно 3 кнопки в правом верхнем углу приложения и вкладка под ними, занимающая все доступное пространство.

И в этом tabcontrol я пока использую только первый TabItem. В этом табите я хочу, чтобы 3 столбца, средний - единственный, который увеличивается, когда пользователь изменяет размер приложения.

Каждый из этих столбцов содержит групповые блоки, а внутри них есть информация. Эти групповые блоки - моя проблема ... они просто не делают то, что я хочу, чтобы они делали.

Мое тестовое приложение выглядит так:

<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 основные проблемы: средний групповой ящик не занимает все место, а нижний групповой ящик не стыкуется до самого дна.

Любая подсказка?

Решение:

<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

Используйте Grid вместо 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>