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:

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

I wanted to use a TextBox to allow the user of my application to give a description for any item he selects in a TreeView. Because the TextBox’s content could be changed very frequently by the user, I thought it might be useful to select all the TextBox’s text when the user click in the control (so that as soon as he types something, the old content is cleared).

In this article, I will describe various way to implement this feature and I will detail the way I prefer, using of course an attached property !

Background

With a TextBox control, a user can input text in an application. When the user click on a TextBox control, the control got focus and a cursor is displayed in the text.

The TextBox class has a SelectAll() method that can be used to select all the text in the control. In this example, what I want is to select all the text of the control when the user click on it. This allow very fast editing of the content without the need to delete the previous content or moving the cursor with the mouse.

1. Using the code-behind file

The most easy way is maybe to use the code-behind (for example mywindow.xaml.cs) and to subscribe to the events we want (here we must capture MouseDown, MouseUp and GotFocus events):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

        public Window1()
        {
            InitializeComponent();
 
            textbox.AddHandler(TextBox.GotFocusEvent, new RoutedEventHandler(OnGotFocus));
            textbox.AddHandler(TextBox.MouseDownEvent, new RoutedEventHandler(OnGotFocus));
            textbox.AddHandler(TextBox.MouseUpEvent, new RoutedEventHandler(OnGotFocus), true);
        }
 
        private static void OnGotFocus(object sender, RoutedEventArgs e)
        {
            if (sender as TextBox != null)
            {
                ((TextBox)sender).SelectAll();
            }
        }

This solution is not elegant because:

• it pollutes the code-behind file (that we should try to keep as clean as possible)
• it is not reusable at all
• we have to give a name to the control (how could we do that in a DataTemplate for example ?)

2. Using inheritance

If you want to fix the 3 previous points, you can create a new control that inherit TextBox class and override MouseDown, MouseUp and GotFocus events:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

    class TextboxInherited : TextBox
    {
        protected override void OnGotFocus(System.Windows.RoutedEventArgs e)
        {
            base.OnGotFocus(e);
            SelectAll();
        }
 
        protected override void OnMouseDown(System.Windows.Input.MouseButtonEventArgs e)
        {
            base.OnMouseDown(e);
            SelectAll();
        }
 
        protected override void OnMouseUp(System.Windows.Input.MouseButtonEventArgs e)
        {
            base.OnMouseUp(e);
            SelectAll();
        }
    }

I don’t really like this solution neither because:

• it creates a new control only to add a very basic functionality
• it is not possible to have a TextBox and enable the functionality “on the fly” (using a DataBinding for example)
• it does not the leverage the attached property mechanism :p

3. Using an attached property

The last solution might look more complicated for a simple feature, but it is also more powerful. I created a static class, SelectableTextbox that defines an attached property SelectAllOnInput of type bool. Setting this attached property to true on a Textbox will cause the OnSelectAllOnClickChanged fonction to add handler on the targeted Textbox.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

    public static class SelectableTextBox
    {
        #region SelectAllOnClick attached property
        public static readonly DependencyProperty SelectAllOnInputProperty =
            DependencyProperty.RegisterAttached("SelectAllOnInput", typeof(bool), typeof(SelectableTextBox),
                new FrameworkPropertyMetadata((bool)false,
                    FrameworkPropertyMetadataOptions.None,
                    new PropertyChangedCallback(OnSelectAllOnClickChanged)));
 
        public static bool GetSelectAllOnInput(DependencyObject d)
        {
            return (bool)d.GetValue(SelectAllOnInputProperty);
        }
 
        public static void SetSelectAllOnInput(DependencyObject d, bool value)
        {
            d.SetValue(SelectAllOnInputProperty, value);
        }
        #endregion
 
        /// <summary>
        /// Handles changes to the SelectAllOnClick property.
        /// </summary>
        private static void OnSelectAllOnClickChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
        {
            if (sender as TextBox != null && (bool)e.NewValue)
            {
                ((TextBox)sender).AddHandler(TextBox.MouseUpEvent, new RoutedEventHandler(OnSelectAllText), true);
                ((TextBox)sender).AddHandler(TextBox.MouseDownEvent, new RoutedEventHandler(OnSelectAllText));
                ((TextBox)sender).AddHandler(TextBox.GotFocusEvent, new RoutedEventHandler(OnSelectAllText));
            }
            else if (sender as TextBox != null && !(bool)e.NewValue)
            {
                ((TextBox)sender).RemoveHandler(TextBox.MouseUpEvent, new RoutedEventHandler(OnSelectAllText));
                ((TextBox)sender).RemoveHandler(TextBox.MouseDownEvent, new RoutedEventHandler(OnSelectAllText));
                ((TextBox)sender).RemoveHandler(TextBox.GotFocusEvent, new RoutedEventHandler(OnSelectAllText));
            }
        }
 
        /// <summary>
        /// Handler that select all TextBox's text
        /// </summary>
        private static void OnSelectAllText(object sender, RoutedEventArgs e)
        {
            if (sender as TextBox != null)
            {
                ((TextBox)sender).SelectAll();
            }
        }
    }

In the XAML, it becomes very straightforward to enable the new functionality on any Textbox, we just need to set the SelectAllOnInput property to true:

1

<TextBox local:SelectableTextBox.SelectAllOnInput="True" Text="test using an attached property"/>

Conclusion

In this article I showed 3 ways to add a basic functionality to the Textbox control.

The first one is maybe the one we’ll try first, to see if the behavior matched what we need. However, because it is not reusable and because it pollutes the code-behind file, I do not recommend it.

The second one is the traditional way to add a functionality to an existing control: using inheritance. This solutions works well but does not leverage the new WPF mechanisms. I also think it’s a shame to create a new control just to add this feature.

The latest solution is clean and reusable. Because it uses a very new way to think about the way we design our apps, it might be not the first one we think about. But once we get this attached behavior pattern into the head, it’s a great help .

Also, I recommend you to have a look at Josh’s article about attached behavior. Josh wrote an article about a very nice way to solve a problem that would be hard to fix without this feature.

Here is the demo project that I used while writing this article.