Creating Falling Snow Using Code

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 =)

Comments

• Anonymous
  December 26, 2007
  With WPF, you have several ways of creating animations. A common way is by using Storyboards/keyframes

• Anonymous
  December 26, 2007
  Nitpicking: Maximize the windows and have fun.

• Anonymous
  December 26, 2007
  Tanveer - good catch. I have updated the executable by setting the ResizeMode to NoResize.

• Anonymous
  December 28, 2007
  With WPF, you have several ways of creating animations. A common way is by using Storyboards/keyframes,

• Anonymous
  December 29, 2007
  Kirupa has created a nice WPF sample that shows how to create falling snow animation in WPF in code.

• Anonymous
  January 05, 2008
  I know I'm asking for the impossible and that MS favors HD Photo but pls support JPEG 2000 and OpenEXR formats in the next Expression Design version through WIC.

• Anonymous
  January 06, 2008
  I guess I need to commit to posting non-submitted stuff more regular. I stopped doing that a while back

• Anonymous
  January 06, 2008
  anonymous - thanks for the suggestion. I'll pass that along to the Design team :)

• Anonymous
  December 27, 2008
  Exactly a year ago (plus one day…but who’s counting?!), I posted a sample WPF application that simulates

• Anonymous
  January 27, 2010
  A file is missing in the source code(.pfx).

• Anonymous
  March 05, 2010
  The .pfx is trivial to building and running the app. It's just for signing purposes.