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.

In my previous post, I started to write about things that I think makes WPF different. In the current project I’m working on at work, I had a good example of a new way of thinking with WPF. Todays article deals with a new WPF concept called Attached properties.

Example

Imagine you need to display a list of person (that’s very original isn’t it ?). Each person has a name, a first name, and let’s say an address. Because you want to display a list of data, you’re probably going to use a ListView.You also would like to let the user sort this list of data in the order he wants, simply by dragging and dropping items in the control.

This is a feature that is possible to implement for a ListView (by handling common Drag’n'Drop events such as DragEnter, DragOver, PreviewDrop… Basically, you can think of two ways to implement this behavior:

• 1. handle all Drag’n'Drop events in the code behind (C# file)
• 2. inherit ListView and add new features

Well, in my opinion, none of those two options are very elegant:

• The first one pollutes the code behind file with “functional” code. I prefer trying to keep the code behind file as clean as possible. Moreover, this solution doesn’t allow ANY reuse.
• The second one is maybe the first one we can think about, but… It forces to change all the ListView control to our NewListView control (which inherit ListView). I don’t like that solution that much.

What is an Attached property ?

The good news is that WPF allows you to implement this by using an alternative, an Attached property. Let’s first have a look at the definition from MSDN website:

“An attached property is a concept defined by Extensible Application Markup Language (XAML). An attached property is intended to be used as a type of global property that is settable on any object.”

Hmmm… What does that mean ? Actually, if you already played with WPF, you already encountered a lot of attached properties. For example if you add an Image in a DockPanel, you might write something like

<Image DockPanel.Dock=”Top” …/>

Have you ever thought about the DockPanel.Dock part ? It is funny because Image objects don’t have a DockPanel property. Actually all UI element that you can dock (Image, TextBlock, anything) doesn’t have a DockPanel property, so how it is possible to write that ? It is possible because the DockPanel control defines an attached property.

Attached properties as an extensibility mechanism: the Attached Behavior pattern

As the name suggests, an attached property can be attached to arbitrary object. In the previous example (with DockPanel.Dock) we use an attached property to add an attribute to an object (we add the information “I want to dock this image on the top“). What is important, is that we can also use attached properties to provide extensibility without the need for traditional inheritance.

A very nice definition of the Attached Behavior can be found on the blog of John Gossman:

“The Attached Behavior pattern encapsulates “behavior” (usually user interactivity) into a class outside the visual heirarchy and allows it to be applied to a visual element by setting an attached property and hooking various events on the visual element.”

How does that work ? Basically what we can do is the following:

• Declare a boolean attached property in a new class, for example DragDropHelper.cs
• When the value of this attached property, it is possible to hook the interesting events (OnDrag, OnDrop…) and implement Drag’n'Drop operation in them

I suggest you to have a look at this excellent post from Beatriz Costa which implement Drag’n'Drop using attached properties.

The benefits of this technique are the following:

• No need to change all your ListView control to a subclass that you would create by using standard inheritance principle
• It becomes possible (as in Beatriz Costa post) to implement the Drag’n'Drop behaviour on the mode generic ItemsControl class

There are plenty of things that can be achieved using attached properties. In this post, I talked about implementing Drag’n'Drop using an attached property, but a lot of things that could be done using inheritance can be done using attached properties.