覆盖ContentControl的ContentPresenter上的元素

Question

我试图让这个看似简单的方案起作用。 我有一个ContentControl MyControl，我希望其中一个元素在ContentPresenter上溢出，同时保留边框元素。

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

我尝试过使用Canvas.ZIndex，但我无法让这个特定场景发挥作用。为了重新迭代，我希望黄金矩形溢出ContentPresenter中的所有内容，但我希望边框和两个方格保持不变。

编辑：如果有人有兴趣玩这个项目，那么这个项目的来源是here。

Answer 1

所以你希望中间的矩形成为边界的一部分，但它应该超出边界范围？

为此，您只能使用负保证金。

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

sumarizing everithing我们有：

<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解决方法我提出了 - 问题是矩形不再是边框的一部分，因此不能轻易地布置边框。

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