WPF Dockbox與groupboxes沒有佔用所有可用空間

Question

我想重新構建一個應用程序的佈局，所以我做了一個測試應用程序，在對原始項目進行更改之前獲得我想要的內容。

我想要實現的很簡單，我需要應用程序右上角的3個按鈕以及它們下方的tabcontrol，並佔用所有可用空間。

而在那個tabcontrol中，我現在只使用第一個TabItem。在那個tabitem中，我需要3列，中間是用戶調整應用程序時唯一增長的列。

這些列中的每一列都包含groupboxes，並且裏面有信息。這些羣組是我的問題......他們只是不做我想讓他們做的事情。

我的測試程序是這樣的：

<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> 

兩個主要問題：中間組框不佔用所有的空間，底部組框不停靠一路底部。

任何線索？

解決方案：

<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>