SHAZAML! » Trigger

Hidden Object: Episode 14 – Shake it up

Mark Tucker — Wed, 25 Nov 2009 13:05:17 +0000

So far in the game, we have particles when an item is clicked, a hint to show the location of an unfound item, but what should we do if the player goes berserk and wildly clicks all over the place in hopes of finding a difficult-to-find item? In this episode of Creating a Hidden Object Game is Silverlight 3 we will add an earthquake effect if the player clicks too many times in a 5 second interval.

Let’s first start with the shake effect. The magnifierCanvas Canvas contains the background image and all Paths for each clickable item. We will create a new storyboard called ShakeStoryboard that will animate the Left property of the Canvas:

Each of the 4 key frames set the Left property to a different value as shown in the storyboard XAML:

The Storyboard has the RepeatBehavior property set to repeat 5 times and the SpeedRatio property set to speed up the animation.

If the player clicks on the background image 10 times within a 5 second interval, then the ShakeStoryboard will play. To accomplish this we need three SetGlobalCounterAction instances and one ControlStoryboardAction added to the UserControl:

The first SetGlobalCounterAction sets the values for the TooManyClicks counter when the UserControl loads:

The ControlStoryboardAction plays the ShakeStoryboard when the GlobalCounterMaxReachedTrigger is fired for the TooManyClicks key which we set previously to 10.

When the counter reaches 10 we need to set it back to zero which is what the second SetGlobalCounterAction does:

The final SetGlobalCounterAction uses the TimerTrigger to reset the counter every 5 seconds:

The only thing left to do is add the IncrementGlobalCounterAction to the background image to increment the counter by 1:

So with 5 Action instances, 3 Trigger types, 1 Storyboard, and 0 lines of code we were able to quickly add this feature to the game.

Source Code

Demo

Video: Creating a Silverlight 3 Casual Game using Blend 3 and Triggers, Actions, and Behaviors

Mark Tucker — Mon, 09 Nov 2009 15:19:11 +0000

On Saturday, November 7, 2009 at 9:00am I presented at the Desert Code Camp in Phoenix, AZ. The topic of my presentation was Silverlight casual game development. In less than an hour I demonstrated how to use triggers, actions, and behaviors in Blend 3 to create a hidden object game. Because all code was contained in the TABs (Triggers, Actions, and Behaviors) there was no code behind for the main UserControl.

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.

Hidden Object: Episode 10 – Counting Items Found with Counter Triggers, Actions & a Behavior

Mark Tucker — Sun, 04 Oct 2009 07:10:46 +0000

In episode 9 of Creating a Hidden Object Game is Silverlight 3 we added additional screens to the game. In this episode, we will add the Win screen and a collection of triggers, actions, & behaviors that work with a global counter.

The Win screen is shown after all 13 items have been clicked. What we need is an integer counter that subtracts one for each item clicked and when the count gets to zero change the state of the MainPage UserControl to show the screen.

Similar to what we did in the last episode, create a new Canvas called winCanvas and position it to the left of the UserControl on the artboard.

In the States panel, add the WinScreen state to the ScreenStates group:

With recording mode on for the WinScreen state, set the Top and Left properties of winCanvas to 0.

All we need to do is figure out a way to trigger a state change to show this screen.

The solution is a variation of the Global State Behavior sample by Christian Schormann which uses a Singleton object containing a Dictionary to hold values based on a key (or tag).

Let’s go step-by-step through the use of the GlobalCounter classes before we look at any code.

The counter store (GlobalCounterStore) has an empty dictionary keyed using a CounterKey. Some trigger invokes SetGlobalCounterAction which sets the initial values for Value, MinValue, and MaxValue in a dictionary item with a CounterKey of “HiddenItems”. In this case the trigger that sets the values is an EventTrigger on the MainPage UserControl for the Loaded event:

