网格布局无法正确显示我的组框

Question

在这个简单的例子中，我有 5 个GroupBoxes，直接在一个Grid 下。我尝试声明 1 列和 5 行，以便它们垂直堆叠。我没有使用StackPanel，因为我希望以后能够智能地调整这些组框的大小（我希望前4个的大小最小，让最后一个GroupBox占据所有空间剩下的）。

如下所示，所有内容都出现在同一个“单元格”中。但是，在 Blend 4 的设计器模式下，我的网格似乎显示了 5 个单元格（4 个为空）...删除行和列声明并没有改变任何事情。

<UserControl
    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"
    mc:Ignorable="d"
    x:Class="WpfControlLibrary1.MainControl"
    x:Name="MultiVol" MinHeight="520.12">

    <Grid>
        <Grid.Background>
                <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
                    <GradientStop Color="White" Offset="0.966"/>
                    <GradientStop Color="#FFD7D4FF"/>
                </LinearGradientBrush>
        </Grid.Background>

        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <GroupBox Margin="8,0" BorderBrush="#FF88B1D8">
            <GroupBox.Header>
                <WrapPanel>
                <Label Content="General" Background="#00000000" Foreground="#FF0033FF" FontWeight="Bold" FontFamily="/WpfControlLibrary1;component/Fonts/#Tahoma" />    
                </WrapPanel>
            </GroupBox.Header>

            <UniformGrid Columns="2">
                <Label Content="RICs" />
                <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
                <Label Content="Preference" />
                <UniformGrid VerticalAlignment="Center" Columns="2" Rows="1">
                    <RadioButton GroupName="preference" Content="Exotic" IsChecked="False" />
                    <RadioButton GroupName="preference" Content="Flow" IsChecked="True" />
                </UniformGrid>
                <Label Content="Live updates" />
                <CheckBox IsChecked="False" VerticalAlignment="Center"/>
            </UniformGrid>  
        </GroupBox>

        <GroupBox Margin="8,0" BorderBrush="#FF88B1D8">
            <GroupBox.Header>
                <WrapPanel>
                <CheckBox IsChecked="True" VerticalAlignment="Center" />
                <Label Content="Volatility" Background="#00000000" Foreground="#FF0033FF" FontWeight="Bold" FontFamily="/WpfControlLibrary1;component/Fonts/#Tahoma" /> 
                </WrapPanel>
            </GroupBox.Header>
            <UniformGrid Columns="2">
                <Label Content="Spots"></Label>
                <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
                <Label Content="Hist. references" />
                <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
                <Label Content="Tenors" />
                <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
            </UniformGrid>
        </GroupBox>

        <GroupBox  Margin="8,0" BorderBrush="#FF88B1D8">
            <GroupBox.Header>
                <WrapPanel>
                <CheckBox IsChecked="True" VerticalAlignment="Center" />
                <Label Content="Skew" Background="#00000000" Foreground="#FF0033FF" FontWeight="Bold" FontFamily="/WpfControlLibrary1;component/Fonts/#Tahoma" />   
                </WrapPanel>
            </GroupBox.Header>
            <UniformGrid Columns="2">
                <Label Content="Spot Intervals"></Label>
                <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
                <Label Content="Hist. references" />
                <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
                <Label Content="Tenors" />
                <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
                <Label Content="Compute 'Power'" />
                <CheckBox IsChecked="False" VerticalAlignment="Center"/>
            </UniformGrid>
        </GroupBox>

        <GroupBox Margin="8,0" BorderBrush="#FF88B1D8">
            <GroupBox.Header>
                <WrapPanel>
                <CheckBox IsChecked="True" VerticalAlignment="Center" />
                <Label Content="Term structure" Background="#00000000" Foreground="#FF0033FF" FontWeight="Bold" FontFamily="/WpfControlLibrary1;component/Fonts/#Tahoma" /> 
                </WrapPanel>
            </GroupBox.Header>
            <UniformGrid Columns="2">
                <Label Content="Spots" />
                <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
                <Label Content="Tenors" />
                <TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
            </UniformGrid>
        </GroupBox>

        <GroupBox Margin="8,0" BorderBrush="#FF88B1D8">
            <GroupBox.Header>
                <WrapPanel>
                <Label Content="Live updates" Background="#00000000" Foreground="#FF0033FF" FontWeight="Bold" FontFamily="/WpfControlLibrary1;component/Fonts/#Tahoma" />   
                </WrapPanel>
            </GroupBox.Header>
            <ListView MinHeight="100" Background="{x:Null}">
                <ListView.View>
                    <GridView AllowsColumnReorder="False">
                        <GridViewColumn Header="RIC" />
                        <GridViewColumn Header="Last tick" />
                    </GridView>
                </ListView.View>
            </ListView>
        </GroupBox>         
    </Grid>
</UserControl>

Answer 1

您需要指定GroupBox 控件的Grid.Row 属性。 Grid 不会自动对齐它们。在您的图像中，您的所有控件都位于第一个网格行中。将附加属性Grid.Row="0" 添加到每个GroupBox 以指定行。请注意，行索引是从零开始的。

此外，如果您希望最后一行填充剩余空间，您将需要在 RowDefinitions 的其余部分设置特定高度，或者将它们全部设置为自动（使用 Height="auto"）。使用后者意味着每一行都会根据其内容调整大小。将最终的RowDefinition 保留为没有明确设置高度将导致它拉伸并填充剩余的可用空间。目前，由于您的RowDefinitions 都没有设置高度，因此它们在可用空间内的大小均相同。

Here 是一个解释Grid 控件布局如何工作的教程。