When I did a job for a partner, helping them implement a new feature in their Windows Phone app, I had to implement a storyboard completely in code. It was not easy to find a good example of this. Therefore, here is my own example of how I did it.

The example I want to show creates a beacon, with three rings, where the middle ring expands to get a homing effect.

private void drawBeacon()
{
    var d = new Grid();
    var e1 = new Ellipse()
    {
        Stroke = new SolidColorBrush(System.Windows.Media.Color.FromArgb(255, 0, 200, 0))
    };

    var scaleTransform = new ScaleTransform() { ScaleX = 1, ScaleY = 1 };
    var e2 = new Ellipse()
    {
        Stroke = new SolidColorBrush(System.Windows.Media.Color.FromArgb(255, 0, 200, 0)),
        RenderTransform = scaleTransform,
        RenderTransformOrigin = new Point(0.5, 0.5)
    };
            
    var doubleAnimation1 = new DoubleAnimation()
    {
        Duration = new Duration(TimeSpan.FromSeconds(2)),
        From = 0,
        To = 1
    };

    var doubleAnimation2 = new DoubleAnimation()
    {
        Duration = new Duration(TimeSpan.FromSeconds(2)),
        From = 0,
        To = 1
    };

    var e3 = new Ellipse()
    {
        Stroke = new SolidColorBrush(System.Windows.Media.Color.FromArgb(255, 0, 200, 0)),
        Width = 14,
        Height = 14
    };

    var storyBoard = new Storyboard();
    storyBoard.RepeatBehavior = RepeatBehavior.Forever;
    storyBoard.Children.Add(doubleAnimation1);
    storyBoard.Children.Add(doubleAnimation2);
    Storyboard.SetTarget(doubleAnimation1, scaleTransform);
    Storyboard.SetTarget(doubleAnimation2, scaleTransform);
    Storyboard.SetTargetProperty(doubleAnimation1, new PropertyPath("ScaleX"));
    Storyboard.SetTargetProperty(doubleAnimation2, new PropertyPath("ScaleY"));            

    d.Children.Add(e1);
    d.Children.Add(e2);
    d.Children.Add(e3);

    ContentPanel.Children.Add(d);

    storyBoard.Begin();
}

I create a Grid and add three Ellipses to it. The interesting stuff is what I do with the second ellipse, with the name “e2”.

The first thing is that I create a ScaleTransform and add it to the property RenderTransform, which is an abstract class that can contains several different transformation classes. I also have to set the origin of the transformation. I do that by setting the property RenderTransformOrigin with a Point. (0.5 is in the middle of the object.) Now is “e2” ready to be part of a storyboard.

I need to create two DoubleAnimation because I want to animate two properties, ScaleX and ScaleY. (DoubleAnimation does not mean that it animates two thing. The “double” says that it animates a double type.) Both have the same values.

Now is it time to create the storyboard itself. I set the RepeaterBehavior to Forever so that it will run until I stop it manually. Then I add the two DoubleAnimations to that storyboard. The next four lines of code is the most complicated in this example. Here we (including myself) have problem doing it right.

We set the property Target, which is an attached property that the storyboard needs, to scaleTransform on the DoubleAnimation object. We do the same with the other property TargetProperty. To summarize: The Target property is which object that should be animated and the TargetProperty is which property on that target that should be animated.

The last thing is to add the three ellipses to the grid and it to the page. Now we can run this storyboard.