Dynamic Animations in WPF

Question

2.00/5 (1 vote)

See more:

Hi all

I am sure I've seen a way to do an animation in WPF similar to how Cocoa does it, where I do it all in one line, using a static method telling the object what I want moved. However, all the examples I can find on MSDN are creating storyboards, etc. Am I right ? Is there a way to do simple, dynamic animations without creating a lot of objects ?

I found this:

C++

DoubleAnimation da = new DoubleAnimation();
da.From = this.Top;
da.To = height - 50;
da.Duration = new Duration(TimeSpan.FromSeconds(1));

this.BeginAnimation(Window.TopProperty, da);

If this is how I do things dynamically, how do I animate more than one thing at once ? I guess that needs a StoryBoard and I'm back where I started ?

Posted 29-Apr-10 16:31pm

Christian Graus

Updated 29-Apr-10 16:40pm

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Chris Kolkman · Accepted Answer · 2010-05-12T11:07:00

To animate more than one property at once - yes you'll need a Storyboard.

As for moving an element, the difficulty lies with the element not really having a set Left/Top property. In WPF everything is based on Margins and Alignments.

I've never tried it, but you might be able to setup an animation on a margin. Though you'll most likely end up with some stretching effects.

The way I animate a move is to use a TranslateTransform.

You'll need an animation for each axis you want to move on so for moving on a diagonal you'll need a total of 2 animations.

Here is a quick example of how to move an element 150 on a diagonal:

Sorry about the VB - though it shouldn't be hard to convert to C#

'This creates the new TranslateTransform that changes how the element is rendered
' (x = 0, y = 0) means no translation is done
'[new] is the element to be animated
[new].RenderTransform = New TranslateTransform()

'The animation requires a NameScope within which to operate, as the animations must be using a registered name for the object
Dim ns As New NameScope()
NameScope.SetNameScope(_manager.Panel, ns) '_manager.Panel in my case was the container of the element
ns.RegisterName("newTransform", [new].RenderTransform) 'Register the name

Dim board As New Storyboard()
Dim animLength As New TimeSpan(0, 0, 0, 0, 1500) '1.5 seconds

'Handle YProperty (moving 150 units down)
'A FillBehavior of Stop resets the animation after it has completed
'A FillBehavior of Hold keeps the element at the intended target, but you won't be able to manually set the property in question anymore
Dim dblNewY As New DoubleAnimation(150, New Duration(animLength), FillBehavior.Stop) 
Storyboard.SetTargetName(dblNewY, "newTransform") 'tell the animation what to animate against
Storyboard.SetTargetProperty(dblNewY, New PropertyPath(TranslateTransform.YProperty)) 'tell the animation which property
board.Children.Add(dblNewY)

'Handle XProperty (moving 150 units to the right)
Dim dblNewX As New DoubleAnimation(150, New Duration(animLength), FillBehavior.Stop)
Storyboard.SetTargetName(dblNewX, "newTransform")
Storyboard.SetTargetProperty(dblNewX, New PropertyPath(TranslateTransform.XProperty))
board.Children.Add(dblNewX)
board.Begin(_manager.Panel) 'the storyboard wanted a reference point for the namespace - this works with the NameSpace registered above and is again the container of the element to animate

I realize this is creating a number of objects, but it is a dynamic animation. I've been using some of this to create a whole animation framework for animating elements on/off of a given container. Clipping and reveal animations are easier as you can animate a whole rectangle with one animation.

I hope that helps you out.