Xaml 将元素覆盖在ContentControl上'；内容演示者

我正试图让这个看似简单的场景发挥作用。 我有一个ContentControl

MyControl

，我希望它的一个元素溢出到ContentPresenter的顶部，同时保留一个边框元素

我曾尝试过使用Canvas.ZIndex，但我无法让这个特定场景正常工作。为了再次迭代，我希望黄金矩形溢出到

ContentPresenter

中的所有内容上，但我希望边框和两个正方形保持原样

---

编辑：这个项目的来源是是否有人对它感兴趣。

我提出了一个很有技巧的解决方法-问题是矩形不再是边框的一部分，因此不能很容易地相对于边框进行布局

---

所以您希望中间的矩形成为边框的一部分，但它应该超出边框边界

为此，只能使用负边距

为了覆盖内容，边框应该是父网格的第二个子元素

总结我们所拥有的一切：

<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>

<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>

<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>