Creating Falling Snow Using Code

Article
12/26/2007

With WPF, you have several ways of creating animations. A common way is by using Storyboards/keyframes, and you can do that easily using Blend itself. If you are willing to take a trip through the dark side and use code to create your animations, you have the ability to create some really cool effects.

Snow is the big thing during this part of the year in much of the world...except if you live in a place that is too warm to have snow in December. To those of you who can't experience real snow (like me who is spending the holidays here), I decided to create a small application that uses UserControls, some old-fashioned C# code, and a dash of CompositionTarget.Rendering to simulate falling snow on your computer:

Click here to run the application, but if you are unable to run the ClickOnce application, download and extract the source code and use Blend 2 or Visual Studio 2008 to open and run this application instead. Let's look at some interesting bits and pieces of code that make up this application:

CompositionTarget.Rendering
When creating animations via code, you need some sort of a loop structure that updates what is displayed on your screen. The loop structure in our case is provided via the CompositionTarget.Rendering event which calls our MoveSnowFlakes event handler each time your scene is drawn/re-drawn:

 if (!IsInDesignMode())
{
    CompositionTarget.Rendering += 
                      new EventHandler(MoveSnowflakes);
}

For more information on what the CompositionTarget.Rendering event does, refer to its MSDN documentation page.

Creating the Oscillation

If you observe the snowflakes as they fall, you'll see that they oscillate horizontally. The oscillation effect is provided by the Cosine function which takes a number as its argument:

 radians += .5*speed;

cX = Canvas.GetLeft(this) + Math.Cos(.1*radians);

The oscillations are possible because Cosine is considered to be a periodic function whose output always falls within -1 and 1.

Setting the Positions

We looked at how we create a loop to update what gets displayed and how the oscillation effect is created. The next thing to look at is how the actual positioning works:

 Canvas.SetLeft(this, cX);
Canvas.SetTop(this, cY);

if (cY > stageHeight)
{
    cY = -50;

    Canvas.SetTop(this, cY);
}

Because I am interested in positioning each snowflake precisely, each snowflake is placed inside a Canvas layout control, and the exact position is set using the SetLeft and SetTop attached properties. With this approach, I gain the ability to position my snowflake with exact x/y coordinates, but I do lose the automatic layout functionality WPF provides.

I hope this post helped you to see a new way of creating animations in WPF. Because WPF uses hardware acceleration and provides decent drawing support, feel free to experiment and create far cooler animations than what I have shown above or were able to create in the past with other technologies.

Cheers!

Kirupa =)

Creating Falling Snow Using Code

Additional resources