Поведение ZOrder в сетке WPF?

Question

Код ниже содержит простую сетку с кнопкой в ​​средней колонке сетки. Ширина кнопки (намеренно) больше столбца, в который она помещена. Обратите внимание, что левая часть кнопки видна, а правая - нет. Что мне нужно сделать, чтобы сделать левые и правые кнопки невидимыми? Правая часть кнопки находится z-ниже правого столбца сетки, но левая часть кнопки z-выше левого столбца сетки. Мне нужно, чтобы левая часть кнопки также была скрыта левым столбцом сетки.

Это упрощенная версия XAML, где я пытаюсь анимировать "кинопленку". Пленка должна быть размещена z-ниже левого и правого столбца сетки и z-выше средней части. Анимация работает хорошо, но пользователь некоторое время видит элементы управления в левой части, которые он не должен видеть, поскольку они должны быть "покрыты" левым столбцом сетки.

<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

Попробуйте добавить 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>