RoutedEvent to Command action behavior (Blend 3).

Blend 3 has added two new assemblies which consists of new functionalities including advance behaviors

  1. Microsoft.Expression.Interactions.dll
  2. System.Windows.Interactivity.dll

These advance behavior classes lets you create attached behaviors with simplicity. Code snippet below shows how to create a behavior which can be applied on any UIElement’s Routed event and when that event is triggered the given command is invoked with its command parameters. These behaviors help us write clean code and we dont have to deal with click events when using M-V-vM pattern. We can wite our command and bind that command to any routed event on any user interface element and implement the command on view model.

Code Snippet
  1. using System;
  2. using System.Windows;
  3. using System.Windows.Input;
  4. using System.Windows.Interactivity;
  5. using EventTrigger = System.Windows.Interactivity.EventTrigger;
  6. namespace Behaviors
  7. {
  8. /// <summary>
  9. /// Behaviour helps to bind any RoutedEvent of UIElement to Command.
  10. /// </summary>
  11. [DefaultTrigger(typeof(UIElement), typeof(EventTrigger), "MouseLeftButtonDown")]
  12. public class ExecuteCommandAction : TargetedTriggerAction<UIElement>
  13. {
  14. /// <summary>
  15. /// Dependency property represents the Command of the behaviour.
  16. /// </summary>
  17. public static readonly DependencyProperty CommandParameterProperty = DependencyProperty.RegisterAttached(
  18. “CommandParameter”,
  19. typeof(object),
  20. typeof(ExecuteCommandAction),
  21. new FrameworkPropertyMetadata(null));
  22. /// <summary>
  23. /// Dependency property represents the Command parameter of the behaviour.
  24. /// </summary>
  25. public static readonly DependencyProperty CommandProperty = DependencyProperty.RegisterAttached(
  26. “Command”,
  27. typeof(ICommand),
  28. typeof(ExecuteCommandAction),
  29. new FrameworkPropertyMetadata(null));
  30. /// <summary>
  31. /// Gets or sets the Commmand.
  32. /// </summary>
  33. public ICommand Command
  34. {
  35. get
  36. {
  37. return (ICommand)this.GetValue(CommandProperty);
  38. }
  39. set
  40. {
  41. this.SetValue(CommandProperty, value);
  42. }
  43. }
  44. /// <summary>
  45. /// Gets or sets the CommandParameter.
  46. /// </summary>
  47. public object CommandParameter
  48. {
  49. get
  50. {
  51. return this.GetValue(CommandParameterProperty);
  52. }
  53. set
  54. {
  55. this.SetValue(CommandParameterProperty, value);
  56. }
  57. }
  58. /// <summary>
  59. /// Invoke method is called when the given routed event is fired.
  60. /// </summary>
  61. /// <param name=”parameter”>
  62. /// Parameter is the sender of the event.
  63. /// </param>
  64. protected override void Invoke(object parameter)
  65. {
  66. if (this.Command != null)
  67. {
  68. if (this.Command.CanExecute(this.CommandParameter))
  69. {
  70. this.Command.Execute(this.CommandParameter);
  71. }
  72. }
  73. }
  74. }
  75. \

Once you create a class with the above code and open the project in blend and open any UI, you can see the following view in the asset tab. Marked in red is our behavior.

image

Drop the behavior onto any UIElement

image

Finally you can see how we can select the Event and bind the command and command parameters in the properties tab.

image

XAML for above blend designer setting.

Code Snippet
  1. <Grid>
  2. <i:Interaction.Triggers>
  3. <i:EventTrigger EventName=”MouseLeftButtonDown”>
  4. <Behaviours:ExecuteCommandAction Command=”{Binding MyCommand}” CommandParameter=”{Binding MyCommandParameter}”/>
  5. </i:EventTrigger>
  6. </i:Interaction.Triggers>
About these ads
Posted in Blend 3, Mvvm, WPF. Tags: , , . 2 Comments »

2 Responses to “RoutedEvent to Command action behavior (Blend 3).”

  1. GS Says:

    Hi Kishor ,

    I have attached Behaviours to combox, I want to pass the selected value using commandParameter . I tried with sending the binding value it is not passing to command.

    Can you please show how to pass selected value using commandParameter?
    thx,
    GS

    • Kishor Aher Says:

      Since i am not sure why you are not able to directly bind to SelectedItem/Value. There is the code that should do the trick.

      <ComboBox x:Name="cboUsers" Height="30" >
      <i:Interaction.Triggers>
      <i:EventTrigger EventName="SelectionChanged"<>
      <local:ExecuteCommandAction Command="SelectionChangedCommand" CommandParameter="{Binding ElementName=cboUser, Path=SelectedItem}"/>
      </i:EventTrigger>
      </i:Interaction.Triggers>
      <ComboBoxItem Content="XYZ"/>
      <ComboBoxItem Content="ABC"/>
      </ComboBox>


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: