Implement an animation in WPF

May include but is not limited to: creating a storyboard, controlling timelines, controlling the behavior when the animation completes, double, color, and point animations; start an animation from code and from XAML.

I have wonderful news for you; this will be the last post from this objective (Building a User Interface by Using Basic Techniques). Then we’ll switch levels and head for the advanced UI! But until then, we have the topic of animations.

So what is an animation? You can think of it like a stop-motion movie, and you’d be far from the WPF truth. An animation in WPF is just the change of a dependency property over a certain amount of time. So it’s not frame-based, but property-based. This has pros and cons, like anything else in life. The pros are so numerous that I can’t this pathetic blog post wouldn’t be enough for them, so let’s focus on that one little con. That is simply you can’t make a WPF animation (at least not a canned, out-of-the-box one) that doesn’t involve changing a property (let’s say, you’d like to add some elements dynamically). But why would you even bother thinking on such nonsense?

There are two types of animation in WPF – linear animations and key frame animations. Fortunately, we won’t use key frame animations, simply because they aren’t tested here. And there are an awful lot of classes dealing with animations, such as DoubleAnimation and ColorAnimation. Of course, we have Int16Animation, Int32Animation and Int64Animation, to deal with int properties. Now how to do animations? In code, you can do this:

DoubleAnimation animation = new DoubleAnimation();
animation.From = 0;
animation.To = 200;
animation.Duration = new Duration(TimeSpan.FromSeconds(10));
myButton.BeginAnimation(Butto.HeightProperty, animation);

You see, it’s not very involved. We saw a bunch of properties, From, To and Duration. From is the starting value. Every time an animation launches, it will start from the value set here – so a running animation will reset to it. To prevent this, omit From from the animation – but make sure you set it before somewhere.

Now the To property is the target to grow, color or any other something. There’s not really much to say on it.

It wasn’t in the example, but you can use the By property instead of To. You can imagine the effect I think.

I can’t really say so much about Duration, too. It specifies the duration of your animation.

That’s how to do it in code. Now if you’d like to make it work in XAML, you’ll need a StoryBoard. It’s a TimeLine subclass, and you can define a set of animations in it. The button example in XAML:

<Button>
            <Button.Resources>
                <Storyboard Duration="0:0:10" x:Key="myAnim">
                    <DoubleAnimation Storyboard.TargetProperty="Button.Height" From="0" To="200"></DoubleAnimation>
                </Storyboard>
            </Button.Resources>
</Button>

I guess that’s all for animations, I really don’t like the topic, so let’s move on to other more interesting ones.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s