One of the things that I’ve gotten somewhat frustrated in my Silverlight and WPF work is the fact that sometimes (not often, but sometimes), I really need to build a storyboard or keyframe animation programmatically. Especially if you’re doing anything relating to information visualization and you need to create animations for path points, it can be impractical to build a XAML animation and change the values to whatever you need.

By the way, if you need additional help on in depth Silvelright animation, check out Jeff Paries’ excellent Foundation Silverlight 2 Animation.

In response to this dearth, this is a tutorial on how to create a storyboard in code (specifically C#). Basically, I’m just going to show a XAML animation (which is what I’m used to dealing with because Blend builds them for me) and then show how to create that animation in C#.

This animation will animate the first point in a path to the X,Y coordinate 1,1.

XAML animation:

<Storyboard >
    <PointAnimationUsingKeyFrames 
      BeginTime="00:00:00" 
      Storyboard.TargetName="myPath" 
      Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(LineSegment.Point)">
        <EasingPointKeyFrame KeyTime="00:00:01" Value="1,1" />
    </PointAnimationUsingKeyFrames>
</Storyboard>

C# animation:

//Code equivalent of: <Storyboard>
Storyboard myNewStoryBoard = new Storyboard();

//Code equivalent of:
//<PointAnimationUsingKeyFrames
//    BeginTime="00:00:00"
//    Storyboard.TargetName="myPath"
//    Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(LineSegment.Point)">
PointAnimationUsingKeyFrames myPointAnimation = new PointAnimationUsingKeyFrames();
myPointAnimation.BeginTime = new TimeSpan(0);
Storyboard.SetTargetName(myPointAnimation, myPath.Name);
Storyboard.SetTarget(myPointAnimation, myPath);
Storyboard.SetTargetProperty(myPointAnimation,
    new PropertyPath("(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(LineSegment.Point)"));

//Code equivalen of:
// <EasingPointKeyFrame KeyTime="00:00:01" Value="1,1" />
EasingPointKeyFrame targetKeyFrame = new EasingPointKeyFrame();
targetKeyFrame.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(1000));
targetKeyFrame.Value = new Point(1, 1);

//Add the keyFrame to the animation
myPointAnimation.KeyFrames.Add(targetKeyFrame);

//Add the animation to the Storyboard
myNewStoryBoard.Children.Add(myPointAnimation);

//Now your storyboard is ready to go… just start it
myNewStoryBoard.Begin();

There is not, as far as I know, any way to assign a x:Name property to an object in code. Why? Because if you created the object in code, you should already have a way of accessing it. So the example above is an animation that is looking for a path named “myPath” that is already in the XAML.

If you created your path programmatically (it doesn’t exist in the XAML, but exists in the code), replace this line:

Storyboard.SetTargetName(myPointAnimation, myPath.Name);

with this line.

Storyboard.SetTarget(myPointAnimation, myPath);

where myPath is of type Path and refers to the actual Path you want to animate.