This topic provides an overview of the configurable aspects of the xamDiagram™ control.
The following topics are prerequisites to understanding this topic:
This topic contains the following sections:
The xamDiagram configuration aspects are divided into the following categories:
Diagram configuration
Items configuration – the configurations applicable to both nodes and connections
Nodes configuration
Connections configuration
User interactions configuration
The following table explains briefly the configurable aspects of the xamDiagram control and maps them to the properties that configure them. Further details are available after the table.
If the position is not specified individually for each of the nodes a global layout algorithm can be used to layout the nodes. You can either use one of the provided layouts (force directed graph layout, tree layout, grid layout) or implement your own.
The xamDiagram control exposes a set of properties for obtaining which is the currently visible part. The xamDiagram uses a concept of three rectangles whose position and size determine the currently visible part. The XamDiagram class exposes each of these rectangles as a property.
The ViewportRect denotes the currently available space in the control. Margins, paddings of the control set aside, and the ViewportRect have exactly the same size as the xamDiagram .
The WorldRect denotes the area in which there are diagram nodes and connections, that is the rectangle representing the union of all the bounds rectangles of the diagram items.
The WindowRect determines what part of the WorldRect to display in the ViewportRect.
The following table explains briefly the configurable aspects of the diagram items (nodes and connections) of the xamDiagram control and maps them to the properties that configure them. Further details are available after the table.
The xamDiagram items expose a number of properties enabling customization of their look-and-feel.
Diagram items have two templates that can be applied to their content – display template and edit template. The display template defines the presentation of the content and the edit template is the template applied when editing the item’s content.
The following table explains briefly the configurable aspects of the diagram nodes and maps them to the properties that configure them. Further details are available after the table.
The nodes of xamDiagram can be positioned either individually at any location on the diagram’s surface or by applying a layout algorithm (setting available through the Layout property. (For information about the latter approach, refer to the Configuring the Layout topic.)
By default, if no explicit overriding has been applied, a newly created node is displayed at the point of origin of the coordinate system (0, 0).
The size of a diagram node can be controlled explicitly by setting its width and height. There is a default size which depends on its shape. (For reference on default sizes, see Nodes Default Sizes.)
The xamDiagram provides a number of pre-defined shapes for the nodes. (See the General Overview topic for details.) A pre-defined shape is selected through the ShapeType property. This property accepts as a value the respective node shapes available as ShapeType enumeration. If the desired shape is not available as a pre-defined shape, a custom shape can be set to the Geometry property.
Connection points are the points on a node where diagram connections can start/end. A connection point for a node is specified by a name and coordinates.
Name – used for explicitly specifying a connection point for connection through the connection’s DiagramConnection.StartNodeConnectionPointName/ DiagramConnection.EndNodeConnectionPointName properties; therefore, all names of connection points for a node must be unique.
Coordinates – relative to the node’s rectangle. The coordinates are in the range 0,0 (top-left) to 1,1 (bottom-right).
Each connection point is represented by a DiagramConnectionPoint object exposing Name and Position properties.
When using one of the predefined shape types set through the DiagramNode.ShapeType property, the node’s ConnectionPoints collection is pre-populated with a few points according to the node type. For custom node shapes, no connection points are added by default.
The following table explains briefly the configurable aspects of the diagram connections and maps them to the properties that configure them. Further details are available after the table.
There are two possible methods for configuring the start and end points of diagram connections in the xamDiagram control:
Relative – by specifying the nodes to connect to – the start and the end node, respectively. This approach requires associating the connection with a start and end node; in this case, the start and end points of the connection are controlled by these nodes (When the node is relocated, the connection adjusts automatically.).
Absolute – by specifying the coordinates of the connection’s start and end points on the diagram space.
A mixed approach, i.e. specifying a node at one of the ends of the connection and coordinates for the other end, is allowed, too.
The caps of a diagram connection are the shapes that indicate its start and end. By default the start of a connection has no cap and its end is a filled arrow cap.
The xamDiagram provides a number of pre-defined shapes for the caps. (See the Visual Elements Overview ( xamDiagram ) topic for details.) A pre-defined cap is selected through the StartCapType/ EndCapType properties. These properties accept as a value the respective cap shapes available as a DiagramConnectionCapType enumeration. When using one of the pre-defined cap types, you can additionally specify the cap size through the StartCapSize/ EndCapSize properties.
If you need entirely custom caps, a custom Style with target type of DiagramConnectionCapPresenter can be set to the StartCapStyle/ EndCapStyle properties. In this, style any custom ControlTemplate can be specified for achieving the desired look.
The following table explains briefly the configurable aspects of the diagram nodes and maps them to the properties that configure them. Further details are available after the table.
The xamDiagram control supports a set of commands which can represent an action performed on diagram items or an interaction with the UI of the control or have some impact on its undo/redo operations history. The commands can be invoked using keyboard shortcuts, interactions with other controls, etc..
Most of the commands are associated to keyboard keys and key combinations according to the existing computing interface standards (like using Ctrl+C for copy, etc.). You can however change the keyboard shortcuts (or key combinations) by overriding them programmatically. (For details, see Configuring Keyboards Shortcuts).
The diagram items of the xamDiagram control can be configured using the context menu functionality of the control. It is represented by an options pane which is opened upon diagram item’s (or items’) selection through a mouse click on the gear-like icon which then appears. By default, the context menu is disabled on the diagram.
The xamDiagram provides a number of ways to interact with the xamDiagram using the mouse. These are configured by two properties – Tool and DefaultDragInteraction. The Tool setting determines what happens when performing a click and drag in the xamDiagram surface. The following tools are available:
Pointer
Connector
The default is Pointer. It allows a number of interactions controlled by the DefaultDragInteraction setting. The supported interactions are:
None
Zoom
Pan
Select (default)
The Connector tool allows drawing a connection by dragging over the diagram surface.
The xamDiagram control has the capability to display a reduced-size overview of its full content in a separate pane positioned inside the diagram space, by default at its bottom-right corner.
The xamDiagram control provides functionality enabling the programmatic select of diagram items located on its space. There are several types of selection functionality available - single, multiple, and none, which all can be configured through a property setting. By default, multiple diagram items selection is enabled.
The xamDiagram exposes a set of keyboard shortcuts associated with its commands. For a listing of all shortcuts refer to General Overview. The predefined shortcuts can be changed or removed and new ones can be defined.
The xamDiagram control provides functionality, which allows for drag-drop diagram items from a predefined set of shapes, directly on the diagram surface. This functionality is represented by the xamDiagramToolbox™ control. By default, it has two preconfigured shape categories: Basic Shapes and Connections which contain all currently supported diagram node types, including a node representing a label, and the two types of diagram connections.
The xamDiagram control provides support for undo/redo functionality by maintaining operation’s history and executing undo/redo operations.
The Infragistics Undo/Redo Framework provides the undo/redo functionality in Ultimate UI for WPF.
The following topics provide additional information related to this topic.