Заставить компонент исчезнуть с отрицательными полями

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 это на самом деле не мешало видеть текстовые блоки в текстовом блоке заголовка. Что, задним числом, довольно очевидно.

Буду признателен за любые отзывы о том, как этого можно достичь.

Визуализация неудачных попыток (средняя анимация)

И визуализация желаемого результата (средняя анимация)

---

Редактировать: Мне известно, что я мог бы дать заголовку сплошной белый фон и более высокий индекс z, чем slidingPanelOne, однако, так как могут быть другие компоненты выше заголовка, которые нельзя изменить, это не жизнеспособное решение.

Answer 1

Спасибо Брэдли Аффнеру за ответ на этот вопрос.

В приведенном ниже примере кода это будет показано.

Для достижения чего-то подобного вы можете использовать компонент клипа того, что вы используете. Для меня это выглядело так.

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