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

License

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

About the Author

Deepak-VS

India

Member

Article Top

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

You must Sign In to use this message board. (secure sign-in)

Search this forum
	Profile popups Noise Layout Per page

My vote of 1

Syed Javed

8:12 29 Feb '12

Poor
Sign In·View Thread·Permalink

My vote of 5

Member 8111080

1:53 19 Sep '11

It works great.
Sign In·View Thread·Permalink

Bug in updating the text block binding after edit.

aj.esler

15:10 24 Oct '10

Hi.
Thanks for the great control.
I have found a bug in it that causes a null binding to be returned on the following line

BindingExpression expression = textBlock.GetBindingExpression(TextProperty);

This was causing the item that the editable text block was bound against to not be updated.
The fix seems to be adding the TextBlock qualifier in front of the TextProperty, like so:

BindingExpression expression = textBlock.GetBindingExpression(TextBlock.TextProperty);

Hope this helps someone.

Problem double clicking on treeviewitem

industryunleash

5:36 9 Aug '10

This is the code for my treeview datatemplate:

<HierarchicalDataTemplate DataType="{x:Type vm:SystemViewModel}" ItemsSource="{Binding ComponentVMs, UpdateSourceTrigger=PropertyChanged}" >
                 <StackPanel Orientation="Horizontal">
                    <my:EditableTextBlock Text="{Binding Path=DisplayName, Mode=TwoWay}" IsInEditMode="{Binding Edit, Mode=TwoWay}">
                        <my:EditableTextBlock.ContextMenu>
                            <ContextMenu Opened="ContextMenu_Opened" ItemsSource="{Binding Path=PlacementTarget.DataContext.Commands, RelativeSource={RelativeSource Self}}"
                               ItemContainerStyle="{StaticResource ContextMenuItemCommandsStyle}">
                            </ContextMenu>
                        </my:EditableTextBlock.ContextMenu>
                    </my:EditableTextBlock>
                </StackPanel>
            </HierarchicalDataTemplate>

But when I double click on a treeview item to edit it, the textbox flashes temporarily and then disappears, it won't stay open so I can edit the text.

Re: Problem double clicking on treeviewitem

Deepak-VS

6:55 10 Aug '10

I tried to replicate the same scenario but was not able to reproduce the bug you reported. If you could share the some more relevant code then i might be able to help.
Sign In·View Thread·Permalink

Re: Problem double clicking on treeviewitem

industryunleash

8:51 11 Aug '10

I'm not quite sure what code is relevant but here's the code for the entire treeview:

<TreeView Grid.Row="0" x:Name="archTree" ItemsSource="{Binding TreeVMs}" Style="{StaticResource MainTreeStyle}" 
                  PreviewMouseLeftButtonUp="archTree_PreviewMouseLeftButtonUp">
          <TreeView.ContextMenu>
            <ContextMenu Opened="ContextMenu_Opened" ItemsSource="{Binding Path=TreeViewCommands}" 
                         ItemContainerStyle="{StaticResource ContextMenuItemCommandsStyle}" >
            </ContextMenu>
          </TreeView.ContextMenu>
          <TreeView.ItemContainerStyle>
            <Style TargetType="{x:Type TreeViewItem}">
              <!-- This Setter applies an attached behavior to all TreeViewItems. -->
              <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
              <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
              <Setter Property="FontWeight" Value="Normal" />
              <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                  <Setter Property="FontWeight" Value="Bold" />
                </Trigger>
                <Trigger Property="IsSelected" Value="False">
                  <Setter Property="FontWeight" Value="Normal" />
                </Trigger>
              </Style.Triggers>
            </Style>
          </TreeView.ItemContainerStyle>
          <TreeView.Resources>
            <HierarchicalDataTemplate DataType="{x:Type vm:SystemViewModel}" ItemsSource="{Binding ComponentVMs, UpdateSourceTrigger=PropertyChanged}" >
                 <StackPanel Orientation="Horizontal">
                    <my:EditableTextBlock Text="{Binding Path=DisplayName, Mode=TwoWay}" IsInEditMode="{Binding Edit, Mode=TwoWay}">
                        <my:EditableTextBlock.ContextMenu>
                            <ContextMenu Opened="ContextMenu_Opened" ItemsSource="{Binding Path=PlacementTarget.DataContext.Commands, RelativeSource={RelativeSource Self}}"
                               ItemContainerStyle="{StaticResource ContextMenuItemCommandsStyle}">
                            </ContextMenu>
                        </my:EditableTextBlock.ContextMenu>
                    </my:EditableTextBlock>
                </StackPanel>
            </HierarchicalDataTemplate>
            <DataTemplate DataType="{x:Type vm:SequenceViewModel}">
              <TextBlock Text="{Binding DisplayName, Mode=TwoWay}">
                <TextBlock.ContextMenu>
                  <ContextMenu Opened="ContextMenu_Opened" ItemsSource="{Binding Path=SequenceCommands}"
                               ItemContainerStyle="{StaticResource ContextMenuItemCommandsStyle}">
                  </ContextMenu>
                </TextBlock.ContextMenu>
              </TextBlock>
            </DataTemplate>
            <DataTemplate DataType="{x:Type vm:ConnectorViewModel}">
              <TextBlock Text="{Binding DisplayName, Mode=TwoWay}">
                <TextBlock.ContextMenu>
                  <ContextMenu Opened="ContextMenu_Opened" ItemsSource="{Binding Path=SequenceCommands}"
                               ItemContainerStyle="{StaticResource ContextMenuItemCommandsStyle}">
                  </ContextMenu>
                </TextBlock.ContextMenu>
              </TextBlock>
            </DataTemplate>
          </TreeView.Resources>
        </TreeView>

Re: Problem double clicking on treeviewitem

industryunleash

9:04 11 Aug '10

Fixed it, the problem was that on my PreviewMouseLeftButtonUp method I called Focus() on the tree, which messed with the editing thing. Idk how but once I commented out that line it worked.
Sign In·View Thread·Permalink

Re: Problem double clicking on treeviewitem

Deepak-VS

4:47 18 Aug '10

That's good. What was happening is the text box shown when in edit mode is hidden when the control looses focus - here in this case the focus was set back to tree item which made the text box hidden.
Sign In·View Thread·Permalink	2.00/5 (1 vote)