Expression Blend and Design

The team blog of the Expression Blend and Design products.

Creating Falling Snow Using Code

Creating Falling Snow Using Code

  • Comments 11

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:

fallingSnow

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

Leave a Comment
  • Please add 8 and 2 and type the answer here:
  • Post
  • With WPF, you have several ways of creating animations. A common way is by using Storyboards/keyframes

  • Nitpicking: Maximize the windows and have fun.

  • Tanveer - good catch. I have updated the executable by setting the ResizeMode to NoResize.

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

  • Kirupa has created a nice WPF sample that shows how to create falling snow animation in WPF in code.

  • 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.

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

  • anonymous - thanks for the suggestion. I'll pass that along to the Design team :)

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

  • A file is missing in the source code(.pfx).

  • The .pfx is trivial to building and running the app. It's just for signing purposes.

Page 1 of 1 (11 items)