Any time that an entry is changed in the counter store, the Changed event is raised which passes Key, Value, MinValue, and MaxValue. Both the ShowGlobalCounterBehavior and the GlobalCounterChangedTrigger handle this event. Since every instance of the GlobalCounterChangedTrigger & ShowGlobalCounterBehavior handle the Changed event they need to have a CounterKey property to determine if they should take any action for that event. In the case of ShowGlobalCounterBehavior, the associated TextBlock’s Text property is set to Value. For the GlobalCounterChangedTrigger any actions are invoked. In this episode, the GlobalCounterChangedTrigger is not used but is included for completeness.

Now that the counter store has been initialized with values, we can use the IncrementGlobalCounterAction to increment the value. In this case we are incrementing the value by -1 which updates the value in the counter store causing the Changed event to fire which is handled by the ShowGlobalCounterBehavior which sets the text on the TextBlock.

The IncrementGlobalCounterAction is invoked for each Path object clicked until the counter reaches the MinValue:

The Changed event is fired to update the TextBlock, but the MinValueReached event is also fired. This is handled by the GlobalCounterMinReachedTrigger which compares its CounterKey with the Key passed in the event and if they match then the trigger invokes its actions. For this episode, there is a GoToStateAction associated with the UserControl that responds to the GlobalCounterMinReachedTrigger and sets the current state to WinScreen which shows winCanvas.

In cases where you want an incrementing counter instead of a decrementing one, pass a positive value for the IncrementCounterValueBy property of IncrementGlobalCounterAction and use the GlobalCounterMaxReachedTrigger.

The global counter classes can be used for many things including a lives counter, health, shield strength, or to keep track of a player’s score.

Here are a class diagram of the GlobalCounterStore and related classes:

Besides the implementation of the Singleton pattern, the most interesting code can be found in the SaveToStore and IncrementCounter methods of GlobalCounterStore:

internal sealed class GlobalCounterStore
{
    private Dictionary store;

    internal void SaveToStore(string key, int value, int minValue, int maxValue)
    {
        if (key == null)
            return;
        var item = new GlobalCounterItem() {Value = value, MinValue = minValue, MaxValue = maxValue };

        if (store.ContainsKey(key))
        {
            store[key] = item;
        }
        else
        {
            store.Add(key, item);
        }

        OnChanged(key, item);
    }

    internal void IncrementCounter(string key, int incrementBy)
    {
        if ((key == null) || !store.ContainsKey(key))
            return;

        int newValue = store[key].Value + incrementBy;
        store[key].Value = newValue;

        OnChanged(key, store[key]);

        if (newValue >= store[key].MaxValue)
            OnMaxValueReached(key, store[key]);

        if (newValue <= store[key].MinValue)
            OnMinValueReached(key, store[key]);
    }
}

The SetGlobalCounterAction is a TriggerAction that defines four dependency properties for CounterKey, CounterValue, CounterMinValue, and CounterMaxValue. The Invoke method calls the SaveToStore method on GlobalCounterStore.

The IncrementGlobalCounterAction is a TargetedTriggerAction that defines dependency properties for CounterKey and IncrementCounterValueBy. It’s Invoke method calls the IncrementCounter method on GlobalCounterStore.

The three triggers are very similar in that each defines a CounterKey dependency property and each adds a handler to an event raised by GlobalCounterStore:

In the case of GlobalCounterMinReachedTrigger, the OnAttached method adds a handler for the GlobalCounterStore’s MinValueReached event whereas the handler is removed in the OnDetaching method:

public class GlobalCounterMinReachedTrigger : TriggerBase
{
    protected override void OnAttached()
    {
        base.OnAttached();
        GlobalCounterStore.Instance.MinValueReached += Instance_MinValueReached;
    }

    protected override void OnDetaching()
    {
        base.OnDetaching();
        GlobalCounterStore.Instance.MinValueReached -= Instance_MinValueReached;
    }

    void Instance_MinValueReached(object sender, GlobalCounterEventArgs e)
    {
        if (CounterKey == null)
            return;

        if (CounterKey == e.Key)
            this.InvokeActions(e);
    }
}

