How to dynamically create animations from C# in Silverlight

Posted March 9, 2008
Filed under: Uncategorized | Tags: , , , , , , |

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.

9 comments so far

  1. Ben Hayat on March 9, 2008

    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

    Reply
  2. cschuman on March 10, 2008

    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

    Reply
  3. Ben Hayat on March 10, 2008

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

    Reply
  4. Animate Silverlight 2 object from 1 line of code « Silveright made simple on March 14, 2008

    […] 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 […]

    Reply
  5. Michael Kolonay on July 3, 2008

    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.

    Reply
  6. Abhishek Goel on July 18, 2008

    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

    Reply
  7. Abhishek Goel on July 18, 2008

    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

    Reply
  8. Abhishek Goel on July 18, 2008

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

    Thank You,
    Abhishek

    Reply
  9. Rosie on July 31, 2008

    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

    Reply

Leave a reply to Animate Silverlight 2 object from 1 line of code « Silveright made simple Cancel reply