How to attach commands to any UIElement ?

In this blog, I already wrote 2 posts about attached properties. The more I play with this new WPF concept, the more I like it. Today at work, I found one new nice use of attached properties, and because it is this time reusable, I decided to share my experience here.

If you’re familiar with WPF, then you’re probably familiar with Commands. Commands are a new concept in WPF, here is the introduction from MSDN documentation:

Commanding is an input mechanism in Windows Presentation Foundation (WPF) which provides input handling at a more semantic level than device input. Examples of commands are the Copy, Cut, and Paste operations found on many applications.

Commands help you to decouple your UI from its execution logic and also simplify the process of enabling and disabling controls regarding the state of the command. If you want more details about Commands, you can check out this nice post from Marlon Grech.

You can attach a command to a Button using its Command property (you might also use CommandParameter and CommandTarget properties in some cases). To be more precise, elements that support Command must implement the ICommandSource interface:

?View Code CSHARP
1
2
3
4
5
6
public interface ICommandSource
{
ICommand Command { get; }
object CommandParameter { get; }
IInputElement CommandTarget { get; }
}

If you open Reflector and lookup for this interface, you’ll discover that 3 controls implement this interface:

  • MenuItem
  • ButtonBase
  • Hyperlink

In the project I’m working on at work, I had to find out a way to surpass 2 limitations:

  • Defining commands on other controls than MenuItem, ButtonBase and Hyperlink
  • Defining commands that could be triggered on other event than MouseLeftButtonUp

As you can imagine, I found a way to do that using… attached properties ! Basically I defined an attached property that I called MouseDoubleClickCommandProperty. This command enables you to attach a ICommand to ANY UIElement that will be triggered when the control is double clicked.

The MouseDoubleClickCommandProperty register a PropertyChangedCallback so that when the target changes, I can register on the UIElement.MouseDownEvent event. By looking the ClickCount property of the MouseButtonEventArgs parameter, I can check the MouseDownEvent comes from a DoubleClick event, and then trigger the associated command.

A nice example of this concept can be found in a TreeView. Imagine you want to start an action when a particular node in your TreeView is double clicked. The basic way to do that is to register the MouseDoubleClick event on the control. The new way to do the same thing is to use the MouseDoubleClickCommandProperty attached propery. Here is an example that shows how to do that in a hierarchical data template:

1
2
3
4
5
6
7
8
9
<HierarchicalDataTemplate
  DataType="{x:Type treeViewModel:Node}" 
  ItemsSource="{Binding Path=Children}">
    <StackPanel Orientation="Horizontal"
      attached:ClickBehavior.MouseDoubleClickCommand="{Binding Path=Command}">
        <Image x:Name="image" Width="16" Height="16" Margin="3,0" Source="..\Resources\Icons\Treeview\Default16.png" />
        <TextBlock Text="{Binding Path=Name}" />
    </StackPanel>
</HierarchicalDataTemplate>

As you can see, by using the MouseDoubleClickCommand attached property is becomes possible to attach the command to a StackPanel ! Moreoever, because we might need to pass parameter to the ICommand, I also defined another attached properties that can hold any parameter you want, this is the MouseEventParameterProperty.

Similarly, we can imagine to trigger Commands when a RightClick occurs (we would just have to define a new attached property to do so).

I did a sample application that demonstrates the concept of this article. Because I didn’t have too much time, I used a ListBox instead of a TreeView. but the concepts are equivalent. Please feel free to comment :-)

10 thoughts on “How to attach commands to any UIElement ?

  1. This is exactly what I am looking for. Unfortunatelly the example isn’t available. Can you please post a working link?

  2. Why could you not do this with InputBindings? This worked for me with the Enter key but doubleClick did not work. How come?

  3. Actually, I try a sample with double click and it worked fine…

    The problem with both MouseBinding and KeyBinding is that they inherit from InputBinding and the Command property of InputBinding is not a dependency property.

    Basically, you cannot write Command=”{Binding SomeCommand}” which is what we always do in MVVM. Using an attached property, it’s possible.

    Hope this helps ;)

  4. mhh cant post code. so you have to look for CommandReference to work with keybinding and mousebinding.

    ciao

    ps: bad english i know^^

  5. It will work when i double click.But one thing trouble me that it will fire the handler before the mouse not up.And I don’t know how to let it be fired after the mouse up.

    best regards

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>