Falling Snow Animation in Windows Phone 8

In the Christmas and Holiday season most developers write Christmas apps. So in this article I will show you how to implement a simple falling snow animation effect which you can use in order to make your application look cooler. Here’s a demo,

Here’s how it can be done,

Step 1: Add a Canvas to your Page

Create a new Windows Phone 8 project and a canvas to it. Replace the existing ContentPanel Grid with this Canvas.

Step 2: Add function to Generate Snow

We will use ellipse elements in order to imitate snowflakes but you can use any another UIElement. In code behind we add a function GenerateEllipse to generate ellipses of small size. You way define a range for height and width to randomize the snowflakes’ size.

Step 3: Create a Story Board Animation for Canvas

The next step is to create the Storyboard animation which will animate Canvas.Left and Canvas.Top properties of the Canvas child elements to a particular double value. 

Step 4: Add Logic for Snowfall Animation

We use speed and radius variables in order to define the speed with which the snowflakes fall and how wide the radius of their oscillation will be. Also the opacity is set to something random, giving it a semitransparent look.  When the event occurs, it means that there is a frame of visuals available to render to the Silverlight content surface. Refer to this MSDN article to learn more about Rendering.

Step 5: Call Snowfall animation function on Initialization

And finally the last step is to call the StartFallingSnowAnimation method after InitializeComponent.

An amazing article by kirupa helped us write the tutorial to implement falling snow animation.

That’s it. Run the app in the emulator and it should work perfectly. Download the source code and use it as reference. Merry Christmas!

Download Falling-Snow.zip