Search
In-place Editing the Contents of Items

Standard in-place editing

To enable in-place editing of text of diagram items, set the AllowInplaceEdit property to true. It lets users edit the text of a diagram element by double-clicking it. In-place editing mode can be accepted and exited by clicking anywhere outside the text-field.

The following properties can be edited in place:

If you want to change the way of accepting / rejecting changes, the following Diagram properties allow using the ENTER and ESC keys to perform that: InplaceEditAcceptOnEnter and InplaceEditCancelOnEsc. When InplaceEditAcceptOnEnter is set to true, pressing the ENTER key causes accepting changes and exiting inplace-edit mode. If InplaceEditAcceptOnEnter is set to false, pressing ENTER inserts a new line in the text while in inplace-edit mode. If InplaceEditCancelOnEsc is set to true, pressing the ESC key performs rejecting changes and exiting inplace-edit mode.

If you want to enable/disable in-place editing of a specific table's cell, handle the CellTextEditing event. To enable/disable in-place editing of nodes, handle the NodeTextEditing event. For a DiagramLink object, the LinkTextEditing event is raised while in-place editing. These validation events let you prevent users from editing the text in the particular object if it is necessary.

When in-place editing of a node is completed, the NodeTextEdited event is raised. For a table's cell, handle the CellTextEdited event. LinkTextEdited event is raised when in-place editing of a DiagramLink object completes.

By default, WpfDiagram creates a TextBox control to let users edit item's text. The EnterInplaceEditMode event allows customizing the properties of that control, or attaching event handlers to it. InplaceEditFont specifies the font of the in-place edited text box.

When leaving inplace-edit mode, the LeaveInplaceEditMode event is raised. This event is raised in all cases of closing the inplace-edit control, for example, when the user accepts or cancels the changes made to an item's text, or when the EndEdit method is called.

To enter in-place editing mode programmatically and let users edit an item's text inline, call the BeginEdit method of DiagramView. The EndEdit method exits inplace edit mode.

In-place editing of custom items

The InplaceEditable interface allows implementing the standard in-place editing for custom defined items. By means of the methods of this interface, you can specify the position of the inplace-edit textbox control and copy the entered text to a property of the edited item.

GetEditRect returns the destination rectangle of the in-place edit box. GetTextToEdit represents the initial contents of the in-place edit box. SetEditedText sets the edited text to the object after completing the in-place editing.

Using custom editor controls

Handle the CreateEditControl event to create a custom in-place editor control. This event is raised if AllowInplaceEdit is enabled and the user double-clicks an item, or when the application invokes the BeginEdit method of DiagramView. When the event is raised, set its EditControl argument to an instance of your custom editor class. You can use any WPF control as editor instead of the default TextBox. It is your responsibility to set the editor control size and position. For an example, take a look at the InteractiveTable sample project.

When the user exits in-place editing mode by clicking outside the editor, MindFusion.Diagramming raises the DestroyEditControl event. Handle it to transfer the values entered into the editor to the respective properties of the edited item, and finally destroy or hide the editor control.