ZOrder behavior in a WPF grid?

Question

The code below contains a simple grid with a button in the middle column of the grid. The width of the button (optional) is larger than the column it fits into. Notice that the left side of the button is visible on the right. What do I need to do to get both the left and right parts of the buttons invisible? The right side of the z button is below the right grid column, but the left side of the button is z above the left grid column. I need the left side of the button to also be hidden by the left column of the grid.

This is a simplified version of XAML where I am trying to revitalize the movie strip. The film should be placed z-below the left and right columns of the grid, and z - above the middle part. The animation works beautifully, but the user sees that on the left side she should not see how it should be "closed" by the left column of the grid.

<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 to add 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>