ZOrder behavior in WPF grid?

Question

The code below contains a simple grid with a button in grid's middle column. The button width is (by intention) larger than column with it is placed into. Notice that the left part of the button is visible the right one is not. What do I have to do to get both left and right button parts invisible? Right part of the button is z-below the right grid column, but the left part of the button is z-above the left grid column. I need the left button part also to be hidden by the left grid column.

This is a simplified version of XAML where I am trying to animate kind of 'film strip'. Film should be placed z-below left and right grid column and z-above the middle part. The animation works nicely, but user see for a while controls on the left part she is not supposed to see as those should be 'covered' by the left grid column.

<Grid x:Name="LayoutRoot">
    <Border Background="Yellow" x:Name="ContentBorder">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="40"/>
                <ColumnDefinition />
                <ColumnDefinition Width="40"/>
            </Grid.ColumnDefinitions>

            <Grid Grid.Column="1" >
                <Button Content="Button" Margin="-20, 0, 0, 0" Width="240" Height="33"/>
            </Grid>
        </Grid>
    </Border>
</Grid>

Answer 1

Try adding a ClipToBounds

<Grid x:Name="LayoutRoot">
    <Border Background="Yellow" x:Name="ContentBorder">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="40"/>
                <ColumnDefinition />
                <ColumnDefinition Width="40"/>
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="1" ClipToBounds="True" >
                <Button Content="Button" Margin="-20, 0, 0, 0" Width="240" Height="33"/>
            </Grid>
        </Grid>
    </Border>
</Grid>