wpf - WPF 网格中的 ZOrder 行为？

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>