なぜ円が途切れるのですか？

Question

手順：

1. ブランドの新しい "空白のApp（ユニバーサルWindows）" を
2. ターゲットの設定と最小Versionメイク： "Windowsの10クリエーターアップデート（10.0; 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> 

は、この表示されるはずです。なぜ緑色の円が切り取らなっている

を？あなたは0にChangeHeightRow.Heightを設定した場合、さらにそれに、それは次のようになります。

何が起こっていますか？私は円がに決してが切断されることを期待するだろう...多分私は間違っている？

Answer 1

TL; DR：Gridに1ピクセルの空の行があることによってEllipseがクリッピングされています。

問題は複数のレベルにあります。あなたの外側の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> 

は、あなたが他のコントロールを使用すると、行とGridサイズなど何もない（=自動）のためのサイジングとしてAutoを使用する場合、彼らは希望よりも内部統制への接近を可能にしています。

最初のコードでは、Ellipseと1ピクセル高い空の行を持つGridの行があります。既定では、XAMLコントロールにはZ軸があり、XAMLファイルの下部に宣言された項目はビジュアルレイヤーの最上位のコントロールになります。あなたのグリッドでは、2行目が重なった場合の最初の行の上にあります。 Ellipseが行の外に漏れているので、2番目の行がその上に描画され、Ellipseがクリップされます。

高さを0に設定すると、2行目が描画されなくなり、コントロールをクリップできなくなります。

---

これをより明確にするために、私はあなたのグリッド外の別のStackPanelを追加し、Buttonを追加し、少しあなたのXAMLを微調整しています。ご覧のように、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を変更した場合、我々は同じ動作をします。しかし、ボタンをXAML宣言で一番上に移動します（グリッドを保持します）。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>