Falling Snow in Silverlight - Page 2
       by kirupa  |  19 December 2009

In the previous page, you set up your artboard and added some ellipses that will be snowflakes. Right now, nothing really happens if you test your application because no animation has been defined. We'll start to fix that on this page.

Writing the FallingSnow Behavior
The actual effect of animating each snowflake is handled entirely by a single behavior that you place on your LayoutRoot. I'll describe behaviors in more detail shortly, but if you are itching to know more about them now itself, check out my earlier Introduction to Behaviors tutorial.

Anyway, let's look at how to create this behavior:

1. Look in your Projects pane and find your Silverlight Application project. It will be the one with the C# icon next to it:

[ find the Application project ]

2. Right click on the Silverlight Project, called FallingSnowExample in my case, and (from the menu that appears) select Add New Item.

3. The New Item dialog will launch. Find the Behavior item from a list of items displayed, and give the behavior the name FallingSnowBehavior:

[ give your behavior the name FallingSnowBehavior ]

After you have given your soon-to-be-created behavior the name FallingSnowBehavior, click OK to create this behavior and to close the New Item dialog.

4. Right now, your FallingSnowBehavior.cs file will be open for you to edit.

[ when you create the behavior, the C# file that makes it up will be opened ]

As you can see, this file isn't empty. It already contains some code and comments that help provide some assistance. Let's add some code to this behavior. Add the following, non-grayed out, lines to your code in the right location:

using System.Text;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Shapes;

using System.Windows.Interactivity;

//using Microsoft.Expression.Interactivity.Core;

 

namespace FallingSnowExample

{

public class FallingSnowBehavior : Behavior<Canvas>

{

private static Random randomNumber;

 

public FallingSnowBehavior()

{

// Insert code required on object creation below this point.

 

//

// The line of code below sets up the relationship between the command and the function

// to call. Uncomment the below line and add a reference to Microsoft.Expression.Interactions

// if you choose to use the commented out version of MyFunction and MyCommand instead of

// creating your own implementation.

//

// The documentation will provide you with an example of a simple command implementation

// you can use instead of using ActionCommand and referencing the Interactions assembly.

//

//this.MyCommand = new ActionCommand(this.MyFunction);

}

 

protected override void OnAttached()

{

base.OnAttached();

 

randomNumber = new Random();

 

this.AssociatedObject.Loaded += new RoutedEventHandler(ApplicationLoaded);

}

 

void ApplicationLoaded(object sender, RoutedEventArgs e)

{

foreach (FrameworkElement element in this.AssociatedObject.Children)

{

FrameworkElement localCopy = element;

 

double yPosition = Canvas.GetTop(localCopy);

double xPosition = Canvas.GetLeft(localCopy);

 

double speed = 2*randomNumber.NextDouble();

double counter = 0;

double radius = 30 * speed * randomNumber.NextDouble();

 

localCopy.Opacity = .2 + randomNumber.NextDouble();

 

CompositionTarget.Rendering += delegate(object o, EventArgs arg)

{

counter += Math.PI / (180*speed);

 

if (yPosition < Application.Current.RootVisual.DesiredSize.Height)

{

yPosition += .2 + speed;

}

else

{

yPosition = -localCopy.Height;

}

 

Canvas.SetTop(localCopy, yPosition);

Canvas.SetLeft(localCopy, xPosition + radius * Math.Cos(counter));

};

}

}

 

protected override void OnDetaching()

{

base.OnDetaching();

 

// Insert code that you would want run when the Behavior is removed from an object.

}

 

/*

public ICommand MyCommand

{

get;

private set;

}

 

private void MyFunction()

{

// Insert code that defines what the behavior will do when invoked.

}

*/

}

}

Once you have added the lines of code, build your project by going to Project | Build Project. If all of the code was inserted correctly, you should see no build warnings or errors. The most common mistake you may run into is where you forget to change from Behavior<DependencyObject> to Behavior<Canvas> in the class declaration or omit the randomNumber Random object.

You are still not fully done yet. This behavior doesn't actually affect anything just yet, so let's fix that on the next page.

Onwards to the next page!

1 |  2 | 3 | 4