代码之家 › 专栏 › 技术社区 › Brett Ryan

如何使元素在其容器外进行绘制?

rendering canvas xaml wpf .net

Brett Ryan · 技术社区 · 15 年前

我试图让元素在父面板的边界之外进行渲染,在本例中,我使用的是堆栈面板。

<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 集装箱 剪报 财产,但似乎没有其他容器尊重这一点。

更新

我已经包含了我想要实现的目标。棕色区域是内部堆栈面板,分组在父堆栈面板中,请参见灰色框(表示产品定位)如何延伸到父容器并从上面的层覆盖父产品。

这是通过将多个画布堆叠在一个父对象中实现的。 StackPanel 子产品元素具有 Canvas.Bottom 属性设置为0。虽然这确实有效,但这意味着我必须设置每个产品元素的“左”属性,并且不能自动设置产品的布局位置。

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

1 回复 | 直到 13 年前

Stanislav Kniazev 15 年前

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

注意使用任意大的负数作为保证金的技巧,这样你就不必计算它了。

推荐文章

Shishir Karki · 在react(typescript)项目上未渲染图像

11 月前