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.
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:
-
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 ]
-
Right click on the
Silverlight Project, called FallingSnowExample
in my case, and (from the menu that appears)
select Add New Item.
-
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.
-
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!
|