如何使元素能够在其容器外绘制？

Question

如何使元素能够在其容器外绘制？

4

我正在尝试使元素在其父面板的边界之外呈现，本例中我正在使用堆栈面板。

<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上试过，然后试了一下其父级Panel，但两者都没有帮助。

更新

似乎只有Canvas容器支持ClipToBounds属性，其他容器似乎都不支持。

更新

我包含了一个图像来说明我的问题。棕色区域是内部的堆栈面板，它们被分组在父堆栈面板中，可以看到灰色方框（代表产品位置）超出了父容器并覆盖了来自上层的父产品。

这是通过在父StackPanel中堆叠多个Canvas实现的，其中子产品元素的Canvas.Bottom属性设置为0。虽然这样做可行，但意味着我必须为每个产品元素设置其“Left”属性，并且无法使布局自动定位产品。

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

- Brett Ryan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Stanislav Kniazev · Accepted Answer

您可以通过设置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>

注意使用任意大的负数作为Margin，这样就不必计算它。