网格添加不需要的额外垂直空间答案

【问题标题】：Grid adding unwanted extra vertical space网格添加不需要的额外垂直空间
【发布时间】：2014-11-16 00:00:36
【问题描述】：

我在用户控件中有以下 xaml：

<StackPanel VerticalAlignment="Top">
    <Grid Background="LimeGreen">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Rectangle Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" VerticalAlignment="Top" Fill="Yellow" Width="80" Height="80" />

        <Rectangle Grid.Column="1" Grid.Row="0" VerticalAlignment="Top" Fill="Red" Width="10" Height="10" />
        <Rectangle Grid.Column="1" Grid.Row="1" VerticalAlignment="Top" Fill="Red" Width="10" Height="10" />
        <Rectangle Grid.Column="1" Grid.Row="2" VerticalAlignment="Top" Fill="Red" Width="10" Height="10" />
    </Grid>
</StackPanel>

它会产生以下布局：

由于某种原因，这是在黄色方块之后添加了多余的多余空间。我想要以下布局：

仅当绿色网格位于堆栈面板内时才会出现额外空间。我可以通过以下任一方式获得正确的布局：

将绿色网格放入网格而不是堆栈面板中。
或者将第二列的宽度设置为“自动”。不过，这是不受欢迎的。

我的问题是：

第一张图片中的布局是否正确/符合预期？如果是这样，为什么要添加额外的空间？
为什么将第二列的width设置为“Auto”会去掉多余的vertical空间？
如何在第二列宽度设置为 *（星号）的堆栈面板中获取布局 #2？

【问题讨论】：

标签： xaml windows-store-apps windows-phone-8.1

【解决方案1】：

我可以用这个替代 xaml 回答问题 3，但是它使用嵌套网格绕过使用黄色方块的行跨度。理想情况下，这应该可以只使用一个网格。无论如何，这是 xaml：

<StackPanel VerticalAlignment="Top">
    <Grid Background="LimeGreen">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Rectangle VerticalAlignment="Top" Fill="Yellow" Width="80" Height="80" />

        <Grid Grid.Column="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <Rectangle Grid.Row="0" VerticalAlignment="Top" Fill="Red" Width="10" Height="10" />
            <Rectangle Grid.Row="1" VerticalAlignment="Top" Fill="Red" Width="10" Height="10" />
            <Rectangle Grid.Row="2" VerticalAlignment="Top" Fill="Red" Width="10" Height="10" />
        </Grid>
    </Grid>
</StackPanel>

我仍然难以回答问题 1 和 2。

【讨论】：