Click here to Skip to main content
15,867,686 members
Articles / Desktop Programming / WPF

WPF Extensibility Hacks or WEX - Includes EventTrigger, ReactiveTrigger, InvokeMethodAction, InvokeCommandAction etc.

Rate me:
Please Sign up or sign in to vote.
5.00/5 (6 votes)
14 Jan 2010CPOL4 min read 37.8K   353   24   4
A set of extensibility hacks for WPF. A few interesting triggers and actions, including EventTrigger, ReactiveTrigger, InvokeMethodAction, and InvokeCommandAction. Also allows invoking Triggers and Actions based on Conditions.

Overview

Some time back, I posted about the Silverlight Extensibility Hacks Preview 2.0. I did a quick port of the code base to WPF under the name WEX or WPF Extensibility Hacks, and now you have the goodness in .NET 3.5 + VS2008.

image

Just want to have a quick word on what is available. Here are a couple of points about Wex. Wex is built on top of the System.Windows.Interactivity infrastructure.

  • Wex allows you to define multiple conditions for invoking triggers (like you can specify a KeyDown event trigger should be fired only if 'A' is pressed)
  • You can specify multiple conditions for invoking each action in a trigger
  • Wex introduces a few more Triggers and Actions that you'll see soon

As of now, Slex Preview 2 provides the following Triggers:

  • EventTrigger - Will be fired when an event is raised. Can listen to events of Elements, or events from your view model.
  • ReactiveTrigger - Can 'import' an Observable that you may 'export' using MEF. Useful to define and use custom events using System.Reactive.

And the following Actions:

  • InvokeMethodAction - Invoke a method directly in the ViewModel or for a target element, supports passing parameters via XAML
  • InvokeCommandAction - Invoke an ICommand in the ViewModel
  • StoryBoardAction - Start, Stop, Pause, Resume, or Reverse story boards
  • PropertyAction - Sets a property value (very crude as of now)

Event Trigger

You can hook up the event trigger against your ViewModel, or against an element. For example, assume you want to invoke a command in your ViewModel based on various conditions - let us say, when the user presses the key 'A', and if and only if a check box is checked. Here we go:

image

Reactive Trigger

The concept of reactive trigger is based on the System.Reactive (LINQ to Events) framework and the Managed Extensibility Framework. Basically, you can create an event definition and import that as an event for a control.

Your exported event definition should match the signature Func<object,IObservable<EventResult>>. You can use the ObservableExport attribute in Wex.Lib to mark your trigger as an exportable part. Also, the name you provide to the ExportName attribute will be later used in XAML to 'import' this trigger.

image

Step 2 - In your application startup, call the Compose method in WexPartComposer, and pass your catalogs

In this case, I'm simply passing an assembly catalog with the current assembly, because I've my trigger as part of my host app. And, I've this line in the App.xaml.cs constructor:

image

Step 3 - Just use the trigger in your XAML

Here we go, you can import the exported trigger, and this will get fired whenever a key is pressed:

image

You might have guessed this, but you can create very customized event definitions using System.Reactive. For example, here is how to create an event definition if you want the trigger to fire only when the arrow keys are pressed:

image

You can read this article on Reactive Extensions, to understand more on this.

Actions in Wex

You might have already noticed in the above examples how to use actions like InvokeCommandAction, StoryBoardAction, etc. What is interesting is, Wex allows you to fire actions based on conditions (see the EventTrigger example where we are specifying the InvokingConditions for the actions).

I specifically want to comment on the InvokeMethodAction in Slex, that allows you to Invoke a method in the ViewModel directly. Here we go. Assume that you have an Add method in your ViewModel, like this:

image

Now, this is how to invoke the Add method, passing some parameters. Here, we pass the text in txt1 and txt2 as parameters.

image

A Quick Overview

Have a sneak peak at the actual implementation of Wex. If you examine the Trigger hierarchy, you'll find that we've a WexTrigger abstract base class, from where other triggers are getting inherited.

  • WexTrigger - The base class for all Wex framework triggers
  • EventBasedTrigger - A base class for inheriting event based triggers
  • ObserverTrigger - An abstract class for creating triggers based on an Observable (System.Reactive)

WexTrigger directly inherits from System.Windows.Interactivity.TriggerBase<DependencyObject>. I'm not going to explain the System.Windows.Interactivity infrastructure and how each trigger is implemented, but you can definitely go through the source code and find the same yourself. Probably, I'll explain the implementation details in future posts.

Triggers

Actions

Now, let us have a quick look at the Actions involved. Have a look at the actions in the framework. WexTriggerAction is inherited from System.Windows.Interactivity.TriggerAction<FrameworkElement>, and from there on, you can go and explore as of now, if you'd like to :)

Conclusion

As I mentioned, Wex is a quick port of Slex, and seriously, there are lot of areas I still need to re-write to leverage what is already available in WPF (especially on dependency property hooking and all). However, I thought it might be good if I bring out a first cut, so that you can also hack around with me and leverage some of these concepts in your own apps.

And, you may hit a few bugs with this Preview; fix it yourself or wait for Preview 2. But please give feedback!!

Enjoy coding!!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect
India India
Architect, Developer, Speaker | Wannabe GUT inventor & Data Scientist | Microsoft MVP in C#

Comments and Discussions

 
QuestionCan WEX implement attached behaivor function? Pin
ly_he29-Mar-14 16:14
ly_he29-Mar-14 16:14 
GeneralReally cool, love the way you used Rx + MEF to export events Pin
JoelJames14-Jan-10 18:07
JoelJames14-Jan-10 18:07 
GeneralExtremely Impressive!!! Pin
Kavan Shaban14-Jan-10 10:43
Kavan Shaban14-Jan-10 10:43 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.