A blog about one man's journey through code… and some pictures of the Peak District

Monthly Archives: November 2013

In this post, I would like to specifically focus on the differences between animations in WPF and in WinRT. Some quick disclaimers: As far as I’m aware, Windows Phone and WinRT are interchangeable where animations are concerned, but I base that only on my efforts to move a specific animation between the two. Consequently I won’t look at Windows Phone.

The Animation

Here’s a sample of the animation to cause the button to spin and disappear from previous posts:

Okay, so the short answer is: it doesn’t – well, that doesn’t anyway! There are a few reasons why this won’t work in WinRT, but the most annoying one is that WinRT doesn’t support multiple animations on the same element. That is, only one storyboard can be running for a given element at any time.

Before we get into a workaround, so cunning, you could tie a tail to it and call it a fox, let’s look at the size animation in WinRT (as it’s not exactly the same); first the XAML:

And call SpinAnimation after the first StoryBegin()? That did work in WPF. If you do this, what you get is a rotation animation only. As stated before, one element, one animation. The workaround is ingenious and, unfortunately, not my idea:

As you can see, I’ve rested heavily on the shoulders of giants here (which is another way of saying I’ve basically used other peoples code and ideas). Having said that, this area is virtually deserted as far as internet resources go; that’s why I started this series of articles in the first place.

Following on from http://pmichaelsdev.wordpress.com/2013/11/18/animation-in-xaml-part-3/ this post is about achieving the simultaneous effect of spinning and disappearing. I thought I’d also use it to list a few other animations and how to achieve them. They’re all variations on a theme to be honest, but I’ll try to list as many as may be useful.

A word of note: most of the animations will be on buttons, but I’m not aware of any restrictions as to the target (it can be any UI Element). Also, the code listed is all based on a button event; again, this can be any event that makes sense… or even one that doesn’t. For example; try the spin and disappear on MouseOver!

As a minor (and obvious caveat): make sure that the starting width is the same as that on MouseLeave.

Conclusion

That’s all the animations and effects that I could think of. If you know of, or can come up with any more then if you eitjer add them in the comments, or contact me (www.twitter.com/paul_michaels or pcm2605@hotmail.co.uk) and I’ll add them in.

In the next (and final) post, I’ll focus on the differences in WinRT / Windows Phone 8.

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.

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:

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:

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?

This is the second of my series of posts on animation, using WPF and XAML. In this post, I’m looking at how we can control an animation in WPF using code behind, and also, how two animations can be triggered simultaneously.

Button Animation in WPF with code-behind

The problem with a statement like this, is that you can pretty much replicate anything in XAML in code, so you can do everything in code, some, a little or nothing. So far, I’ve come across three approaches that make sense to me. In this article I’ll cover triggering animations from code behind; following articles will cover creating animations for elements that have the transform set in XAML, and finally, no XAML at all!

Triggering an animation from code

There’s little point in re-explaining the XAML; it’s essentially the same XAML that I’ve shown in the first post. It looks like this:

So, there’s a few things to note here:
– The storyboard is not part of the button definition; it’s actually part of the Window.Resources.
– We don’t use a named transition, but instead, specify the button name; however, we still have to tell the button that it has a transition:

So, both animations run at the same time. Admittedly, I’m not strictly sure what you could do with this particular animation; it’s certainly not my intention that WPF apps start taking a mid ’90s web-site feel!

In this article, we looked at controlling pre-defined storyboard definitions in code. In a future article, I intend to cover the creation of an animation from within code.