为什么网格在没有足够空间时会剪辑？答案

【问题标题】：Why does Grid clip when not given enough space?为什么网格在没有足够空间时会剪辑？
【发布时间】：2017-05-23 18:01:07
【问题描述】：

考虑以下代码：

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

    <Grid
        Grid.Row="1"
        Height="100">
        <Rectangle
            Fill="Red" />

        <Rectangle
            Fill="Yellow"
            Width="50"
            Height="50"
            Margin="0,-100,0,0" />
    </Grid>
</Grid>

这很好用，黄色矩形的一半显示在红色上方（即叠加上一行的任何内容）。现在，如果我将 RowDefinition 的高度更改为 99 而不是 100，这样内部 Grid 就不会得到它要求的空间，黄色的 Rectangle 就会被剪裁。有谁知道这是为什么，有什么解决方法吗？我知道理想情况下不应该为内部 Grid 定义高度，但这不在我的控制范围内......

【问题讨论】：

找到了解决方法；将行高设置为 Auto 并为内部网格提供负的底部边距。仍然没有关于剪辑的线索。

标签： xaml layout uwp

【解决方案1】：

不确定幕后发生了什么，但我怀疑当计算网格的空间并且它的高度大于可用时，它会被剪裁 - 每个元素都会被检查是否适合该行。一旦高度低于可用高度，这可能会被省略 - 因此负边距可能会起作用。至少我是这么想的。如果您想了解更准确的信息，您可以尝试挖掘at reference source。

但是，如果您希望网格跟随行的高度 - 我建议使用 VerticalAlignment：

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

    <Grid Grid.Row="1" VerticalAlignment="Stretch">
        <Rectangle Fill="Red"/>
        <Rectangle Fill="Yellow" Width="50" Height="50" Margin="0,-100,0,0" />
    </Grid>
</Grid>

我个人不喜欢元素定位的固定边距，并且可能有更好的方法来排列元素，尽管这取决于您的需要。

【讨论】：