WPF 网格中的 ZOrder 行为？

发布于 2024-10-15 04:04:05 字数 901 浏览 8 评论 0原文

下面的代码包含一个简单的网格，网格的中间列中有一个按钮。按钮宽度（有意）大于其所在的列。请注意，按钮的左侧部分可见，而右侧部分则不可见。我需要做什么才能让左右按钮部分都看不见？按钮的右侧部分位于右侧网格列的 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>

原文

The code below contains a simple grid with a button in grid's middle column. The button width is (by intention) larger than column with it is placed into. Notice that the left part of the button is visible the right one is not. What do I have to do to get both left and right button parts invisible? Right part of the button is z-below the right grid column, but the left part of the button is z-above the left grid column. I need the left button part also to be hidden by the left grid column.

This is a simplified version of XAML where I am trying to animate kind of 'film strip'. Film should be placed z-below left and right grid column and z-above the middle part. The animation works nicely, but user see for a while controls on the left part she is not supposed to see as those should be 'covered' by the left grid column.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

饭团 2024-10-22 04:04:05

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

Try adding a 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>

回复收藏 0 原文

~没有更多了~