WPF,在容器边界上制作动画

时间:2010-07-01 23:04:28

标签: c# wpf wpf-controls

我正在学习WPF并且有一个特定的目标。

想象一下你有一个网格(3行乘3列)和一个控件,比如一个简单的蓝色矩形填充中间单元格。当我点击单元格时,我希望正方形平滑旋转180度。

我目前的具体问题是;当矩形旋转时,它不会改变其尺寸,因此它将延伸到单元格的边界之外。我不希望它剪辑,我希望它出现在顶部,部分遮挡周围的细胞。

第二部分是,如果有一个单元格填满整个窗口,我单击该单元格中的蓝色矩形,是否可以使矩形旋转并延伸到表单的两侧?

如果没有意义,请询问。我发现谷歌很难,因为我不知道我应该使用的确切术语。

谢谢

1 个答案:

答案 0 :(得分:1)

第一部分可以通过使用附加属性Panel.ZIndex来完成,在开始动画时将其设置为较高值,在动画完成时将其设置为较低值。第二部分(在窗口外具有控件)更复杂。我尝试了一些东西,这种方法似乎是最好的。当我遇到剪辑问题时,它使用全屏窗口而不是Popup。使用RenderTargetBitmap创建元素的副本,然后将其放置在相同的位置。在复制动画时隐藏原始元素。

public void PopupAnimation(UIElement element)
{
    double w = element.RenderSize.Width,h = element.RenderSize.Height;
    var screen = new Canvas();
    var pos = element.PointToScreen(new Point(0, 0));
    var rtb = new RenderTargetBitmap((int)w,(int)h, 96, 96, PixelFormats.Pbgra32);
    rtb.Render(element);
    Image i = new Image { Source = rtb, Width = w, Height = h,Stretch=Stretch.Fill};
    Canvas.SetLeft(i, pos.X);
    Canvas.SetTop(i, pos.Y);
    screen.Children.Add(i);

    var window = new Window() {
        Content = screen, AllowsTransparency = true,
        Width=SystemParameters.PrimaryScreenWidth,Height=SystemParameters.PrimaryScreenHeight,
        WindowStyle=WindowStyle.None,ShowInTaskbar=false,Topmost=true,
        Background=Brushes.Transparent,ShowActivated=false,Left=0,Top=0
    };
    var transform = new RotateTransform();
    i.RenderTransformOrigin = new Point(0.5, 0.5);
    i.RenderTransform = transform;

    var anim = new DoubleAnimation { To = 360 };
    anim.Completed += (s,e) => 
    {
        element.Visibility = Visibility.Visible;
        var delay = new Storyboard { Duration = TimeSpan.FromSeconds(0.1) };
        delay.Completed += (s2, e2) => window.Close();
        delay.Begin();
    };

    window.ContentRendered += (s, e) =>
    {
        transform.BeginAnimation(RotateTransform.AngleProperty, anim);
        element.Visibility = Visibility.Hidden;
    };
    window.Show();
}