Search
Controlling User Interaction

There are several ways to control user actions on the diagram as a whole, or on individual items in the diagram.

Disabling Interaction

By setting the Enabled property of DiagramView to false you can make the diagram contents non-modifiable at all. Thus it will function as nothing more than a static image you can use to present some data to the user. The diagram can still be modified programmatically though.

Drawing Modes

The Behavior property provides several predefined sets of rules specifying how user input with the mouse/keyboard is interpreted. The default Behavior is LinkShapes, where drawing with the mouse from an unoccupied point of the document is processed as a ShapeNode creation request, and drawing from a node creates a DiagramLink. Note that such behavior leads to some extra work when creating overlaying nodes - users need to draw the second node on an empty area and move it over the first one afterwards. If you want to avoid that, use the DrawShapes behavior instead. Additional members of the Behavior enumeration provide modes for drawing different node types (e.g. LinkTables), and ones that allow only limited interactions, such as SelectOnly or Modify.

Setting Diagram Bounds

Document size can be get or set with the Bounds property. By default users are able to move items outside the diagram bounds. To prevent this, enable the RestrictItemsToBounds property. It provides three options to restrict item positions. They might not be restricted at all. The most restrictive option is to keep items entirely inside the document area. Another option allows items to be partially outside the document area but having at least a small visible part inside.

Item Constraints

Constraints upon how users are allowed to modify a node are set through the Constraints and EnabledHandles properties. The former can be used to constrain the move direction, node size and aspect ratio. The latter enables or disables specific manipulation handles of a node. That allows making the node non-moveable, non-resizable, or resizable only horizontally/vertically.

Items can be locked via the Locked properties. Locked items are excluded from selection and users cannot select, move or modify them.

Control How Links Connect to Nodes

The AllowIncomingLinks property of the DiagramNode class lets you specify whether incoming links can be drawn to a node. The AllowOutgoingLinks property lets you do that for outgoing links.

Anchor points define where link's ends should be placed when a user attaches a link to a node. A pattern of anchor points can be assigned to a node by setting the node's AnchorPattern. The SnapToAnchor property specifies whether link ends are aligned to anchor points when creating or modifying links.

Once a link is created, a user can still move its end points to different positions, unless LinkEndsMovable is set to false. This can also be controlled on a per-link basis by using the AllowMoveEnd and AllowMoveStart properties. You can dynamically validate moving of links' end points using the LinkModifying event.

The AllowSelfLoops property enables or disables drawing of reflexive links. They are allowed by default, but can be disabled if you consider them meaningless for the application. AllowLinksRepeat controls if two nodes can be connected more than once in the same direction.

In-place Text Editing

The text of nodes and tables can be edited in-place by double-clicking the respective items. To enable the feature set the AllowInplaceEdit property to true. For tables, both captions and cells can be edited in this way. Handle the CellTextEditing event to enable/disable in-place editing per cell. Depending on the type of item being edited, one of these events can be fired when editing completes: NodeTextEdited, CellTextEdited. In-place editing mode is exited when users click outside the text entry control. Pressing ENTER or ESC exits inplace-edit mode if respectively InplaceEditAcceptOnEnter and InplaceEditCancelOnEsc are enabled.

Validation Events

When users try to create, delete or select an item, one of the following events is raised. To ban the action, set corresponding event bool argument to false:

Event

Description

NodeCreating

Raised while a user draws a new node.

LinkCreating

Raised while a user draws a new link.

NodeSelecting

Raised when the user is trying to select a node.

LinkSelecting

Raised when the user is trying to select a link.

NodeDeleting

Raised when the user is trying to delete a node.

LinkDeleting

Raised when the user is trying to delete a link.

NodeModifying

Raised while a user modifies an existing node.

LinkModifying

Raised while a user modifies an existing link.

For more events that can be fired by user's actions, please, consult the Events section of the documentation.

Mouse Wheel

By default, the mouse wheel scrolls the view vertically. Users can scroll horizontally by holding down the Alt modifier key while rotating the mouse wheel. The Control modifier scrolls the view in larger amounts (half the viewport width or height depending on scroll direction). Setting the MouseWheelAction property to Zoom makes wheel rotation zoom into the view instead. You could implement your own mouse-wheel logic by setting MouseWheelAction to None and handling the MouseWheel event.

Interaction Properties