When the MinValueReached event is raised due to a change in the GlobalCounterStore to any dictionary entry regardless of its key, the passed key (e.Key) is compared to the CounterKey property. If the values match, then the actions for this trigger are invoked.

ShowGlobalCounterBehavior is a behavior that can be attached to a TextBlock control and functions is a similar way as the triggers:

It defines the CounterKey property and handles the Changed event raised by GlobalCounterKey:

public class ShowGlobalCounterBehavior : Behavior
{
    protected override void OnAttached()
    {
        base.OnAttached();
        GlobalCounterStore.Instance.Changed += Instance_Changed;
    }

    protected override void OnDetaching()
    {
        base.OnDetaching();
        GlobalCounterStore.Instance.Changed -= Instance_Changed;
    }
 
    void Instance_Changed(object sender, GlobalCounterEventArgs e)
    {
        if (CounterKey == e.Key)
        {
            if (e.Value > e.MaxValue)
                AssociatedObject.Text = e.MaxValue.ToString();
            else if (e.Value < e.MinValue)
                AssociatedObject.Text = e.MinValue.ToString();
            else
                AssociatedObject.Text = e.Value.ToString();
        }
    }
}

It is possible to increment the Value in the counter store by more than 1 so I added checks so that the TextBlock will never show values greater than MaxValue or less than MinValue.

Now it is time to use these classes in Blend. Drop an instance of SetGlobalCounterAction on the UserControl, a GoToStateAction on LayoutRoot, and a IncrementGlobalCounterAction on a Path:

The values for SetGlobalCounterAction are set as follows:

The new GoToStateAction uses GlobalCounterMinReachedTrigger and sets the StateName to WinScreen:

Each path will have an IncrementGlobalCounterAction set with these values:

Finally, we add a TextBlock to our Canvas to hold the count of remaining items and add the ShowGlobalCounterBehavior to it:

The only property to set on the behavior is the CounterKey:

Once we add IncrementGlobalCounterAction to each Path, we can run the game and as we find items the counter will decrement by 1. When the value reaches 0, then the winning screen is shown.

Source code

Demo

In the next episode we will update the Particles Behavior to allow particle custom shapes.

Hidden Object: Episode 7 – Use an Action to Toggle the Magnifier Behavior

Mark Tucker — Sat, 26 Sep 2009 13:03:42 +0000

This is episode 7 of Creating a Hidden Object Game is Silverlight 3.

In the last few posts we have been working on the magnifier feature of the game which we will finish in this episode.

Please review the following posts:

First we will add in the following files into the ClutteredCube project:

Interactivity folder (from Base Classes for Custom Behaviors)
- BaseBehavior.cs
- BaseBehaviorT.cs
Interactivity\SetInteractionPropertyAction folder (from Creating an Action to set Properties on Actions & Behaviors)
- ConverterHelper.cs
- SetInteractionPropertyAction.cs

The first thing we want to do is to change MagnifierOverBehavior so that it inherits from our custom behavior base class thus inheriting the IsEnabled property:

public class MagnifierOverBehavior : BaseBehavior

The only other change we need to make this behavior is not set the Effect property on MouseEnter but instead in MouseMove based on the value of the IsEnabled property:

private void AssociatedObject_MouseEnter( object sender, MouseEventArgs e )
{
  this.AssociatedObject.MouseMove += new MouseEventHandler( AssociatedObject_MouseMove );
  //this.AssociatedObject.Effect = this.magnifier;
}

private void AssociatedObject_MouseMove( object sender, MouseEventArgs e )
{
  if (IsEnabled)
  {
    if (this.AssociatedObject.Effect != this.magnifier)
    {
      this.AssociatedObject.Effect = this.magnifier;
    }
    ...
  }
}

In Blend, open the MainPage and select the MagnifierOverBehavior in the Object tree under magnifierCanvas. Name the behavior magnifierBehavior and set IsEnabled to false:

