Question

我想重新制作应用程序的布局，所以我在更改原始项目之前制作了一个测试应用程序来获取我想要的内容。

我想要实现的非常简单，我想在应用程序的右上角有一个3个按钮，并且在它们下方有一个tabcontrol，占用了所有可用空间。

在那个tabcontrol中，我现在只使用第一个TabItem。在该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>

带有分组框的WPF Dockpanel没有占用所有可用空间

1 个答案: