Question

我在用户控件中有以下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>

并产生以下布局：

extra space

出于某种原因，这会在黄色正方形之后添加额外的不需要的空间。我想要以下布局：

correct

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

将绿色网格放在网格中而不是堆叠面板中。
或者将第二列的宽度设置为＆＃34; Auto＆＃34;。但这是不受欢迎的。

我的问题是：

第一张图片中的布局是否正确/预期？如果是这样，为什么要增加额外的空间？
为什么要将第二列的 width 设置为＆＃34; Auto＆＃34;摆脱额外的垂直空间？
如何在第二列宽度设置为*（星号）的堆栈面板中获得布局＃2？

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

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

1 个答案: