xaml - 为什么圆圈会被切断？

Question

步骤:

1. 制作一个全新的“空白应用程序(通用Windows)”
2. 设置目标和最低版本:“Windows 10 Creators Update(10.0；Build 15063)”
3. 将以下代码添加到 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:您通过在 Grid 中添加一个 1 像素的空行来剪切椭圆。

问题存在于多个层面。您的外部 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) 作为 网格大小。

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

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

---

为了使这一点更加清晰，我对您的 XAML 进行了一些调整，在网格之外添加了另一个 StackPanel 并添加了一个 Button。正如您所看到的，按钮绘制在椭圆的顶部，正如下面在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，我们会有相同的行为。但是，将 Button 移至 XAML 声明中的顶部(并将 Grid.Row 保持为 1，使其位于椭圆下方)，您会注意到它现在位于椭圆后面，因为 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>