Поведение 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>