I have two rectangles (large lines, in fact) and I want to put some user-defined control on top of it.

At first this failed:

The original XAML source was:

<usercontrols:Shuttle x:Name="Shuttle_1_Level_1" .../>

<Rectangle x:Name="Rect_Level_1_1" Grid.Row="0" Grid.ColumnSpan="34" Height="5" Stroke="Black" Fill="Black" Width="3450" RenderTransformOrigin="0.5,0.5"/>
<Rectangle x:Name="Rect_Level_1_2" Grid.Row="1" Grid.ColumnSpan="34" Height="5" Stroke="Black" Fill="Black" Width="3450" RenderTransformOrigin="0.5,0.5"/>

I found an obvious solution:
Source code:

<Rectangle x:Name="Rect_Level_1_1" Grid.Row="0" Grid.ColumnSpan="34" Height="5" Stroke="Black" Fill="Black" Width="3450" RenderTransformOrigin="0.5,0.5"/>
<Rectangle x:Name="Rect_Level_1_2" Grid.Row="1" Grid.ColumnSpan="34" Height="5" Stroke="Black" Fill="Black" Width="3450" RenderTransformOrigin="0.5,0.5"/>

<usercontrols:Shuttle x:Name="Shuttle_1_Level_1" .../>

Result:

So, you might think: great! You start with the background and work your way up. That’s a simple procedure to follow.

But it seems not to be that simple:

<Rectangle x:Name="Rect_Level_2_1" Grid.ColumnSpan="34" Height="5" Stroke="Black" Fill="Black" Width="3450" Grid.Row="0" RenderTransformOrigin="0.5,0.5" />
<Rectangle x:Name="Rect_Level_2_2" Grid.ColumnSpan="34" Height="5" Stroke="Black" Fill="Black" Width="3450" Grid.Row="1" RenderTransformOrigin="0.5,0.5" />

<usercontrols:Shuttle x:Name="...

… but this is what is looks like:

Selecting the usercontrol yields the following:

(You can clearly see the usercontrol coming in front of the second rectangle).

What’s causing this and how can I change that?

For your information: both situations happen within a Grid, having two rows and 34 columns, both grids are defined in the same way.

P.S.: I don’t know the named of the feature, describing which component comes in front (or in the back) of another component, so I don’t know the exact tag. Can anybody add this in a comment (or modify the tags of my question)?

Thanks in advance