From the Assets tab drag two instances of SetInteractionPropertyAction onto the CheckBox magnifier control:

On the first one, set the properties as follows:

EventName: Checked
TargetName: magnifierCanvas
ObjectName: magnifierBehavior
PropertyName: IsEnabled
Value: true

Set the second the same as the first, except:

EventName: Unchecked
Value: false

Make sure that the CheckBox control IsChecked property is false to match the InEnabled value of false for magniferBehavior.

Run the game and verify that magnification is only turned on when the CheckBox is checked.

Let’s do one more thing to finish this episode. Notice that magnifier.png has a white background behind the glass part of the magnifying glass. The image should be on top of something white like a notepad. Import the notepad image and drop it at the bottom of LayoutRoot.

Position it how you want it and move the magnifier CheckBox on top of it.

Source Code

Demo

There are many features to add so I will keep the next episode contents a surprise.

Creating an Action to set Properties on Actions & Behaviors

Mark Tucker — Tue, 22 Sep 2009 23:36:06 +0000

Behaviors and actions have properties of their own and it would be useful to be able to set those properties as a result of a trigger.

For this post, we will use the ShowMessageBox action that is part of the Expression Blend Samples CodePlex project.

To explore this, create a Silverlight project in Blend 3, drop a Rectangle on LayoutRoot, and drop a ShowMessageBox action onto the Rectangle. The ShowMessageBox action is under the Behaviors > Experimental in the Assets tab:

Change the rectangle stroke and fill so that it is easily seen.

Set the Caption and Message properties of ShowMessageBox:

When we run the application and click on the rectangle, the message box shows:

What if we wanted to change the value of the Message property when a CheckBox control is checked or unchecked?

To accomplish this, we will create SetInteractionPropertyAction that derives from TargetedTriggerAction and adds properties for the name of the action or behavior, the property on that action/behavior, and the value to set on that property:

public string ObjectName
{
  get { return (string)GetValue(ObjectNameProperty); }
  set { SetValue(ObjectNameProperty, value); }
}
public static readonly DependencyProperty ObjectNameProperty =
  DependencyProperty.Register("ObjectName",
  typeof(string), typeof(SetInteractionPropertyAction),
  new PropertyMetadata(null));

public string PropertyName { get { return (string)base.GetValue(PropertyNameProperty); } set { base.SetValue(PropertyNameProperty, value); } } public static readonly DependencyProperty PropertyNameProperty = DependencyProperty.Register("PropertyName", typeof(string), typeof(SetInteractionPropertyAction), new PropertyMetadata(null)); public string Value { get { return (string)base.GetValue(ValueProperty); } set { base.SetValue(ValueProperty, value); } } public static readonly DependencyProperty ValueProperty = DependencyProperty.Register("Value", typeof(string), typeof(SetInteractionPropertyAction), new PropertyMetadata(null));

Next we need to implement the Invoke method which finds the action or behavior under the Target control that matches the ObjectName and sets its property defined by PropertyName to the value specified in Value.

To find actions and behaviors associated with a given object, we use the GetTriggers and GetBehaviors static methods defined on the Interaction class in the System.Windows.Interactivity namespace:

  public static TriggerCollection GetTriggers(DependencyObject obj);
  public static BehaviorCollection GetBehaviors(DependencyObject obj);

If we look at some sample XAML we can see that when an action is defined, it becomes part of the Triggers collection and appears under the trigger that causes the action to be invoked. If multiple actions are associated with the same object and use the same trigger, the actions appear together:

Calling Interaction.GetTriggers passing a reference to the hosting Path, will return a single trigger of type EventTrigger. For that trigger, we can use its Actions property to access the three actions.

If we look at some XAML for a behavior, we notice that there is a Behaviors collection containing one or more behaviors and for each behavior there is an optional Triggers collection:

In the case, calling Interaction.GetBehaviors with a reference to the Canvas will return two behaviors: ParticlesBehavior and MagnifierOverBehavior

