Why is the circle getting cut off? - xaml

Question

Steps:
Make a brand new "Blank App (Universal Windows)"
Set Target and Minimum Version: "Windows 10 Creators Update (10.0; Build 15063)"
Add the code below to MainPage.xaml and run the app.
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>
Should see this:
Why is the green circle getting cut off? Further to that, if you set ChangeHeightRow.Height to 0, it looks like this:
What is going on? I would expect the circle to never be cut off...maybe I'm wrong?

Answer 1

TL;DR: You are clipping of the Ellipse by having an empty row of 1 pixel in your Grid.
The problem is on multiple levels. Your outer Grid has a Width and Height set. Next your RowDefinition has a Height set and your Ellipse is of a bigger size than both heights.
<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>
By setting these sizes, you are allowing other controls to come closer to the inner controls than they would if you would use Auto as sizing for the rows and nothing (=auto) as Grid size.
In your initial code, you have a Grid row with the Ellipse and an empty row of 1 pixel high. By default XAML controls have a Z-axis with items declared at the bottom of your XAML file being the topmost control in the visual layers. So for your Grid, your second row is on top of your first row in case of overlap. Since the Ellipse leaks outside of the row, the second row is drawn over it and clips your Ellipse.
By setting the height to 0, the second row is no longer drawn and can't clip your control.
To make this more clear, I have tweaked your XAML a bit, adding another StackPanel outside your grid and adding a Button. As you can see, the Button is drawn on top of the Ellipse, as it's defined below in XAML and thus getting a higher visual layer on the Z-axis.
<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>
If we change the StackPanel to a Grid, we have the same behavior. However moving the Button to the top in the XAML declaration (and keeping Grid.Row on 1 so it's below the Ellipse), you'll notice that it's now behind the Ellipse because of the Z-layers ordered differently.
<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>