A while back I needed to add a double click event to a control that had no such event. The solution I came up with was to wrap that control inside a UserControl and use the UserControl’s DoubleClick event.

 

One of the readers commented about a better way to do it using Command Binding, here is what David N said:

You can also do this by adding an InputBinding to the Grid, that will translate a double click to an invocation of a RoutedCommand, then you can bind that to some handler code somewhere higher in the tree. Commands seem to be a neglected part of WPF, but are really quite useful especially if there are multiple actions that should end up triggering the same code (button, toolbar button, context menu, key combination, double click in the grid..). I just used a builtin command in this sample but of course you’d probably use a custom one.

I was faced with the same problem last week so I decided to give it a shot.

 

Creating the Command

All you have to do is to define a RoutedUICommand object in the code behind of the control:

   1: public readonly static RoutedUICommand RectangleDoubleClickedCommand;

Here is how to initialize the command I used a static constructor for it:

   1: static Window1()
   2: {
   3:     RectangleDoubleClickedCommand = new RoutedUICommand("BondDoubleClickedCommand"
   4:                                                         , "BondDoubleClickedCommand"
   5:                                                         , typeof(Window1));
   6: }

The parameters are Text, Name and Owner. That’s it, we have just created our double click command.

Before we go on and use it we have to create a delegate to fire when the command executes.

   1: void ExecuteBondDoubleClicked(object sender, ExecutedRoutedEventArgs e)
   2: {
   3:     MessageBox.Show("I was just double clicked");
   4: }

 

Connecting the Command to the delegate Command

We have created the command and the delegate, now it is time to attach them to one another. this is written in XAML and is placed in the Window.xaml file:

   1: <Window.CommandBindings>
   2:     <CommandBinding Command="my:Window1.RectangleDoubleClickedCommand" 
   3:                     Executed="ExecuteBondDoubleClicked" >
   4:     </CommandBinding>
   5: </Window.CommandBindings>

This tells the window to attach the delegate to the custom command we have defined. 2 things to note:

  • Don’t forget to add a namespace to the current assembly or you wont be able to access the Command.
  • Don’t try and place the Windows.CommandBinding section inside the Windows.Resources, it wont compile, place it above.

Attaching the command to the Rectangle

All that is left to do is connect the command to the Rectangle by using InputBinding and MouseGestures:

   1: <Rectangle Width="50" Height="50" Fill="Blue">
   2:     <Rectangle.InputBindings>
   3:         <MouseBinding Gesture="LeftDoubleClick" 
   4:                       Command="my:Window1.RectangleDoubleClickedCommand">
   5:         </MouseBinding>
   6:     </Rectangle.InputBindings>
   7: </Rectangle>

DoubleClicking the Rectangle will execute the Command and the delegate giving us this:

Mouse DoubleClick Event

 

That’s it.

 

A very elegant solution which you can customize and use it for almost anything you need. You can download a sample project from out freebies page. Just grab our feed to get the password at the bottom.

 

Enjoy.

 

Amit

Tags :

7 Responses to “Using Command Binding to Enhance Any WPF Control”


  1. Karl Agius

    Said on December 11, 2008 :

    Interesting, but I prefer the method described in this article: http://marlongrech.wordpress.com/2008/12/04/attachedcommandbehavior-aka-acb/

    Feel that it’s a bit cleaner.

  2. Ethan

    Said on March 10, 2010 :

    Thanks Amit. This gives me a geat guidance.
    Cheers

  3. Andreja

    Said on April 8, 2010 :

    Finally something I could use.
    I wasn’t sure if it was better to use Application.Open or Application.New command or create custom command to run CanExecute function.

  4. Dexter

    Said on December 18, 2011 :

    Found best multi event command binder in codeplex

    Multi Event Command Binder

    Benefits:

    1:Ability to bind multiple event to multiple commands.
    2:In CommandArgs in command handler you can even get original event args this was not possible with existing command binders.
    3:In CommandArgs in command handler you can even get original source of the event this was not possible with existing command binders.
    4:In this you can control individual CanExecute methods.

    Blogs
    Multi Event Command BlogSpot
    Multi Event Command WordPress

3 Trackback(s)

  1. May 7, 2009: kevin Mocha - WPF Comand
  2. May 8, 2009: kevin Mocha - Model-View-ViewModel
  3. Sep 6, 2009: WPF: 90+ Miejsc kt√≥re warto zna? « Dawid Po?li?ski

Post a Comment