Click here to Skip to main content
11,701,948 members (65,349 online)
Click here to Skip to main content

Editable TextBlock in WPF for In-place Editing

, 10 Dec 2008 CPOL 95.3K 5.6K 48
Rate this:
Please Sign up or sign in to vote.
An editable TextBlock component that allows for in-place editing of, e.g., items in a TreeView.
Sample Image

Introduction

When renaming folders in the Windows Explorer folder tree, the TextBlock containing the name of the folder changes to a TextBox which allows for editing of the folder name inside of the tree. I couldn't find any complete examples, so I decided to make one myself. The EditableTextBlock control is based on the Annotating an Image in WPF article by Josh Smith.

Using the Code

Basically, the control is made of a TextBlock for displaying the text and a TextBox for editing. The IsInEditMode property described below determines which one is currently shown.

The EditableTextBlock control exposes four properties:

  • string Text - The editable text displayed to the user (note TextFormat below).
  • bool IsEditable - Whether or not the control is editable. If not, it behaves just as a regular TextBlock.
  • bool IsInEditMode - Whether or not the control is currently being edited.
  • string TextFormat - Used if the editable text should be surrounded by more text, like the root node in the screenshot above.

The item labeled 'Item 1.1' in the screenshot is defined in XAML as follows:

<TreeViewItem>
    <TreeViewItem.Header>
        <local:EditableTextBlock Text="Item 1.1" />
    </TreeViewItem.Header>
</TreeViewItem>

In order to let the user edit the contents of the control, you have to set the IsInEditMode property to true. For example, the demo application lets the user edit the selected item in the TreeView when the F2 key is pressed, by using the KeyDown event of the TreeView:

private void treeView1_KeyDown(object sender, KeyEventArgs e)
{
    if (e.Key == Key.F2)
        SetCurrentItemInEditMode(true);
}

private void SetCurrentItemInEditMode(bool EditMode)
{
    // Make sure that the SelectedItem is actually a TreeViewItem
    // and not null or something else
    if (treeView1.SelectedItem is TreeViewItem)
    {
        TreeViewItem tvi = treeView1.SelectedItem as TreeViewItem;

        // Also make sure that the TreeViewItem
        // uses an EditableTextBlock as its header
        if (tvi.Header is EditableTextBlock)
        {
            EditableTextBlock etb = tvi.Header as EditableTextBlock;

            // Finally make sure that we are
            // allowed to edit the TextBlock
            if (etb.IsEditable)
                etb.IsInEditMode = EditMode;
        }
    }
}

The control leaves edit mode when one of four things happen:

  • The control loses focus, e.g., when the user clicks on another control.
  • The user hits the Enter key, in which case the edited text is saved in the Text property.
  • The user hits the Escape key, in which case the original text, from before the editing started, is restored.
  • The IsInEditMode property is manually set to false.

The TextFormat Property

The TextFormat property uses the String.Format function to format the text, which means that the editable text is referenced by {0} inside a string. For example, the root node in the demo application is defined in XAML as follows:

<TreeViewItem>
    <TreeViewItem.Header>
        <local:EditableTextBlock Text="Root" TextFormat="Root Item '{0}'" />
    </TreeViewItem.Header>
</TreeViewItem>

If the TextFormat property is set to either the empty string (""), the string containing only {0} ("{0}"), or is not set at all, the control simply shows the string from the Text property.

History

  • December 8, 2008 - Created the article
  • December 8, 2008 - Updated source code

License

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

Share

About the Author

No Biography provided

You may also be interested in...

Comments and Discussions

 
QuestionCould you update the namespace of the source code, so everyone can download and run? Pin
leiyangge12-Jan-14 21:26
memberleiyangge12-Jan-14 21:26 
GeneralMy vote of 2 Pin
Ivan Krivyakov20-Aug-13 13:21
memberIvan Krivyakov20-Aug-13 13:21 
QuestionRe: My vote of 2 Pin
Zoner9-Feb-14 23:34
memberZoner9-Feb-14 23:34 
AnswerProject Sample not Compiling - SOLUTION ! Pin
Member 799428912-Mar-13 9:31
memberMember 799428912-Mar-13 9:31 
GeneralRe: Project Sample not Compiling - SOLUTION ! Pin
Bogdan Maksimović1-Aug-13 3:03
memberBogdan Maksimović1-Aug-13 3:03 
GeneralMy vote of 4 Pin
anna.novikova19-Mar-12 7:58
memberanna.novikova19-Mar-12 7:58 
GeneralIn order to build the sample Pin
rencels17-Apr-11 6:12
memberrencels17-Apr-11 6:12 
QuestionEvents lost?? Pin
jamluke19-Nov-10 3:40
memberjamluke19-Nov-10 3:40 
GeneralPressing F2 to edit Pin
cmmello10-Nov-10 5:38
membercmmello10-Nov-10 5:38 
GeneralMy vote of 1 Pin
codddddd5-Nov-10 7:11
membercodddddd5-Nov-10 7:11 
GeneralMy vote of 1 Pin
PJBadenhorst3-May-10 0:06
memberPJBadenhorst3-May-10 0:06 
GeneralMy vote of 4 Pin
Christian Rodemeyer31-Jan-10 23:40
memberChristian Rodemeyer31-Jan-10 23:40 
GeneralRe: My vote of 4 Pin
bscaer14-Oct-10 7:32
memberbscaer14-Oct-10 7:32 
QuestionMultiline ? Pin
pbisiac27-Jan-10 0:58
memberpbisiac27-Jan-10 0:58 
GeneralMy vote of 1 Pin
Deni8415-Jan-10 3:07
memberDeni8415-Jan-10 3:07 
GeneralUsing HierarchicalDataTemplate Problem Pin
archmisha8-Dec-09 12:33
memberarchmisha8-Dec-09 12:33 
Suppose i got the following code to define the tree view nodes:
<TreeView Name="FoldersTree" Width="200" DockPanel.Dock="Left" HorizontalAlignment="Left"
KeyDown="FoldersTree_KeyDown">
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Path=Items}">
<StackPanel Orientation="Horizontal" >
<Image Source="{Binding Path=Icon}" />
<TextBlock xml:space="preserve"> </TextBlock>
<local:EditableTextBlock Text="{Binding Path=Name}" ToolTip="{Binding Path=Name}"/>
</StackPanel >
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>


