Here is a link to the presentation video in WMV format.

If you like you can see all the episodes and follow along with the tutorial.

Click here to see a demo of what the game will look like after we finish this episode.

I want to make sure that I give tons of credit to Robby Ingebretsen from nerdplusart for his Silverlight Particle Generator. If you haven’t had a chance to play with it before (and I do mean play) then take a few minutes to do so.

The plan is to take the ParticleControl from that solution and wrap it in a ParticlesBehavior that will be triggered when the item’s path (ex: staplerPath) is clicked.

First we need to take a side-step into the differences between an action and a behavior and their relationship to triggers. We will start to see some patterns emerge. In the previous episodes we looked at two actions (ChangeProperyAction & PlaySoundAction) and noticed that an action specifies what will happen and to which object. When the action will occur is specified by a trigger. There are two main types of actions (TriggerAction & TargetedTriggerAction). The first allows us to attach to an object and invoke some code when a trigger is fired whereas the second does that and defines a target for the action that is different from the object that the action is associated with. Both of these actions can only be called by a single trigger. A behavior in some ways appears simpler than an action because there is no direct connection to a trigger and therefore no Invoke method to be called. All we get are overrides for OnAttached and OnDetaching. But behaviors are powerful, can hold state, and can do various things based on many triggers.

For a class diagram of the Action and Behavior base classes as well as some great sample behaviors, check out the Behaviors and Triggers in Silverlight 3 article on SilverlightShow.

Hint: We will use the MagnifierOverBehavior in the next episode.

Enough talking lets open Blend and get coding. In the Projects panel, create a folder called Interactivity and under it a folder called ParticlesBehavior. Interactivity seems to be the term Microsoft uses to talk about both actions and behaviors and by the time we are done with this tutorial we will have created both types. I am doing this in Blend, because it has a template to create a basic behavior.

Right-click the ParticlesBehavior folder, pick Add New Item, select Behavior, and enter the name: ParticlesBehavior.

Click OK to create the behavior.

After saving all the files, open the solution concurrently in Visual Studio 2008 so that you can switch back and forth between Visual Studio and Blend as needed.

Go to the Silverlight Particle Generator page and download the source code. Copy the following files into the Interactivity\ParticlesBehavior folder and include them in the project:

• ParticleControl.xaml
• ParticleControl.xaml.cs
• LICENSE.TXT

The quick idea behind the ParticlesBehavior is that it will be attached to the LayoutRoot canvas. The behavior will handle the canvas’s MouseMove event and store the current mouse position. When the ParticlesBehavior is notified that it should show particles, it creates an instance of the ParticleControl and positions it by setting the OffsetX and OffsetY properties.

We start by changing the class declaration so that ParticlesBehavior inherits from Behavior<Canvas>. Now throughout code, AssociatedObject will be of type Canvas. This also means that this behavior can only be attached to objects of type Canvas. In the OnAttached method an event handler is created for the canvas’ MouseMove event whereas in the OnDetaching method the event handler is removed. When the mouse is moved, the current position is recorded.

public class ParticlesBehavior : Behavior<Canvas>
{
private Point currentMousePosition;

protected override void OnAttached()
{
base.OnAttached();
AssociatedObject.MouseMove += new MouseEventHandler(AssociatedObject_MouseMove);
}

protected override void OnDetaching()
{
base.OnDetaching();
AssociatedObject.MouseMove -= new MouseEventHandler(AssociatedObject_MouseMove);
}

void AssociatedObject_MouseMove(object sender, MouseEventArgs e)
{
currentMousePosition = e.GetPosition(null);
}
}

Now we need a way to trigger when the control will be shown or hidden. This is achieved by adding a command to ParticlesBehavior called ShowParticles. In the constructor, instantiate a new ActionCommand and pass it an Action delegate. The method that you use can have no parameters or one parameter (of type object). Later when triggers are associated with this behavior you can set the value of the CommandParameter. If you have a method that passes an object parameter, you can get access to the parameter.

This command then creates and sets properties on the ParticleControl and adds it to the Children collection of LayoutRoot. Update the ParticlesBehavior class to include this code:

public class ParticlesBehavior : Behavior<Canvas>
{
    private Point currentMousePosition;

    public ParticlesBehavior()
    {
        this.ShowParticles = new ActionCommand(this.OnShowParticles);
    }

    protected override void OnAttached()
    {
        base.OnAttached();
        AssociatedObject.MouseMove += new MouseEventHandler(AssociatedObject_MouseMove);
    }

    protected override void OnDetaching()
    {
        base.OnDetaching();
        AssociatedObject.MouseMove -= new MouseEventHandler(AssociatedObject_MouseMove);
    }

