Animation in XAML (Part 3)

Introduction

In this article, I’m going to expand on the first posts, by providing an alternative way to chain animations. In this article http://pmichaelsdev.wordpress.com/2013/10/29/animation-in-xaml-part-1/, I showed how to use the BeginTime property to do this; and that works fine; however, I did come across, what appeared to me to be, a slightly more elegant way of doing this: events.

Just for the sake of being different, I’ll use a different animation

Using Events to Chain Animations in WPF

Let’s start by creating a button that spins when you click it. The code isn’t too dis-similar to that in Part 1. Let’s have a look at the XAML first:

Two things to note here: The RenderTransformOrigin will make it spin round the centre. Remove that and it’ll spin round the top left corner (and that would be just silly); and the RotateTransform section. That has to be there in order for WPF to know it can rotate the button.

Okay, here’s the code to spin the button:

         private void SpinAndDisappear\_Click( object sender, RoutedEventArgs e)
        {
            Storyboard spin = (Storyboard )FindResource("sbSpin");
            spin.Begin( this);

        }

If you’ve been paying close attention, you’ll notice that this won’t work (even without running it and getting an error saying it can’t find the storyboard!). Here’s what the storyboard should look like:

That’s better, try that and you’ll have a spinning button.

Okay, so it spins. It’s not that impressive to be honest. Lets add another effect to the storyboard to make it more impressive (the clue to what that will be is in the name of the button). Let’s create that effect now:

     ;
        

If you’re starting to think this is getting repetitive then there’s a reason (that you’re thinking that - it is).

Now, let’s hook that in, first, just handle the Completed event of the spin:

Finally, here’s the code for the DoubleAnimation_Completed:

         private void DoubleAnimation\_Completed( object sender, EventArgs e)
        {
            Button b = ( Button)SpinAndDisappear;

            DoubleAnimation da = new DoubleAnimation (b.Width, 0, TimeSpan.FromSeconds(.5));
            b.BeginAnimation( Button.WidthProperty, da);

            DoubleAnimation da2 = new DoubleAnimation (b.Height, 0, TimeSpan.FromSeconds(.5));
            b.BeginAnimation( Button.HeightProperty, da2);

        }

Again, not rocket science, but probably the least familiar thing so far. Basically, I’m taking a reference to the button, creating a DoubleAnimation and starting it (twice, one for width and one for height).

But that looks a bit odd… and seems useless

That’s it; you now have a button that spins, and then disappears. Okay, well, wouldn’t it be much better if it just span and disappeared at the same time?

Yes!

Next post!