[2009.09.14] Introduction to WPF Actions and Behaviors

I noticed something called Behaviors in Blend 3 under the Asset panel and decided to take a look into it some more. It took quite a bit of reading the Expression Team blog posts to get a sense of what is going on with this new addition to WPF.

Triggers, Actions and Behaviors

Triggers and Actions are words you have probably heard if you are playing around with WPF. Behaviors basically builds on the that infrastructure to extend it to a nice, interesting level. Because the three concepts - triggers, actions and behaviors are closely related, it gets a bit confusing telling what is what. For the most part, triggers and actions are perhaps what you may most familiar with. For instance, when you fire the MouseEnter property on an element, its Background property changes.

You can think of triggers and actions as a stimulus/response or a cause/effect pair. Based on that analogy, let's try to expand that a bit. The trigger/action pairs is related by the statement:
when something happens, do something

A Trigger is the stimulus/cause that motivates something to happen. This is the "when something happens" part. From the example above, the trigger will be when the MouseEnter property changes.

An Action is the response/effect to a trigger. This is the "do something" part. Continuing from the above example, the action would be the changing of the element's Background property.
Note: When I say Action from now on I mean an Action/Trigger pair

A Behavior take this one step further. It has two types of functionality.
   [1] It can do something due to a trigger or
   [2] It can do something on its own

As you can see, a Behavior will let you write code that is both trigger dependent and trigger independent.

When I was first going through the literature of these concepts, I admit I was a bit confused. But here is the bottom line as I understand it:
Both an Action and a Behavior is a piece of reusable, modular piece of interactive code that can be attached to an element. The difference between the two is that an Action is always invoked/called/notified by a Trigger, whereas a Behavior can either be invoked independently of a trigger or it may be called using a trigger.

Therefore, while the action/trigger pair are pretty much inseparable, a Behavior is more loosely coupled. So with behaviors, you get all the pros of using triggers and actions as well as the ability to ditch the triggers completely if you want to.

Target and Source

There are two additional parts that makes these all work like a nice, well-oiled machine. When you drop an action(+ trigger - these naturally go together) or a behavior(+ trigger) onto an element, the element acts both as the Source and the Target of the action or behavior. Depending on what you are creating (a new Trigger, Action, or Behavior), you will have access to properties to change both of these. The SourceName property lets you change the source of the trigger from the element the action is attached to to something else. The TargetName property lets you change the target of the action other than what it is attached to. These will all make a bit more sense later as these two properties are visible as a result of deriving from certain base classes.

Attaching Behaviors and Actions in Blend 3

This could not be any easier. Blend 3 ships with a few stock behaviors and actions. You can get more from the Microsoft Expression Gallery. You can navigate to the Behaviors and Actions that comes with Blend 3 either using the new Assets tab as shown in Fig. 1 or going to the Assets panel as shown in Fig. 2.

Fig. 1. Accessing Behaviors and Actions using Asset Tab

Fig. 2. Accessing Behaviors and Actions using Asset Panel

All you have to do is to drag the Action or Behavior you want either onto the element on the artboard or on the Objects and Timeline panel as in Fig. 3. The Action or Behavior then becomes a child of the element it is attached to as in Fig. 4.

Fig. 3. Dragging a behavior onto an element

Fig. 4. Attached behavior

An action or a behavior may expose properties that you can use to configure each item. These are displayed in the Properties tab as shown in Fig. 5 and 6.

Fig. 5. Properties for the MouseDragElementBehavior

Fig. 6. Properties for the GoToStateAction

Notice that the properties for the behavior in Fig. 5 does not have a trigger, so this is a type of trigger-independent behavior. Fig. 6 shows an action and the properties indicate several modifiable areas. Note particularly that in this Action you can change both the SourceName and TargetName properties, which essentially changes the Source and Target of the Action from the attached element (the Rectangle) to another element of your choice. Notice also that both of these properties have a little bullseye next to their modifiable textboxes. This is a super handy way of choosing a new Source or Target. Simply click the bullseye and point it to the element you want to set. For instance, in Fig. 7, you can set the Ellipse as the Target as shown.

Fig. 7. Setting the TargetName property using the Artboard element picker

Here is a nice little handy trick (thanks!) - if you have overlapping elements, to see the list of all the elements, hold done Ctrl, choose the Artboard picker, then Left Click on the topmost element and a new context menu pops up, allowing you to choose the element to apply the property to. This is in Fig. 8.

Fig. 8. Applying properties to overlapping elements

The final thing I would like to point out is that you can change the type of trigger that will be used to fire the action (or behavior if it supports triggers). Clicking the New button next to the TriggerType label will bring up a list of triggers you can set for the action or behavior. This is in Fig. 9 where the current trigger is an EventTrigger. Note that if you create your own triggers in a project, you can set them from this screen.

Fig. 9. Changing the type of the trigger

I hope this post has provided an overview of what triggers, actions and behaviors are and how to use them. Next will be about the classes involved and how to write your own actions and behaviors.