WPF Animation (changing multiple properties of single element at the same time)

Question

I need to animate multiple properties of one ui element at the same time.

For example, decreasing width and height of windows synchronously.

Any idea?

        DoubleAnimation widthAnimation = new DoubleAnimation
        {           
            To = 0,
            Duration = TimeSpan.FromSeconds(5)
        };

        DoubleAnimation heightAnimation = new DoubleAnimation
        {
            To = 0,
            Duration = TimeSpan.FromSeconds(5)
        };

        Storyboard.SetTargetProperty(widthAnimation, new PropertyPath(Window.WidthProperty));
        Storyboard.SetTarget(widthAnimation, this);

        Storyboard.SetTargetProperty(heightAnimation, new PropertyPath(Window.HeightProperty));
        Storyboard.SetTarget(heightAnimation, this);

        Storyboard s = new Storyboard();
        s.Completed += FadeOut_Completed;
        s.Children.Add(widthAnimation);
        s.Children.Add(heightAnimation);
        this.BeginStoryboard(s, HandoffBehavior.SnapshotAndReplace, true);

It will do animations step by step; height will change after width changes are complete! :|

there is nothing wrong with your code, could you post a working sample which can reproduce the same issue? — pushpraj, Jun 26 '14 at 14:44
this is the sample project https://drive.google.com/file/d/0B9V5dv1Y3m0MQ0pBdXlqQlFjdWs/edit?usp=sharing — Matrix, Jun 28 '14 at 10:10

score 2 · Accepted Answer · edited May 23 '17 at 10:34

After looking at your code I understand that you are trying to animate the width and height of Window simultenousely

But I would regret to tell you that since window is not an actual wpf component but a platform component. however content of window is completely controllable as expected via your code, but window is not. any such changes are routed through Pinvoke. and the issue you are facing is a known issue and the work around are bit complex

one solution is here, this uses pinvoke to animate the window's height and width

Animating a WPF window width and height

here is a bug for similar issue created at microsoft, result is (Closed, as Won't Fix)

https://connect.microsoft.com/VisualStudio/feedback/details/715415/window-width-height-animation-in-wpf-got-broken-on-net-framework-4-0

Extra

below is a sample which is not actually solving your problem but will help you to reduce the number of lines you need to perform such animations for other elements. It is a rewrite of your code in less lines

        DoubleAnimation anim = new DoubleAnimation
        {
            To = 0,
            Duration = TimeSpan.FromSeconds(5)
        };

        border.BeginAnimation(Border.HeightProperty, anim);
        border.BeginAnimation(Border.WidthProperty, anim);

try this code with any element except window, I used a border with some color filled

apologies for overlooking the Window in your code at first sight

thanks a lot my friend, you were right. i use the main container of window to animate instead of the window problem solved. thanks again. — Matrix, Jun 29 '14 at 03:20

WPF Animation (changing multiple properties of single element at the same time)

1 Answers1