WPF animation - running multiple animations

When you are contemplating animations in WPF, you can have more than one running at any particular time.
Remember though, that each one creates a whole gamut of objects in order to run that animation.

Here is an example of how to change the width of a rectangle and also change the colour halfway through the width animation.
To start the animation, you need to click on the rectangle:

Notice how the animation is held at the end.

WPF Animation - key frame

Firstly, what does a key frame animation mean?

It is a way of specifying steps for your animation to follow.
The WPF runtime will work out the smooth transition between the steps for you.

Why would you want to do such a thing?
If you want to control how the animation flows, but don’t want to specify every point, then a key frame helps you.

In the following example,  I have used a key frame animation to specify the periods at which the button’s rectangle changes colour.
It changes colour from AliceBlue to Blue to DarkGrey when you click on the button

Notice how you need to specify the target property as Fill.Color, if you don’t WPF tries complains that you are specifying a Color object when it is expecting a Brush!

WPF - animation with automatic return

In a previous blog I talked about how to make an animation return to it’s original value.
Actually all you need to do is add a property called AutoReverse to your animation declaration.
It needs to be set to true to enable and to false to disable it.

Easy this xaml isn’t it?

In this example, the textbox stretches horizontally when you wave the move over it, and then returns back to it’s original width:

WPF Animations - where to place them

In previous blogs , I talked about the classes in animation and what the different types are; not to mention how great WPF is that doing animations is so easy

Now, where do you place animations in xaml?

Firstly, they have to be defined within a storyboard.
A storyboard (I’ve always felt a slightly odd name for the class) can contain a number of animations, and it is the storyboard that controls the playing of the animations.

Here is n animation within a storyboard that makes the textbox widen when you put the mouse over the textbox:

WPF - where were the announcements?

Well TechEd 2008 has come and gone (USA version anyway)

Where were the announcements about new things for WPF?

There was a new beta for Silverlight (Beta 2), which is good as I believe Silverlight will be a great thing for web development

I was hoping there might be something about MVC and composite client for WPF.
If you remember, this was called Acropolis before being ‘folded’ into mainstream VS development

I hope I’m wrong and there is much more to come , maybe at PDC
The long awaited paging grid might be useful

WPF - how to use an anonymous method with Dispatcher

Have you ever been in the situation where you’d thought you were in the UI thread nice and safely, but got the exception message:

The calling thread cannot access this object because a different thread owns it”

What this means is that you have created an object on a thread (usually UI thread), and are then trying to access it from another thread at runtime.
Maybe from a worker thread running an event handler.

To fix it, you need to use the very handy Dispatcher class, which will marshall your call to the correct thread.
You need to use the BeginInvoke (asynchronous) or the Invoke method.

However, you don’t want to have huge numbers of delegate definitions all over your code, so use an anonymous method instead.
The trick is to make sure the returned type from the anonymous delegate is one that matches what the Invoke method expects
If the correct thread happens to be the UI thread you can do the following:

Dispatcher.CurrentDispatcher.BeginInvoke(DispatcherPriority.Normal, (DispatcherOperationCallback)delegate(object arg)
{
// do sommat
return null;
}

WPF Animation timeline

All of the interesting WPF classes derive from the TimeLine class.

What do I mean by interesting?

All of the classes for animating different types (like DoubleAnimation and ColorAnimation), MediaTimeLine (for playing videos and audio) and TimeLineGroup from which StoryBoard (which provides the canvas for running animations) is derived.

Also, the TimeLine class itself has some key properties which bear noting:

• Duration - length of time the animation runs, used by most of its children
• SpeedRatio - increases or decreases the speed of the animation. It defaults to 1, setting it to 5 runs the animation 5 times faster and setting it to 0.5 makes the animation twice as slow
• AccelerationRatio -changes the relative speed of the animation, so that it starts slowly and speeds up. You specify values between 0 and 1, where 0 keeps the animation constant and 1 accelerates it towards the end
• DecelerationRatio - does the opposite of AccelerationRatio, i.e. makes the animation slow down near the end
• AutoReverse - will make the animation reverse after it finishes, if set to true
• BeginTime - allows you to specify a delay before the animation starts
• FillBehaviour - specifies what happens when the animation finishes, e.g. hold the value or revert back to the original value
• RepeatBehaviour -gives the animation instructions on how many times to repeat the animation or for how long

WPF Animations - key properties

In a previous blog, I spoke about the different sets of animation classes.

Also when you are doing animations in WPF, there are some key properties.
These are properties that apply to most animations.

From - this property gives you the starting value for your animation.
It is optional, and if you leave it out a starting value is calculated from existing value taking into account the animation

To - this property gives you the ending value for your animation.
It is also optional. When you leave it out, an ending value is calculated , but without taking into account the animation. That means it uses the value set in the xaml or code.

By - this property allows you to specify a once only increment for your animation.
You can combine this with a To property, or leave it without a To

Duration - this allows you to specify the length of time that the animation runs for
You can specify the Duration type, or a TimeSpan (which has an implicit cast to a Duration).
The advantage of the Duration class is that it can allow you to specify a duration of automatic or forever.

IsAdditive - this makes the From, To and By work by adding their values to the starting value for the property.

WPF Animation classes

As a slight sea change from the norm, which just shows the (extremely) impressive animation facilities available in WPF, why don’t I explain a bit about the different animation classes.

Out of the box, the nice people on the WPF team(s) have defined three sets of classes for doing the animations.

• Linear interpolation classes, which start from a positon and smoothly increment to the end position
• KeyFrame classes, in which you provide a series of steps and the values change according to the steps provided
• Path classes, in which you use path geometry to specify how the animation proceeds based on the geometry specified (eg a shape like a square)

Also, you are free to create your own animation classes, as all these derive from abstract class TAnimationBase where T is the type name.
For example, there is a DoubleAnimation, a DoubleAnimationUsingKeyFrames and a DoubleAnimationUsingPath - all derived from DoubleAnimationBase.

All of these can be specified in code, or slightly more easily in xaml

I shall go into these different areas in future blogs

WPF DataTriggers with enums

This is something that I had to do recently, and it wasn’t as obvious as I thought.

Given a very simple enum like:

The first (and obvious) try is:

Here we are trying to hide a label and a textbox based on the value of the enum.
However, it doesn’t work

As an aside, the autogrid you see heer is very handy, and can be found on www.codeplex.com

What you actually need to do is slightly odd, and is effectively instantiating the enum values: