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.

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));</pre>

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:

<Path>
  <i:Interaction.Triggers>
    <i:EventTrigger EventName="MouseLeftButtonDown">
      <ic:ChangePropertyAction x:Name="changeProperty" TargetName="staplerText" PropertyName="Opacity" Value="0.4"/>
      <im:PlaySoundAction x:Name="playSoundAction" Source="/Audio/magic_wand.mp3"/>
      <ic:RemoveElementAction x:Name="removeElement" />
    </i:EventTrigger>
  </i:Interaction.Triggers>
</Path>

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:

<Canvas>
  <i:Interaction.Behaviors>
    <local:ParticlesBehavior x:Name="particles">
      <i:Interaction.Triggers>
        <i:EventTrigger SourceName="staplerPath" EventName="MouseLeftButtonDown">
          <i:InvokeCommandAction CommandName="ShowParticles"/>
        </i:EventTrigger>
        <i:EventTrigger SourceName="idolPath" EventName="MouseLeftButtonDown">
          <i:InvokeCommandAction CommandName="ShowParticles"/>
        </i:EventTrigger>
      </i:Interaction.Triggers>
    </local:ParticlesBehavior>

    <Behaviors:MagnifierOverBehavior x:Name="magnifier"/>
  </i:Interaction.Behaviors>
</Canvas>

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

In order to detect when an item is clicked in the office image, we need a hotspot. A Path works great for this and odd-shaped items can be outlined using the Pen tool. Press the “P” key and the Pen tool will be selected:

Center the mouse cursor over the stapler and use the mouse wheel to zoom in. Now click various points to outline the shape of the stapler:

I started with a point in the bottom left corner and clicked a total of 7 points to outline the shape. When I got to point 5 in the top left, the path’s fill started obstructing my view of the rest of the object. Simply move over to the Appearance group and set the Opacity below 50%. Continue to draw the remaining points. When you get back to the first point, the mouse cursor will change to the pen with a loop indicating that clicking will close the path. Give the path a name (staplerPath) and set the Opacity to 0%. It is time to add the ChangePropertyAction to the path. On the Assets tab, click Behaviors and find the ChangePropertyAction.

Drag the action from the Assets tab to the Object tree and drop it on staplerPath:

This action is now associated with staplerPath object. Adding this action to our object tree caused two assemblies to be added to the References folder:

• Microsoft.Expression.Interactions.dll
• System.Windows.Interactivity.dll

Looking at the Properties panel you will see the properties for this action and notice that there is already an EventTrigger selected to fire when the staplerPath object gets a MouseLeftButtonDown event. That is exactly what we want. In the Common Properties group you will see TargetName and PropertyName. The TargetName is the name of the object that will have its property changed and PropertyName is the name of the property. Since we want the staplerText TextBlock to be dimmed when the staperPath object is clicked, then we set the TargetName to staplerText. An easy way to do that is to grab the bullseye (called the artboard element picker) and drag it to staplerText on either the canvas or the object tree. The Properties for this action should now look like this:

Press F5 to run the project and click on the stapler. The text for stapler is now dimmed.

You can play with the Animation Properties by setting duration for the property change and even set an easing value if you don’t want a linear change in the Opacity from 100% to 40%. Let’s make this even better by adding a sound effect when an item is clicked.  I found a nice magic wand sound on SoundBible.com and added it to the project in an Audio folder. Now drag the PlaySoundAction from the Assets list onto staplerPath and set the Properties to use the audio file:

Now repeat this same process for the other 12 items. We have the core of our very own hidden object game!

In our next episode, we will write a custom behavior that will shoot a spray of particles when an item is clicked.