Question

我的WPF应用程序中有一个如下所示的设置。

<StackPanel>
    <StackPanel Name="slidingPanelOneHolder">
        <Grid Name="slidingPanelOneHeader" Width="300">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="9*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <TextBlock VerticalAlignment="Center" Text="Header"/>
            <Button Grid.Column="1" Style="{StaticResource BackButton}"/>
        </Grid>
        <StackPanel Name="slidingPanelOne" Width="{Binding ActualWidth, ElementName=slidingPanelOneHeader}">
            <TextBlock Text="Hi"/>
            <TextBlock Text="Hi"/>
            <TextBlock Text="Hi"/>
        </StackPanel>
    </StackPanel>
    <TextBlock>Rest of stuff</TextBlock>
</StackPanel>

这会产生以下布局。

我创建了一个动画，所以当我按下按钮时，它会偏移上边距，使slidingPanel向上移动。但是，我的问题是slidingPanel在通过标题以及其他任何内容时仍然可见。

要尝试解决此问题，我尝试在slidingPanelOne和slidingPanelOneHolder上使用不透明蒙版。两个不透明蒙版的主要问题是它们随边缘移动。同样使用slidingPanelOneHolder上的不透明蒙版，它实际上并没有阻止文本块首先在标题文本块中被看到。事后看来，这是相当明显的。

非常感谢有关如何实现这一目标的任何反馈。

未成功尝试的视觉效果（动画中期）

所需结果的视觉效果（动画中期）

编辑：我知道我可以为标题提供纯白色背景和比slidingPanelOne更高的z索引，但是，因为标题上方可能很容易出现其他组件改变了，这不是一个可行的解决方案。

Answer 1

感谢Bradley Uffner让我得到这个答案。

下面的示例代码将显示此内容。

为了达到这样的目的，你可以使用任何你正在使用的剪辑组件。对我来说，它看起来像这样。

<StackPanel>
    <Grid Name="slidingPanelOneHeader" Width="300">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="4*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <TextBlock VerticalAlignment="Center" Text="Header"/>
        <Button Grid.Column="1" Content="Press Me"/>
    </Grid>
    <StackPanel Name="slidingPanelOneHolder" Width="{Binding ActualWidth, ElementName=slidingPanelOneHeader}">
        <StackPanel.Clip>
            <RectangleGeometry>
                <RectangleGeometry.Rect>
                    <MultiBinding Converter="{StaticResource clipConverter}">
                        <Binding ElementName="slidingPanelOneHolder" Path="ActualWidth"></Binding>
                        <Binding ElementName="slidingPanelOneHolder" Path="ActualHeight"></Binding>
                    </MultiBinding>
                </RectangleGeometry.Rect>
            </RectangleGeometry>
        </StackPanel.Clip>
        <StackPanel Name="slidingPanelOne" Margin="0, 0, 0, 0">
            <TextBlock Text="Hi"/>
            <TextBlock Text="Hi"/>
            <TextBlock Text="Hi"/>
        </StackPanel>
    </StackPanel>
    <TextBlock>Something Else</TextBlock>
</StackPanel>

通过将slidingPanelOne上的保证金从Margin="0, 0, 0, 0"更改为Margin="0, -25, 0, 0"

，您可以看到此方法有效

请注意，此示例使用转换器，以便可以绑定剪辑的高度和宽度。转换器看起来像这样。

using System;
using System.Globalization;
using System.Windows;
using System.Windows.Data;

namespace YourNameSpace
{
    public class ClipConverter : IMultiValueConverter
    {
        public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
        {
            return new Rect(0, 0, System.Convert.ToDouble(values[0]), System.Convert.ToDouble(values[1]));
        }

        public object[] ConvertBack(object value, Type[] targetType, object parameter, CultureInfo culture)
        {
            return null;
        }
    }
}

通过在XAML文档的资源字典中使用以下行，可以在XAML文档中使用它。

<local:ClipConverter x:Key="clipConverter"></local:ClipConverter>

使组件消失，边距为负

1 个答案: