如何在元素外部绘制元素？

Question

我正在尝试将元素渲染到其父面板的边界之外,在这种情况下我正在使用堆栈面板.

<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然后在父面板上尝试它,虽然似乎都没有帮助.

UPDATE

Canvas容器似乎是对该ClipToBounds属性的尊重,但似乎没有其他容器能够尊重这一点.

UPDATE

我已经包含了我想要实现的目标的图像.棕色区域是内部堆栈面板,它们在父堆栈面板内分组,查看灰色框(表示产品定位)如何延伸超过父容器并从上面的层覆盖父产品.

这是通过在父级内部堆叠多个画布来实现的,StackPanel其中子级产品元素的Canvas.Bottom属性设置为0.虽然这确实有效,但这意味着我必须将每个产品元素设置为"左"属性,并且不能自动将布局定位到产品.

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

Answer 1

您可以通过设置Margin属性来控制渲染.例如,将其设置为负值,以便在stackpanel外部绘制矩形:

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

编辑:

以下是使用Margin属性生成类似于您的案例的示例:

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>

注意使用任意大的负数作为保证金的技巧,所以你不必计算它.