Editable Text Block in WPF

• Download source - 41.7 KB

Introduction

Many applications require functionality to be able to edit text blocks when double clicked. This functionality is seen mostly in tree nodes like in Windows Explorer Tree. So I decided to create a control which allows the user to edit text blocks when double clicked or by using Function key F2.

Background

This article uses Adorners to show the text box when in edit mode.

Using the Code

The EditableTextBlock extends the TextBlock (System.Windows.Controls.TextBlock) to provide the edit functionality.

The class diagram is as shown below:

EditableTextBlock is the control which can be used directly to create an editable text block. The control has the following dependency properties through which the edit feature can be used.

Properties:

• IsInEditMode is a Boolean property which as its name says when set to true enables the edit mode and false exits the edit mode.
• MaxLength is an integer which sets the MaxLength of the textbox which is shown when the control is in edit mode.

The other class EditableTextBlockAdorner is an Adorner which contains the text box shown when the EditableTextBlock is in edit mode.

Adorner is an element which can be added to the Adorner Layer of another UIElement.
It also allows you to extend functionality of the control, which is leveraged by the EditableTextBlock to provide edit functionality.

For more details on Adorners, see this link.

EditableTextBlock code:

Callback method when the value of the dependency property IsInEditMode changes:

private static void IsInEditModeUpdate
	(DependencyObject obj, DependencyPropertyChangedEventArgs e)
{
    EditableTextBlock textBlock = obj as EditableTextBlock;
    if (null != textBlock)
    {
        //Get the adorner layer of the uielement (here TextBlock)
        AdornerLayer layer = AdornerLayer.GetAdornerLayer(textBlock);
        
        //If the IsInEditMode set to true means the user has enabled the edit mode then
        //add the adorner to the adorner layer of the TextBlock.
        if (textBlock.IsInEditMode)
        {
            if (null == textBlock._adorner)
            {
                textBlock._adorner = new EditableTextBlockAdorner(textBlock);
                
                //Events wired to exit edit mode when the user presses 
                //Enter key or leaves the control.
                textBlock._adorner.TextBoxKeyUp += textBlock.TextBoxKeyUp;
                textBlock._adorner.TextBoxLostFocus += textBlock.TextBoxLostFocus;
            }
            layer.Add(textBlock._adorner);
        }
        else
        {
            //Remove the adorner from the adorner layer.
            Adorner[] adorners = layer.GetAdorners(textBlock);
            if (adorners != null)
            {
                foreach (Adorner adorner in adorners)
                {
                    if (adorner is EditableTextBlockAdorner)
                    {
                        layer.Remove(adorner);
                    }
                }
            }
            
            //Update the textblock's text binding.
            BindingExpression expression = textBlock.GetBindingExpression(TextProperty);
            if (null != expression)
            {
                expression.UpdateTarget();
            }
        }
    }
}

Using the EditableTextBlock:

<TreeView x:Name="tree" .. ItemsSource="{Binding PersonCollection}">
    <TreeView.Resources>
        <HierarchicalDataTemplate ..>
            <local:EditableTextBlock Text="{Binding Name, Mode=TwoWay}" 
                          IsInEditMode="{Binding Edit, Mode=TwoWay}"/>
        </HierarchicalDataTemplate>
    </TreeView.Resources>
</TreeView> 

Note: The Mode of binding (if any) with Text has to be TwoWay so that the control can update the binding source when the value is edited in the edit text box.

History

• April 2010 - Initial version