2017-02-15 37 views
3

我试图让这个看似简单的场景工作。 我有一个ContentControl MyControl,我希望其中一个元素在ContentPresenter之上溢出,同时保留一个边框元素。通过ContentControl的ContentPresenter覆盖元素

enter image description here

<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如果有人有兴趣玩它。

回答

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

哈克解决方法我想出了 - 问题是矩形不再是边界的一部分,因此无法轻松地对边界进行布局。

Result

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