How to force element overflow Grid within it - windows-phone-7

Question

I have following layout
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid Height="100" Background="Wheat" Opacity="0.4">
<StackPanel Orientation="Vertical" VerticalAlignment="Bottom">
<Slider Orientation="Vertical" Height="170" HorizontalAlignment="Center" Background="White" />
<Button Content="Btn" Width="100"/>
</StackPanel>
</Grid>
</Grid>
In this scenario Grid will clip rest of Slider which overflows Grid.
So I’m getting result like this
While I want to get result like this
So how can I force Slider to overflow Grid without clipping? Is it any alternatives solutions to this?
In fact I have more complicated layout so using Canvas instead of Grid is now welcome.

Answer 1

You can do this using a single Grid and playing with its childrens' Grid.RowSpan and Grid.ColumnSpan properties.
<Grid x:Name="LayoutRoot"
Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="3"
Height="100"
Fill="Wheat"
Opacity="0.4" />
<StackPanel Grid.Row="1"
Grid.RowSpan="2"
Grid.Column="1">
<Slider Orientation="Vertical"
Height="170"
HorizontalAlignment="Center"
Background="White" />
<Button Content="Btn"
Width="100" />
</StackPanel>
</Grid>