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上尝试，然后在父级面板上尝试，但似乎都没有帮助。

更新

似乎Canvas容器尊重ClipToBounds属性，但似乎没有其他容器符合此要求。

更新

我已经包含了我想要实现的目标的图像。棕色区域是内部堆栈面板，它们在父堆栈面板中分组，查看灰色框（表示产品定位）如何延伸到父容器之外，并从上面的层覆盖父产品。

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

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>

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

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

1 个答案: