Most likely an application will use the Diagram control to enable users to interactively create diagrams, flowcharts and other kinds of presentation documents. A user composes or edits a diagram by drawing its elements on the diagram canvas area. Using touch ot mouse, users draw shapes and links, possibly connecting them in complex hierarchies, graphs, trees or other structures they might need.
Creating New Items
New items can be created by drawing them using touch device ot mouse. During drag interaction, the view is updated to show what the new item would look like at the pointer location. If the operation cannot be completed at the current position, mouse cursor changes to a crossed out circle. When the user releases touch or button, the item is created and added to the diagram. The control does not let users create very tiny nodes which would be hard to select and modify. By default links can be drawn only between nodes, unless the AllowUnconnectedLinks property is enabled. Users can cancel item creation by pressing the right mouse button while drawing.
A node can also be created via drag-and-drop from the NodeListView control. Its instance can be added to the Xaml page using <NodeListView> tag. Specify a collection of prototype nodes that should be shown in the list view by calling AddNodes or AddNode methods.
Modifying Items
A user modifies an item by dragging its adjustment handles, or using pinch gesture to scale and rotate nodes. In order to use adjustment handles, an item should first be selected by tapping it. Adjustment handles appear around the item to indicate that now it can be moved or resized. Number and functionality of those handles depend on the item type and the value of the corresponding HandlesStyle property.
Multi-touch Support
- If MultiTouchZoom property is enabled (default), the view can be zoomed or panned using two-touch pinch / flick gestures.
- If MultiTouchModify property is enabled (default), diagram nodes can be moved, scaled and rotated using two-touch pinch / flick gestures.
- If MultiTouchZoom property is disabled, each touch draws diagram items corresponding to current behavior.
- If MultiTouchModify property is disabled, each touch started from a node draws a diagram link.
Latter modes can be used for collaborative whiteboarding / classroom scenarios.
Node Handles
Usually nodes have nine adjustment handles. The one at the center can be used to move the node. When dragged, each corner handle resizes the node by moving the two edges adjacent to the corresponding corner. The edge handles placed at the center of each side can be used to resize a node either horizontally or vertically. Shape nodes can be rotated using an additional round handle drawn above them. Each handle can be enabled or disabled by setting or clearing the respective bit in
EnabledHandles.
Modifying a Link
Variety and behavior of link adjustment handles depend on the link's Shape and SegmentCount. Control-points stay at both ends of each segment that constitutes a link. The library offers three link styles. Following sections discuss how to modify links of each style.
- The first style called Polyline defines links that consist of a series of straight segments drawn between control-points. There are no restrictions as to the number of segments. Dragging a control-point modifies each segment adjacent to the point. If the AllowSplitLinks property is enabled, users are allowed to insert new control points or to remove existing ones. Inserting a control point is done by pressing the left mouse button over a segment and dragging. The new point appears at the mouse location and splits the pointed segment in two.
- If link's style is set to Bezier, each segment has 4 manipulation handles that define a curve. Each curve goes through the end-points, which are shaped as circles. Bend of the curve is defined by the middle two points shaped as rectangles. If a user drags an end-point modification handle, the adjacent control points will be moved with same translation vector as that of the end-point. If a bend control point is dragged, the symmetric control point of the neighboring curve is also moved to ensure the two stay on the same line with the end-point and on the same distance from it.
- Cascading links consist of straight horizontal and vertical segments, each one orthogonal to its neighbors. If a control-point is dragged, the segments adjacent to it are moved and resized preserving their orthogonal orientation to each other. If the AllowSplitLinks property is enabled, users are allowed to insert new control points to Cascading links or remove existing ones. The orientation of the link segments can be changed if CascadeOrientation is set to Auto.
Selecting Items
Individual item can be selected by tapping it. Multiple items can be selected by drawing a selection lasso when Behavior is set to SelectOnly or Modify. Selection state can also be toggled from raidal menu displayed using a long-press gesture.