    void AssociatedObject_MouseMove(object sender, MouseEventArgs e)
    {
        currentMousePosition = e.GetPosition(null);
    }

    public ICommand ShowParticles
    {
        get;
        private set;
    }

    private void OnShowParticles()
    {
        ParticleControl p = new ParticleControl();

        p.OffsetX = currentMousePosition.X;
        p.OffsetY = currentMousePosition.Y;

        AssociatedObject.Children.Add(p);
    }

}

If you compile the project, you will now see the ParticlesBehavior in the Assets panel. Drag and drop it on LayoutRoot. The properties panel will have a ShowParticles group created for the ShowParticles Command and an empty Triggers list:

Click the plus sign to the right of Triggers and pick EventTrigger and set the SourceName (staplerPath) and EventName (MouseLeftButtonDown):

What this is saying is that when the staplerPath object is clicked then it will call the ShowParticles command on this behavior. You could also specify a CommandParameter which you then could use if OnShowParticles had an object parameter defined. When you click the plus sign next to Triggers again, you can specify another EventTrigger to be called when idolPath is clicked. Repeat this for all the paths.

Run the game now and click on an item. You should see lots of particles flowing from that location. Find another object and click it and there will be a second stream of particles. The ParticleControl currently doesn’t have a way to stop the particles from flowing. We will take care of that in a minute. But let’s first try to figure out what is happening between the triggers and the behavior. The command defined on the behavior is an ICommand, it knows nothing about triggers. And triggers just know when something is going to happen. How does it know to call a command on the behavior? The answer is the InvokeCommandAction that is created behind the scenes. This can be seen in a diagram from the Expression Blend SDK User Guide:

It might be a good learning opportunity to intercept the trigger before it calls InvokeCommandAction and see it doing the work of connecting the trigger to the behavior. Let’s create a trigger that we can use and debug. In a new folder under Interactivity called DebugEventTrigger, create a class called DebugEventTrigger.cs:

public class DebugEventTrigger : System.Windows.Interactivity.EventTrigger
{
    public DebugEventTrigger() : base() {}

    public DebugEventTrigger(string eventName) : base(eventName) {}

    protected override void OnEvent(EventArgs eventArgs)
    {
        base.OnEvent(eventArgs);
    }
}

We derive the class from EventTrigger so we can use it just list the triggers we have already used. Compile the project and in Blend, add this trigger to the triggers collection on the ParticlesBehavior and select the SourceName and EventName. Switch back to Visual Studio and set a breakpoint in the OnEvent method. Run the app in debug mode from Visual Studio. When the breakpoint is hit, look at the Locals window and you will see that the trigger has a single action, InvokeCommandAction, the CommandName is “ShowParticles” and the AssociatedObject is ParticlesBehavior.

Back to the issue of the never-ending particles. To fix this, we need just one set of changes to ParticleControl. The UpdateParticles method is the heart of the control and is called each time the Silverlight rendering process renders a frame. It updates existing particles, creates new particles, and removes expired particles. The particles are created 10 at a time until the particles collection reaches the MaxParticleCount. But because particles are also being removed from this collection the result is a never-ending flow of particles. Change this.particles.Count to totalParticlesCreated and define it as a private field at the top of the class definition as type int. At the end of the SpawnParticle method, increment the totalParticlesCreated value by one. Now the control will create particles until MaxParticleCount is reach and stop.

We have a fully-functioning ParticlesBehavior.

The last thing I did was add the dependency properties from ParticleControl (StartColor, EndColor, Fuzziness, MaxParticleCount, OriginVariance, Speed, ParticleSize, ParticleSizeVariance, Life, and LifeVariance) to ParticlesBehavior and set the values for each created instance of the ParticleControl. This gives a nice design-time experience to configure the particles. I changed a few values to better time the particles with the length of the sound played when an item is clicked:

There is one final thing we need to do when an item is clicked. Right now you can click on an item multiple times and it will play a sound and generate particles each time. To solve this, we can use the RemoveElementAction. This action removes the targeted element from its parent control. Drag the RemoveElementAction onto the staplerPath object. Since the trigger defaults to EventTrigger and MouseLeftButtonDown and the TargetName defaults to the AssociatedObject then we don’t have to change anything:

When we click on the staplerPath then it will:

• Change the opacity of its corresponding TextBlock (ChangePropertyAction)
• Play a sound (PlaySoundAction)
• Spray particles (ParticlesBehavior)
• Be removed from its parent control (RemoveElementAction)

Download the source for this episode.

In our next episode, we will use a magnifer pixel shader effect wrapped in a behavior to allow the user to zoom in on portions of the image.