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)
{
if (treeView1.SelectedItem is TreeViewItem)
{
TreeViewItem tvi = treeView1.SelectedItem as TreeViewItem;
if (tvi.Header is EditableTextBlock)
{
EditableTextBlock etb = tvi.Header as EditableTextBlock;
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