Question

步骤：

制作一个全新的＆＃34;空白应用程序（通用Windows）＆＃34;
设置目标和最低版本：＆＃34; Windows 10 Creators更新（10.0; Build 15063）＆＃34;
将以下代码添加到MainPage.xaml并运行应用程序。

MainPage.xaml中

<Grid Width="128" Height="120">
    <Grid.RowDefinitions>
        <RowDefinition Height="120" />
        <RowDefinition Height="1" x:Name="ChangeHeightRow" />
    </Grid.RowDefinitions>
    <Grid>
        <Canvas Background="Red">
            <Ellipse Width="140" Height="140" Fill="Green" />
        </Canvas>
    </Grid>
</Grid>

应该看到这个：

为什么绿色圆圈会被切断？除此之外，如果您将ChangeHeightRow.Height设置为0，它看起来像这样：

发生了什么事？我希望永远的圈子被切断......也许我错了？

Answer 1

TL; DR：您通过在Ellipse中拥有1个像素的空行来裁剪Grid。

问题出在多个层面。您的外部Grid设置了Width和Height。接下来，RowDefinition设置Height，Ellipse的大小超过两个高度。

<Grid Width="128" Height="120">
    <Grid.RowDefinitions>
        <RowDefinition Height="120" />
        <RowDefinition Height="1" x:Name="ChangeHeightRow" />
    </Grid.RowDefinitions>
    <Grid>
        <Canvas Background="Red">
            <Ellipse Width="140" Height="140" Fill="Green" />
        </Canvas>
    </Grid>
</Grid>

通过设置这些大小，您可以让其他控件更接近内部控件，而不是使用Auto作为行的大小而不是（{auto}）作为Grid大小

在您的初始代码中，您有Grid行Ellipse和空行1像素高。默认情况下，XAML控件具有Z轴，在XAML文件底部声明的项目是可视图层中最顶层的控件。因此，对于您的网格，如果重叠，您的第二行将位于第一行的顶部。由于Ellipse在行外泄漏，第二行会在其上绘制并剪切您的Ellipse。

通过将高度设置为0，不再绘制第二行，并且无法剪切您的控件。

为了更清楚地说明这一点，我稍微调整了您的XAML，在网格外添加了另一个StackPanel并添加了Button。如您所见，Button位于Ellipse之上，因为它在XAML中定义如下，从而在Z轴上获得更高的可视层。

<StackPanel Width="130">
    <Grid Width="128" Height="120">
        <Grid.RowDefinitions>
            <RowDefinition Height="120" />
            <RowDefinition Height="0" x:Name="ChangeHeightRow" />
        </Grid.RowDefinitions>
        <Grid>
            <Canvas Background="Red">
                <Ellipse Width="140" Height="140" Fill="Green" />
            </Canvas>
        </Grid>
    </Grid>
    <Button Background="Black" Foreground="White">Test</Button>
</StackPanel>

如果我们将StackPanel更改为Grid，我们会有相同的行为。然而，在XAML声明中将Button移动到顶部（并保持Grid.Row为1，使其位于Ellipse下方），您会发现它现在位于Ellipse之后，因为Z层的排序方式不同。

<Grid Width="130">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Button Background="Black" Foreground="White" Grid.Row="1">Test</Button>
    <Grid Width="128" Height="120" Grid.Row="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="120" />
            <RowDefinition Height="0" x:Name="ChangeHeightRow" />
        </Grid.RowDefinitions>
        <Grid>
            <Canvas Background="Red">
                <Ellipse Width="140" Height="140" Fill="Green" />
            </Canvas>
        </Grid>
    </Grid>
</Grid>

为什么圈子会被切断？

1 个答案: