How to dynamically create animations from C# in Silverlight

So you want to create an animation from managed code. To do this, there is quite a bit of code needed. For every animation there needs to be a new StoryBoard, and unfortunately a StoryBoard can not be reused between objects. (Correction: You can reuse a dynamically created StoryBoard. Make sure to call StoryBoard.Stop() before setting the new target.)

The approach we are going to take is to animate the TranslateTransforms instead of animating the Canvas.Top and Canvas.Left properties since this is the preferred way of doing animations in WPF. In the below example we will create a rectangle, attached a set of transforms to the rectangle, and dynamically add animations to the rectangle.

  1. Create a Rectangle
    Create a rectangle code
  2. Create a function that returns a RenderTransform. (I have added more than the TranslateTransform in case you want to access the other transforms at a later time. It’s good practices to have them there.)
    Function that returns a TransformGroup
  3. Create a StoryBoard and add DoubleAnimations for both the X and Y.
    Dynamically add a storyboard and double animations
  4. Final product
    Final product.

Come back for part 2 and we’ll animate the Scale and add more than one rectangle.

Edit: In case you don’t want to brush off your old OCR programs to get the code, here is a link to the source. Link to working example.

About these ads

9 comments so far

  1. Ben Hayat on

    Hi;

    Thank you for the nice detailed codes for the above animations. I have a question. In page_loaded, how did you know all these these steps to write? Is there a guideline or document of how to write these steps to create an animations? I do understand your code, but if I never saw it, I would not know that it would take these steps to do it.
    So, my real question is, would it be possible to give us guidelines how to perform animations in code?

    Thank you in advance!
    ..Ben

  2. cschuman on

    Hey Ben,

    Thanks for the comment. Creating animations from code behind was very challenging to figure out. What I really wanted to was something like my WPF Animation post.

    This technique was based on a sample from some guys at Microsoft. I don’t think there is documentation or guidelines (other than this post).

    I am working on porting this code over to a small/light weight API. The goal is animate an object with a single line of code while still using the Silverlight animation engine.

    Thanks,
    Corey

  3. Ben Hayat on

    Thanks Corey, but I still loved the work you did!

  4. […] Silverlight 2 object from 1 line of code Posted March 14, 2008 In a previous post about how to create animations dynamically, I showed how to add StoryBoards from C#. I have extracted this logic into a class called […]

  5. Michael Kolonay on

    Hello,

    Thanks for the great example. It has been very helpful…is there any chance of posting part 2? I’m trying to do just that, animate a scale programmatically and I’m finding it tough going.

    Thanks again.

  6. Abhishek Goel on

    Hello, I have tried your code om my PC but there are 4 error in that code. Can you plz tell me how to resolve these error. Thses errors are:

    Error1 The best overloaded method match for

    ‘System.Windows.Media.Animation.Storyboard.SetTargetProperty(System.Windows.Media.Animation.Timeline,

    System.Windows.PropertyPath)’ has some invalid arguments

    Error 2 Argument ‘2’: cannot convert from ‘string’ to ‘System.Windows.PropertyPath’

    Error3 The best overloaded method match for

    ‘System.Windows.Media.Animation.Storyboard.SetTargetProperty(System.Windows.Media.Animation.Timeline,

    System.Windows.PropertyPath)’ has some invalid arguments

    Error4 Argument ‘2’: cannot convert from ‘string’ to ‘System.Windows.PropertyPath’

    Warning 5 Unable to update auto-refresh reference ‘system.web.silverlight.dll’. Cannot find assembly

    ‘C:\Documents and Settings\Program Files\Microsoft

    SDKs\Silverlight\v2.0\Libraries\Server\System.Web.Silverlight.dll’.
    C:\…\Animation_Web\

    Plz tell me about that. Thank you.

    Abhishek

  7. Abhishek Goel on

    Error 1 The best overloaded method match for ‘System.Windows.Media.Animation.Storyboard.SetTargetProperty(System.Windows.Media.Animation.Timeline, System.Windows.PropertyPath)’ has some invalid arguments

    Error 2 Argument ‘2’: cannot convert from ‘string’ to ‘System.Windows.PropertyPath’

    Error 3 The best overloaded method match for ‘System.Windows.Media.Animation.Storyboard.SetTargetProperty(System.Windows.Media.Animation.Timeline, System.Windows.PropertyPath)’ has some invalid arguments

    Error 4 Argument ‘2’: cannot convert from ‘string’ to ‘System.Windows.PropertyPath’

    Warning 5 Unable to update auto-refresh reference ‘system.web.silverlight.dll’. Cannot find assembly ‘C:\Documents and Settings\Program Files\Microsoft SDKs\Silverlight\v2.0\Libraries\Server\System.Web.Silverlight.dll’.

    Thank You,
    Abhishek

  8. Abhishek Goel on

    Hello I ma getting the error posted above. plz tell me how to resolve these errors.

    Thank You,
    Abhishek

  9. Rosie on

    Hi,

    The above error is caused by differences between Silverlight 2 Beta 1 and Silverlight 2 Beta 2. Please use the following:

    Storyboard.SetTargetProperty(daTranslatedTransform, new PropertyPath(“<<everything between the quotes”));

    http://msdn.microsoft.com/en-us/library/cc645049(VS.95).aspx#SetTargetProperty_and_GetTargetProperty


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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: