Reusing a Storyboard

It is possible to reuse a storyboard.  Make sure to stop the storyboard before you set a new target property.  Thanks Tom for pointing this out.

XAML

    <Canvas x:Name=”LayoutRoot” Background=”White”>
<Button Height=”20″ Width=”120″ Canvas.Left=”0″ Canvas.Top=”0″ Content=”Button” x:Name=”btnTest”/>
<Rectangle x:Name=”Fred” Height=”30″ Width=”30″ Fill=”Aquamarine” Canvas.Top=”50″/>
<Rectangle x:Name=”Wilma” Height=”30″ Width=”30″ Fill=”OrangeRed” Canvas.Top=”150″/>
</Canvas>
C#

        void Page_Loaded(object sender, RoutedEventArgs e)
{
_storyboard = new Storyboard();
_dx = new DoubleAnimation();
_dx.From = 0;
_dx.To = 250;
_dx.Duration = new Duration(new TimeSpan(0,0,3));
_dx.AutoReverse = true;
_dx.RepeatBehavior = RepeatBehavior.Forever;

            Storyboard.SetTargetName(_dx, “Fred”);
Storyboard.SetTargetProperty(_dx, “(Rectangle.Width)”);
_storyboard.Children.Add(_dx);
LayoutRoot.Resources.Add(_storyboard);
_storyboard.Begin();
}

 

        void btnTest_Click(object sender, RoutedEventArgs e)
{
            _storyboard.Stop();
Storyboard.SetTargetName(_dx, “Wilma”);
_storyboard.Begin();
}

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
   
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.)
   
3. Create a StoryBoard and add DoubleAnimations for both the X and Y.
   
4. 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.

Animating multiple transforms in C# – Silverlight

Yesterday I talked about how to write C# code to animate multiple transforms of an object.  It appears, to my dismay, that at the current time you are unable to animate objects completely in C#.  There is a work around by creating a XAML storyboard and importing into a string using the XAMLReader object.  Here are a few sites that cover this technique.

Silverlight 1.1 Storyboards and Managed Code
Creating animations in code with Silverlight 1.1 (stand November 2007)
Ceating a Game Loop