Элемент Overlay над 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>