如果网格行包含折叠元素，如何使 WPF 窗口可调整大小

Question

我在设计可调整大小的 WPF 窗口时遇到问题。 结果应该是窗口元素自动调整大小，同时通过鼠标拖动改变窗口的宽度和高度。

基本面板是一个 Dockpanel，其第一个元素是位于顶部的 ToolBar。 然后是一个有两行的网格。 在每一行中都有一个带有内部元素的 DockPanel。 其中一些元素可以被 Visibilty.Collapsed 隐藏（在最终版本中将由属性生成）。 出于测试目的，我在 ToolBar 之后有两个 DockPanel，并且我已将 XAML 文件中第一个的可见性设置为 Collapsed。 当我启动应用程序时，窗口似乎是正确的。

但是当我单击窗口底部以通过拖动更改高度时，第二个 Dockpanel 变小并且折叠的 Dockpanel 所在的位置变得可见。

我做错了什么？

这是我的 XAML：

<Window x:Class="WPFResizable.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFResizable"
        mc:Ignorable="d"
        Title="MainWindow"
        SizeToContent="Height"
        Width="525">

    <DockPanel VerticalAlignment="Stretch" Background="AliceBlue">
        <Button DockPanel.Dock="Top" Height="40" Content="ToolBar"/>

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <DockPanel Grid.Row="0" Grid.Column="0" VerticalAlignment="Stretch" Visibility="Collapsed">
                <GroupBox Margin="5"
                          Header="Group 1">
                    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
                        <TextBox Text="Test 1"
                                 MinWidth="400"
                                 MinHeight="100"
                                 Margin="5"/>
                    </ScrollViewer>
                </GroupBox>
            </DockPanel>

            <DockPanel Grid.Row="1" Grid.Column="0" VerticalAlignment="Stretch">
                <GroupBox Margin="5"
                          Header="Group 2">
                    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
                        <TextBox Text="Test 2"
                                 MinWidth="400"
                                 MinHeight="100"
                                 Margin="5"/>
                    </ScrollViewer>
                </GroupBox>
            </DockPanel>
        </Grid>
    </DockPanel>
</Window>

Answer 1

如果我正确理解您要执行的操作，我认为这将满足您的要求。

1. VerticalAlignment="Stretch" 在 Grid 子节点上是多余的，如果只有一列，则无需在子节点上指定 Grid.Column。

2. 您的第一个网格行had Height="*"，导致它占据了网格高度的一半，无论其内容是否可见。我编写了一个带有触发器的样式，当它的内容不可见时，该触发器将该行的高度更改为Auto。这取决于该行中是否只有一个元素，但由于您在那里有一个DockPanel，您似乎已经在按照这些思路进行思考。

   <Grid DockPanel.Dock="Bottom">
       <Grid.RowDefinitions>
           <RowDefinition>
               <RowDefinition.Style>
                   <Style TargetType="RowDefinition">
                       <!-- 
                       Must set the default in a Setter instead of an attribute, or 
                       dependency property precedence will override the trigger
                       below. 
                       -->
                       <Setter Property="Height" Value="*" />
                       <Style.Triggers>
                           <DataTrigger 
                               Binding="{Binding Visibility, ElementName=TopChildPanel}"
                               Value="Collapsed"
                               >
                               <Setter Property="Height" Value="Auto" />
                           </DataTrigger>
                       </Style.Triggers>
                   </Style>
               </RowDefinition.Style>
           </RowDefinition>
           <RowDefinition Height="*"/>
       </Grid.RowDefinitions>
   
       <DockPanel x:Name="TopChildPanel" Grid.Row="0" Visibility="Visible">
           <GroupBox Margin="5"
                     Header="Group 1">
               <ScrollViewer 
                   HorizontalScrollBarVisibility="Auto" 
                   VerticalScrollBarVisibility="Auto">
                   <TextBox Text="Test 1"
                            MinWidth="400"
                            MinHeight="100"
                            Margin="5"/>
               </ScrollViewer>
           </GroupBox>
       </DockPanel>
   
       <DockPanel Grid.Row="1">
           <GroupBox 
               Margin="5"
               Header="Group 2">
               <ScrollViewer 
                   HorizontalScrollBarVisibility="Auto" 
                   VerticalScrollBarVisibility="Auto"
                   >
                   <TextBox 
                       Text="Test 2"
                       MinWidth="400"
                       MinHeight="100"
                       Margin="5"/>
               </ScrollViewer>
           </GroupBox>
       </DockPanel>
   </Grid>