Click here to Skip to main content
13,701,759 members
Click here to Skip to main content
Add your own
alternative version

Stats

72.5K views
3.8K downloads
19 bookmarked
Posted 14 Apr 2010
Licenced CPOL

Editable Text Block in WPF

, 14 Apr 2010
Rate this:
Please Sign up or sign in to vote.
Create an editable text block in WPF

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_CD.GIF

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Deepak-VS
India India
No Biography provided

You may also be interested in...

Comments and Discussions

 
QuestionDefault SelectAll text when editing? Pin
Lucas MDO27-Jul-15 9:02
memberLucas MDO27-Jul-15 9:02 
QuestionDesiredSize or ActualWidth/Height Pin
lostone12-Mar-15 2:38
memberlostone12-Mar-15 2:38 
Suggestion4 out of 5 - Missing F2 compatibility Pin
strajkz3-Feb-14 21:06
memberstrajkz3-Feb-14 21:06 
GeneralMy vote of 5 Pin
Bogdan Maksimović27-Sep-13 2:37
memberBogdan Maksimović27-Sep-13 2:37 
GeneralMy vote of 5 Pin
Member 1015234211-Jul-13 21:59
memberMember 1015234211-Jul-13 21:59 
Questionclick F2 key to edit Pin
billyang121311-Mar-13 23:49
memberbillyang121311-Mar-13 23:49 
AnswerRe: click F2 key to edit Pin
Deepak-VS14-Mar-13 20:25
memberDeepak-VS14-Mar-13 20:25 
Suggestionlosing focus to container element Pin
Member 86976872-Sep-12 8:19
memberMember 86976872-Sep-12 8:19 
GeneralRe: losing focus to container element Pin
Deepak-VS3-Sep-12 19:22
memberDeepak-VS3-Sep-12 19:22 
GeneralMy vote of 1 Pin
Syed Javed29-Feb-12 8:12
memberSyed Javed29-Feb-12 8:12 
GeneralMy vote of 5 Pin
Member 811108019-Sep-11 1:53
memberMember 811108019-Sep-11 1:53 
GeneralBug in updating the text block binding after edit. Pin
aj.esler24-Oct-10 15:10
memberaj.esler24-Oct-10 15:10 
GeneralProblem double clicking on treeviewitem Pin
industryunleash9-Aug-10 5:36
memberindustryunleash9-Aug-10 5:36 
GeneralRe: Problem double clicking on treeviewitem Pin
Deepak-VS10-Aug-10 6:55
memberDeepak-VS10-Aug-10 6:55 
GeneralRe: Problem double clicking on treeviewitem Pin
industryunleash11-Aug-10 8:51
memberindustryunleash11-Aug-10 8:51 
GeneralRe: Problem double clicking on treeviewitem Pin
industryunleash11-Aug-10 9:04
memberindustryunleash11-Aug-10 9:04 
GeneralRe: Problem double clicking on treeviewitem Pin
Deepak-VS18-Aug-10 4:47
memberDeepak-VS18-Aug-10 4:47 
GeneralThank you very much. Pin
sjingyu6-Jun-10 22:04
membersjingyu6-Jun-10 22:04 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01-2016 | 2.8.180906.1 | Last Updated 14 Apr 2010
Article Copyright 2010 by Deepak-VS
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid