WPF：重叠的动画 - 移动网格工具栏背后 [英] WPF: Overlapping animations - move a grid behind a toolbar

问题描述

我想在WPF主窗口中移动一个窗口。在下面的例子我想移动窗口中的移动窗口主窗口的顶部，直到其完全关闭主窗口。我这样做了TranslateTransform.Y动画 - 移动窗口实际上是一个网格。问题是，我想移动窗口的背后的工具栏。目前，如果被移动的在的工具栏。换句话说：我想移动窗口到工具栏的后面消失。该工具栏是固定面板，其中有一个渐变背景的一部分，该工具栏的背景是透明的。它没有什么事我zIndex的使用，移动窗口（网格）会转移工具栏上，并始终只能由Windows客户端区域切断（所以它消失背后的窗口标题栏）。我怎样才能达到这样的动画？

I want to move a window within the main window in wpf. In the example below I want to move the window "moving window" to the top of the main window until it is completely off the main window. I do this with a TranslateTransform.Y animation - the moving window is actually a grid. The problem is, that I want to move the window behind the toolbar. Currently if is moved over the toolbar. In other words: I want the moving window to disappear behind the toolbar. The toolbar is part of a dock panel, which has a gradient background, the toolbars background is transparent. It doesn't matter what ZIndex I use, the moving window (grid) always moves over the toolbar and is always only cut off by the windows client area (so it "disappears" behind the windows titlebar). How can I achieve such an animation?

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

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

I created a little quick and dirty Non-MVVM Demo Project to make it clearer. This is the main 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>

在code背后：

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代码：

The InnerWindow is just a super simple User Control with the following 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到内部窗口没有什么区别。

When the InnderWindow is moved in, it overlaps the Menu, although the menu has a higher ZIndex. Note that the InnerWindow is added to the contentGrid which is under the menu. And it makes no difference when I add ClipToBounds to the inner window.

推荐答案

什么是移动窗口的家长吗？也包含了工具栏或其他控件的DockPanel中？你有没有尝试设置ClipToBounds移动窗口上的财产？

What is the parent of the moving window? The DockPanel that also contains the Toolbar or another control? Have you tried setting the ClipToBounds property on the moving window?

这篇关于WPF：重叠的动画 - 移动网格工具栏背后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！