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:

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