WPF网格中的ZOrder行为?

时间:2011-01-30 19:36:55

标签: wpf layout z-order

下面的代码包含一个简单的网格,网格的中间列中有一个按钮。按钮宽度(按意图)大于列放入的列。请注意,按钮的左侧部分是可见的,右侧则不可见。我需要做什么才能使左右按钮部件不可见?按钮的右侧部分位于右侧网格列的下方,但按钮的左侧部分位于左侧网格列的上方。我还需要左侧按钮部分被左侧网格列隐藏。

这是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>

1 个答案:

答案 0 :(得分:3)

尝试添加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>