如何启用元素在其容器外绘制？ [英] How do I enable an element to paint outside its container?

问题描述

我试图使元素在其父面板的边界之外进行渲染，在这种情况下，我使用的是堆栈面板。

I'm trying to get elements to render outside the bounds of their parent panel, in this case I'm using a stack panel.

<StackPanel ClipToBounds="False" Width="200" Orientation="Horizontal" Height="50"
            Background="{DynamicResource TierBackground}">
    <Rectangle ClipToBounds="False" VerticalAlignment="Bottom" Width="25" Height="75"
               Fill="#FF4D6072" />
</StackPanel>

设置 ClipToBounds 似乎不起作用任何东西，我都先在 Rectangle 上尝试，然后在父面板上尝试，尽管似乎都没有帮助。

Setting ClipToBounds doesn't seem to do anything, I first tried it on the Rectangle and then on the parent Panel though neither seemed to help.

更新

似乎 Canvas 容器兑现了 ClipToBounds 属性，但似乎没有其他容器可以兑现。

It appears the Canvas container honours the ClipToBounds property, but no other container seems to honour this.

更新

我已经包含了我要达到的目标的图像。棕色区域是内部堆叠面板，它们被分组在父堆叠面板中，请查看灰色框（代表产品位置）如何越过父容器并覆盖上层的父产品。

I've included an image of what I'm trying to achieve. The brown areas are the inner stack panels which are grouped inside the parent stack panel, see how the gray boxes (representing product positioning) extend past the parent container and cover parent product from tiers above.

这是通过将多个画布堆叠在父 StackPanel 内，子产品元素具有其 Canvas.Bottom 属性设置为0。这确实起作用，这意味着我必须将每个产品元素设置为左属性，并且不能自动使产品的布局位置。

This was achieved using multiple canvas' stacked inside a parent StackPanel with child product elements having their Canvas.Bottom property set to 0. While this does work it means I have to set each product elements "Left" property and can't have the layout position the product automatically.

StackPanels http://img263.imageshack.us/img263/ 8682 / stackpanels.jpg

推荐答案

您可以通过设置Margin属性来控制渲染。例如，将其设置为负值，以便在堆栈面板的外部绘制矩形：

You can control the rendering by setting the Margin property. For example, set it to negative value so your rectangle is painted outside the stackpanel:

<Rectangle ClipToBounds="False" VerticalAlignment="Bottom" Width="25" Height="75"
                   Margin="-50,-50,0,0"
           Fill="#FF4D6072" />

编辑：

下面是一个示例使用Margin属性产生与您的情况类似的东西：

Here's an example for using Margin property to produce something similar to your case:

http://img139.imageshack.us/img139/8357/rectangleoutsidepanel.gif

<Window x:Class="RectangleOutsidePanel.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
    <DockPanel LastChildFill="False">
        <StackPanel Background="LightBlue" Height="50" DockPanel.Dock="Top"/>
        <StackPanel Orientation="Horizontal" Height="50" Background="Brown" DockPanel.Dock="Top">
            <Rectangle 
                VerticalAlignment="Bottom" Width="30" Height="75" Margin="5,-500,5,0"
                Fill="#FF4D6072" />
            <Rectangle 
                VerticalAlignment="Bottom" Width="25" Height="80" Margin="5,-500,5,0"
                Fill="#FF4D6072" />
        </StackPanel>
    </DockPanel>
</Grid>
</Window>

请注意为保证金使用任意大的负数的技巧，因此您不必计算它。

Note the trick of using arbitrarily large negative number for Margin so you don't have to calculate it.

这篇关于如何启用元素在其容器外绘制？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！