WPF：重叠动画 - 在工具栏后面移动一个网格

Question

我想在wpf的主窗口中移动一个窗口。在下面的示例中，我想将窗口“移动窗口”移动到主窗口的顶部，直到它完全脱离主窗口。我使用TranslateTransform.Y动画执行此操作 - 移动窗口实际上是一个网格。问题是，我想将移动到工具栏后面的窗口。目前，如果移动 over 工具栏。换句话说：我希望移动窗口消失在工具栏后面。工具栏是停靠面板的一部分，它具有渐变背景，工具栏背景是透明的。无论我使用什么ZIndex，移动窗口（网格）总是在工具栏上移动，并且始终只被窗户客户区切断（因此它在窗口标题栏后面“消失”）。我怎样才能实现这样的动画？

-------------------------------------------
|              Toolbar                    |
-------------------------------------------
|         -------------------             |
|         |   moving window |             |
|         -------------------             |
|                                         |
-------------------------------------------

我创建了一个快速而又脏的非MVVM演示项目，以使其更清晰。这是主要的Window.xaml：

<Window x:Class="MovingWindowTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Grid Background="SlateGray">
    <DockPanel>
        <StackPanel DockPanel.Dock="Top" Orientation="Vertical">
            <Menu IsMainMenu="True" Background="Transparent" Panel.ZIndex="2">
                <Menu.ItemsPanel>
                    <ItemsPanelTemplate>
                        <DockPanel HorizontalAlignment="Stretch"/>
                    </ItemsPanelTemplate>
                </Menu.ItemsPanel>
                <MenuItem Header="Debug">
                    <MenuItem Header="Move window in" Click="MoveWindowIn_OnClick" />
                    <MenuItem Header="Move window out" Click="MoveWindowOut_OnClick" />
                </MenuItem>
            </Menu>
        </StackPanel>
        <Grid x:Name="contentGrid" Background="White"/>
    </DockPanel>
</Grid>

守则背后：

public partial class MainWindow : Window
{
    private InnerWindow _InnerWindow;
    private InnerWindow InnerWindow 
    {
        get { return this._InnerWindow ?? ( this._InnerWindow = new InnerWindow() ); }
    }

    public MainWindow()
    {
        InitializeComponent();
        this.InnerWindow.Width = this.InnerWindow.Height = 100;
    }

    private void MoveWindowIn_OnClick( object sender, RoutedEventArgs e )
    {            
        Panel.SetZIndex( this.contentGrid, 1 );
        this.InnerWindow.Visibility = Visibility.Visible;
        this.contentGrid.Children.Add( this.InnerWindow );
        TranslateTransform trans = new TranslateTransform();
        DoubleAnimation anim = new DoubleAnimation(-100, 0, new Duration( new TimeSpan( 0, 0, 0, 3 ) ) );
        this.InnerWindow.RenderTransform = trans;
        trans.BeginAnimation( TranslateTransform.YProperty, anim );
    }

    private void MoveWindowOut_OnClick( object sender, RoutedEventArgs e )
    {
        TranslateTransform trans = new TranslateTransform();
        DoubleAnimation anim = new DoubleAnimation( 0, -100, new Duration( new TimeSpan( 0, 0, 0, 3 ) ) );
        this.InnerWindow.RenderTransform = trans;
        anim.Completed += ( o, args ) => this.contentGrid.Children.Remove( this.InnerWindow ); ;
        trans.BeginAnimation( TranslateTransform.YProperty, anim );
    }
}

InnerWindow只是一个超级简单的用户控件，包含以下xaml：

<UserControl x:Class="MovingWindowTest.InnerWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" Background="Red" VerticalAlignment="Top"
         d:DesignHeight="100" d:DesignWidth="100">
<Grid>
    <TextBlock FontSize="20" VerticalAlignment="Center" HorizontalAlignment="Center">TEST</TextBlock>    
</Grid>

当移入InnderWindow时，它与菜单重叠，尽管菜单具有更高的ZIndex。 请注意，InnerWindow将添加到菜单下的contentGrid中。当我将ClipToBounds添加到内部窗口时，它没有任何区别。

Answer 1

移动窗口的父级是什么？ DockPanel还包含工具栏或其他控件？您是否尝试在移动窗口上设置ClipToBounds属性？