Just like any object you add to the Object tree, you can set the name of an action or behavior. This adds an x:Name property in the XAML and the name appears in the name textbox in the Properties panel. To access the x:Name property in code, get a reference to the behavior or action and call GetValue passing the FrameworkElement.NameProperty dependency property:

  string actionName = (string)action.GetValue(FrameworkElement.NameProperty);
  string behaviorName = (string)behavior.GetValue(FrameworkElement.NameProperty);

For SetInteractionPropertyAction we define the following methods that will try to find an action or behavior that matches the same name as the ObjectName property:

private object TryFindBehavior()
{
  var behaviors = Interaction.GetBehaviors(Target);

  foreach (Behavior behavior in behaviors)
  {
    string behaviorName = (string)behavior.GetValue(FrameworkElement.NameProperty);

    if (behaviorName == ObjectName)
    {
      return behavior;
    }
  }

return null;
}

private object TryFindAction()
{
  var triggers = Interaction.GetTriggers(Target);

  foreach (System.Windows.Interactivity.TriggerBase trigger in triggers)
  {
    foreach (System.Windows.Interactivity.TriggerAction action in trigger.Actions)
    {
      string actionName = (string)action.GetValue(FrameworkElement.NameProperty);

      if (actionName == ObjectName)
      {
        return action;
      }
    }
  }

return null;
}

Finally, the Invoke method uses the previous two methods to find a matching action or behavior and to set one of its properties. I admit that a large portion of the Invoke method in the full project source code was borrowed from the SetProperty action defined in the Expression.Samples.Interactivity assembly (thanks .NET Reflector) :

Type itemType = null;
object item = null;

item = TryFindBehavior();

if (item == null)
{
  item = TryFindAction();
}

if (item == null)
{
  return;
}
else
{
  itemType = item.GetType();
}

PropertyInfo property = itemType.GetProperty(this.PropertyName);
property.SetValue(item, this.Value, null);

After compiling the code, the SetInteractionPropertyAction will appear in the Assets panel.

Let’s add a CheckBox control to LayoutRoot and drop two instances of SetInteractionPropertyAction onto the CheckBox. Next select the ShowMessageBox action and set its name property to showMessageBox.

Click on the first instance of SetInteractionPropertyAction and set it’s EventName, TargetName, ObjectName, PropertyName, and Value properties:

For the second instance of SetInteractionPropertyAction, set the same properties as follows:

Now run the application. Initially, when you click on the rectangle, you will see a message box that says “Hello World”.

When you click on the CheckBox and then click the rectangle, the message will change to “I am checked”. Unchecking the CheckBox and clicking on the rectangle will cause the message to change to “I am unchecked”.

We have successfully set the property of one action based on a trigger invoking SetInteractionPropertyAction.

If you look at the Common Properties group for our custom action, you will notice that the editors for ObjectName, PropertyName, and Value are just TextBox controls. I would like the design-time experience to be better for this action. Maybe in a future post, this will be revisited. You might have noticed that the Value property is of type string even though the data type of the property that corresponds to PropertyName might be another data type. I originally had Value as type object, but there were times when the textbox would gray out and not allow any input. This would also be solved if custom property editors were defined.

The Microsoft.Expression.Interactions assembly defines an action called ChangePropertyAction that sets the property on an object and has a much better designer experience. It provides a drop-down containing property names and when a property is selected, the editor for the Value reflects the underlying data type of the property:

I would like to include these editors plus one that would show a list of named actions and behaviors for the given Target grouped in the list under the words: Actions or Behaviors.

Source code

Hidden Object: Episode 4 – Adding Particles with a Behavior

Mark Tucker — Fri, 18 Sep 2009 03:25:53 +0000

In the previous episodes of Creating a Hidden Object Game in Silverlight 3 we spent all of our time in Blend. Now we are going to put on our developer hat and create our own custom behavior that will shoot particles when an item is clicked. This will give a nice visual effect that compliments marking the item off the list and the sound effect.

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

public class ParticlesBehavior : Behavior

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

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.