Overlay element over ContentControl's ContentPresenter - xaml

Question

I am trying to get this seemingly simple scenario to work.
I have a ContentControl MyControl, and I would like one of it's elements to overflow on top of the ContentPresenter while remaining an element of a border.
<Page
x:Class="Playground.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Playground"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="using:Playground"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.Resources>
<Style TargetType="local:MyControl" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:MyControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" BorderBrush="GreenYellow" BorderThickness="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Width="50" Height="50" Fill="Silver" HorizontalAlignment="Center"/>
<Rectangle x:Name="Overflow" Grid.Column="1" Width="100" Height="200" Fill="Gold" HorizontalAlignment="Center"/>
<Rectangle Grid.Column="2" Width="50" Height="50" Fill="Silver" HorizontalAlignment="Center"/>
</Grid>
</Border>
<ContentPresenter Grid.Row="1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<controls:MyControl Grid.Row="0" BorderBrush="Gold" BorderThickness="1">
<Ellipse Fill="Silver"/>
</controls:MyControl>
</Page>
I have tried playing with Canvas.ZIndex but I cannot get this particular scenario to work. Just to re-iterate, I would like the gold rectangle to overflow over all of the content in the ContentPresenter, but I would like the border and two squares to remain as they are.
Edit: The source for this project is here if anybody s interested in playing with it.

Answer 1

So you want the middle rectangle to be a part of your border but it should go out of the border bounds?
For this you can only use negative Margin.
In order to overlay the content you border should be the second child of the the parents Grid.
sumarizing everithing we have:
<Style TargetType="local:MyControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:MyControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ContentPresenter Grid.Row="1" />
<Border
Grid.Row="0"
BorderBrush="GreenYellow"
BorderThickness="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle
Grid.Column="0"
Width="50"
Height="50"
HorizontalAlignment="Center"
Fill="Silver" />
<!--Pay attention to Margin="0,0,0,-100"-->
<Rectangle
x:Name="Overflow"
Grid.Column="1"
Width="100"
Height="200"
Margin="0,0,0,-100"
HorizontalAlignment="Center"
Fill="Gold" />
<Rectangle
Grid.Column="2"
Width="50"
Height="50"
HorizontalAlignment="Center"
Fill="Silver" />
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Answer 2

Hacky workaround I came up with - problem is the rectangle is no longer part of the border and as such can't be easily laid out with respect to the border.
<Page
x:Class="Playground.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Playground"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="using:Playground"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.Resources>
<Style TargetType="local:MyControl" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:MyControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ContentPresenter Grid.Row="1"/>
<Border Grid.Row="0" BorderBrush="GreenYellow" BorderThickness="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Width="50" Height="50" Fill="Silver" HorizontalAlignment="Center"/>
<Rectangle Grid.Column="2" Width="50" Height="50" Fill="Silver" HorizontalAlignment="Center"/>
</Grid>
</Border>
<Rectangle Grid.Row="0" Grid.RowSpan="2" x:Name="Overflow" Grid.Column="1" Width="100" Height="200" Fill="Gold" HorizontalAlignment="Center" VerticalAlignment="Top"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<controls:MyControl Grid.Row="0" BorderBrush="Gold" BorderThickness="1">
<Ellipse Fill="Silver"/>
</controls:MyControl>
</Page>