How to dynamically create animations from C# in Silverlight

Posted by Corey on March 9, 2008 at 5:49 am.

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.

Related posts:

  1. Animate multiple transforms from C# – WPF
  2. Animating multiple transforms in C# – Silverlight
  3. Resize Silverlight 1.0 app to size of browser
  4. Why won’t media play in Silverlight 2?
Uncategorized

12 Responses to “How to dynamically create animations from C# in Silverlight”

  • 1
    Ben Hayat Says:
    March 9th, 2008 at 2:37 pm

    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 Says:
    March 10th, 2008 at 5:10 am

    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 Says:
    March 10th, 2008 at 5:12 pm

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

  •  
    4
    Animate Silverlight 2 object from 1 line of code « Silveright made simple (Pingback) Says:
    March 14th, 2008 at 2:35 am

    [...] 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 Says:
    July 3rd, 2008 at 4:31 pm

    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 Says:
    July 18th, 2008 at 6:01 am

    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 Says:
    July 18th, 2008 at 6:07 am

    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 Says:
    July 18th, 2008 at 6:08 am

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

    Thank You,
    Abhishek

  • 9
    Rosie Says:
    July 31st, 2008 at 7:56 pm

    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

  • 10
    rishi Says:
    September 23rd, 2009 at 8:13 am

    Hi i was trying to have just a single translate transform on an UIelement, not a group:So i changed the following line:StoryBoard.SetTargetProperty(daTranslateTransformx,”(UiElement.RenderTransform).(TransformGroup.Children[0].(TranslateTransform.X))” to StoryBoard.SetTargetProperty(daTranslateTransformx,”myImage.RenderTransform.TranslateTransform.X)” but some how I didn’t get it right,but there is some thing wrong with this as I am not able to get it to work.Please reply asap.Thanks

  • 11
    Terry Clancy Says:
    September 29th, 2009 at 10:26 pm

    Sorry for basic question……

    I don’t understand the line
    Storyboard.SetTarget(daTranslateTransformX, Layoutroot.Childerent[0]);
    “stb” is the instance of the Class Storyboard why isn’t this line
    stb.SetTarget(daTranslateTransformX, Layoutroot.Childerent[0]);
    ????
    Clearly I am not understanding something.

    Terry

  • 12
    zain Says:
    January 11th, 2011 at 12:43 pm

    nice work boy…it helped in my final year projectthanks