How do I enable an element to paint outside its container?

Question

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>

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.

UPDATE

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

UPDATE

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.

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.

Answer 1

If your child element needs to be displayed outside of the parent container, it is probably a sign that you need to redesign your layout structure.

The only way I know to render a control outside of its parent is to apply a render transform to it.

Answer 2

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" />

EDIT:

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

<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.