How can i get the EditableTextBlock in the FoldersTree_KeyDown() function in order to set the IsInEditMode = true property?
When i do FodlersTree.SelectedItem i am not getting TreeViewItem, but rather my data bound objects...
GeneralRe: Using HierarchicalDataTemplate Problem Pin
boetor14-Dec-09 21:58
memberboetor14-Dec-09 21:58 
QuestionRe: Using HierarchicalDataTemplate Problem Pin
piotri8530-Dec-09 6:20
memberpiotri8530-Dec-09 6:20 
AnswerRe: Using HierarchicalDataTemplate Problem Pin
jamluke19-Nov-10 3:16
memberjamluke19-Nov-10 3:16 
GeneralRe: Using HierarchicalDataTemplate Problem Pin
cohoman18-Mar-11 4:16
membercohoman18-Mar-11 4:16 
AnswerRe: Using HierarchicalDataTemplate Problem Pin
Member 809702021-Jul-11 7:23
memberMember 809702021-Jul-11 7:23 
AnswerRe: Using HierarchicalDataTemplate Problem Pin
andhome222-Jun-12 11:15
memberandhome222-Jun-12 11:15 
GeneralRe: Using HierarchicalDataTemplate Problem Pin
Sam Bomb4-Jul-12 1:15
memberSam Bomb4-Jul-12 1:15 
GeneralBinding IsInEditMode Pin
Patrick Goergen29-Sep-09 6:34
memberPatrick Goergen29-Sep-09 6:34 
GeneralRe: Binding IsInEditMode Pin
eliprand28-Jan-10 7:09
membereliprand28-Jan-10 7:09 
Generalmy vote is 5 Pin
KunalChowdhury4-Aug-09 1:24
memberKunalChowdhury4-Aug-09 1:24 
QuestionBinding to collection lost after edit item Pin
Jeff4331-Jul-09 14:17
memberJeff4331-Jul-09 14:17 
AnswerRe: Binding to collection lost after edit item Pin
Jeff439-Aug-09 8:18
memberJeff439-Aug-09 8:18 
GeneralDep. Properties Pin
mscholz17-Jun-09 20:21
membermscholz17-Jun-09 20:21 
GeneralClick-to-Edit modification Pin
Ron Dunant29-Mar-09 17:36
memberRon Dunant29-Mar-09 17:36 
GeneralRe: Click-to-Edit modification Pin
jholland878-Sep-11 10:22
memberjholland878-Sep-11 10:22 
GeneralBinding Mode Pin
Ed Havelaar20-Jan-09 15:37
memberEd Havelaar20-Jan-09 15:37 
GeneralNot able to run Application Pin
Member 142043910-Jan-09 21:36
memberMember 142043910-Jan-09 21:36 
GeneralRe: Not able to run Application Pin
west18824-Jan-09 16:41
memberwest18824-Jan-09 16:41 
GeneralBuilding sample Pin
Rod Cullison24-Dec-08 4:25
memberRod Cullison24-Dec-08 4:25 
QuestionHow do you bind to the Text property Pin
masontwo8-Dec-08 8:37
membermasontwo8-Dec-08 8:37 
AnswerRe: How do you bind to the Text property Pin
Jesper Borgstrup8-Dec-08 9:03
memberJesper Borgstrup8-Dec-08 9:03 
GeneralRe: How do you bind to the Text property Pin
Daggs8-Dec-08 15:20
memberDaggs8-Dec-08 15:20 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150819.1 | Last Updated 10 Dec 2008
Article Copyright 2008 by Jesper Borgstrup
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid