0 comments
.NET 
In my previous post I introduced the behaviors model of Expression Blend. In this post I will show you a different technique for adding interactivity through the Expression Blend Designer by creating custom triggers and actions.
The difference between triggers and actions
Expression comes with two different base classes for the triggers and actions model. When you derive from the TriggerBase<T> class you’re telling the framework you want to trigger one or more actions based on a particular eventsource. This can be for example a timer or an event raised by the element the trigger is attached to.
If you derive from the TriggerAction<T> class you are telling the runtime that you want to perform a particular action based on a trigger.
TriggerAction instances are triggered by Trigger instances. You can have multiple triggers invoke the same action. Most of the time however you will be designing trigger actions and reuse the triggers offered to you by default.
Creating a custom trigger action
Creating your own trigger action is pretty straightforward. Just as with creating a custom behavior you will need two references:
- System.Windows.Interactivity
- Microsoft.Expression.Interactions
With these references added to the project you can create a new class that derives from TriggerAction<T>:
1: /// <summary>
2: /// Action that executes a command when triggered
3: /// </summary>
4: public class ExecuteCommandAction : TriggerAction<FrameworkElement>
5: {
6: #region Protected methods
7:
8: /// <summary>
9: /// Invokes the action
10: /// </summary>
11: /// <param name="parameter"></param>
12: protected override void Invoke(object parameter)
13: {
14: //TODO: Add custom logic here
15: }
16:
17: #endregion
18: }
Once you have the basic skeleton up, you can start implementing custom logic that should be executed when the trigger goes off. The sample trigger will be invoking a command that can be assigned to the trigger action by making use of the databinding possibilities offered by Silverlight.
1: /// <summary>
2: /// Invokes the command associated with the trigger
3: /// </summary>
4: /// <param name="parameter"></param>
5: protected override void Invoke(object parameter)
6: {
7: Command.Execute(parameter);
8: }
When dropped onto the designer you will be able to select the trigger and configure it using the properties window in Expression Blend.
Creating your own triggers
When the default triggers aren’t enough for you, there’s always the option of creating a custom trigger. To make a custom trigger you should create a class that derives from TriggerBase<T> and implement the OnAttach and OnDetach method. You can use these two methods to link/unlink the trigger to/from the element that is associated with the trigger.
1: /// <summary>
2: /// Custom trigger implementation
3: /// </summary>
4: public class MySpecialTrigger: TriggerBase<FrameworkElement>
5: {
6: /// <summary>
7: /// Invoked after the trigger is attached to the associated element
8: /// </summary>
9: protected override void OnAttached()
10: {
11: base.OnAttached();
12: }
13:
14: /// <summary>
15: /// Invoked right before the trigger is detached from the associated element
16: /// </summary>
17: protected override void OnDetaching()
18: {
19: base.OnDetaching();
20: }
21: }
To make the trigger invoke actions, that might be using the trigger, you will need to use the InvokeActions(object o) method.
Final words
There’s loads more options available through the Expression Blend SDK and this post surely isn’t the last on this subject. Next stop: Custom designers and property value editors.