DiagramLite Programmer's Guide
Version History

New in version 2.3

Automatic node alignment

If AutoAlignNodes is enabled, the node currently being drawn or resized is aligned to another node so that a pair of their vertical or horizontal sides become collinear. To specify the maximal distance at which nodes are aligned, set the AutoAlignDistance property. The pair of aligned nodes is indicated visually by drawing an alignment guide using the pen assigned to AlignmentGuidePen.

Fractal tree layout

FractalLayout is a tree layout algorithm that places child nodes symmetrically around their parent node. Nodes at the lowest level are arranged directly in a circle around their parent. At the upper level, the already arranged nodes form branches that are arranged in a circle around the new parent node. The algorithm is recursively repeated till the highest level is reached. If nodes in the tree have uniform number of children, the end result has fractal-like appearance (subsets of the graph look like scaled-down copies of the whole graph).

You can choose which node should be displayed at the center of the topmost circle by setting the Root property. If it is not specified, the algorithm automatically selects a root that leads to more balanced distribution of nodes.

Attaching and Grouping Items

DiagramLite allows attaching a node to another node, establishing a subordinate - master relationship between them. The easiest way to attach nodes is to call the AttachTo method. When a master node is moved, all of its subordinates follow it, so that the initial distance between them stays constant. This happens both when a user moves the master node around, and when the node's position is changed using a method or a property.

Miscellaneous

New in version 2.2

Virtualization

VirtualizingDiagram can display very large diagrams where there are actual DiagramNode and DiagramLink instances created only for the elements that should be currently shown on screen. This helps keeping the Silverlight visual tree small and could lead to huge performance improvements if there are thousands of elements in the diagram.

The data items that should be displayed as nodes must be assigned to the NodesSource property, and the data items that should be displayed as links must be assigned to the LinksSource property. The BindingMode property specifies whether the data source should be updated when the user draws new diagram items interactively.

Miscellaneous

New in version 2.1

CompositeLayout algorithm

CompositeLayout partitions the diagram into several subgraphs and applies the algorithm specified via the SubgraphLayout property on each part. If the part is a tree, it is arranged using the algorithm specified via the SubtreeLayout property, which is set to a radial TreeLayout instance by default. Finally the algorithm specified via MasterLayout is applied on the graph that represents the overall partition. By running the polynomial-complexity layout algorithms on small subgraphs, CompositeLayout is able to process a large graph much faster than if a layout algorithm is applied on the whole graph.

CompositeLayout can run on custom partitions specified as lists of nodes, or automatically partition the diagram via two automatic methods based on graph connectivity and graph path lengths. Set the PartitionMethod and CustomPartition properties to specify how the diagram should be partitioned.

Other layout improvements

Miscellaneous

New in version 2.0.1

Create HTML image maps

HtmlBuilder generates an HTML image map whose <area> elements correspond to the items shown in an exported diagram image. The CreateImageMap method generates a full <map> tag, including its <area> elements. CreateUseMapAttr method creates the code to reference a map from within an <img> tag. The HyperLink and ToolTip properties of items are set as values of the href and alt attributes of the corresponding area elements.

Miscellaneous

New in version 2.0

Swimlanes

The lane grid lets you emphasize the relationship between a group of diagram items by displaying them in a distinct lane or cell within the grid. To display the lane grid, set the EnableLanes property of the Diagram class to true. In order to customize the grid, set the various attributes exposed by the LaneGrid property, which lets you specify the number of rows and columns, add headers, customize the cell appearance, etc. The new Lanes sample project uses the lane grid to let users draw Gantt charts.

Swimlane layout algorithm

SwimlaneLayout can be used to arrange process diagrams in which nodes representing activities are placed in swimlanes representing resources. The index of the resource allocated to an activity should be assigned to the corresponding node's LayoutTraits[SwimlaneLayoutTraits.Lane].

By default, the algorithm works with the diagram's LaneGrid, but its SwimlaneGrid property can be set to any class that implements ISwimlaneGrid. This allows applying the layout to a custom-drawn grid rendered through a custom control template, or one composed of locked background nodes. 

CascadeLayout algorithm

CascadeLayout places nodes on a virtual grid and arranges links orthogonally, such that if the source graph is planar all links are guaranteed to have no more than two bends and will not intersect. By default the layout method arranges nodes in rows and link segments in columns; this can be changed by setting the Orientation property.

TriangularLayout algorithm

TriangularLayout places nodes on a virtual grid, such that if the source graph is planar, all links are guaranteed to have a single segment and not intersect. If the graph is not planar, its intersecting links can be optionally segmented and bended in order to improve readability. The layout method places the nodes from the external face on a triangle and recursively adds the rest of the nodes as vertices of internal triangles. As a result, it is very effective for near maximal-planar (a.k.a. triangular) graphs.

HierarchicalLayout algorithm

HierarchicalLayout places nodes on user-defined levels, such that if the source graph is level-planar, all links are guaranteed to have a single segment and not intersect. The layout method requires that for each node LayoutTraits contains a HierarchicalLayoutTraits.Level entry specifying the level, and no two connected nodes must be on the same level.

Miscellaneous

New in version 1.7

Clipboard support

A single diagram item or a selection of items can be copied or cut to the Windows clipboard. This is done programmatically using the CopyToClipboard and CutToClipboard methods. To paste the clipboard contents into the current diagram, call PasteFromClipboard. Clipboard support was introduced with version 4 of Silverlight, so these methods are not available in the Silverlight 3 build of the control.

Node rotation

Shape nodes can be rotated at an arbitrary angle. The RotationAngle property can be used to get or set the current rotation angle in code. Nodes can also be rotated interactively if the Rotate flag in EnabledHandles is set. That flag displays a round adjustment handle above the node which sets the rotation angle when dragged.

Miscellaneous

New in version 1.6

Support for custom arrowheads

The type of the HeadShape, BaseShape and IntermediateShape properties of DiagramLink has been changed from enum ArrowHead to class Shape, which is also used to define ShapeNode shapes. The ArrowHeads class now exposes Shape definitions that correspond to the ArrowHead enumeration members from previous versions. It is also possible to assign any Shapes member or a custom shape as an arrowhead. When used for arrowheads, position (50, 0) in the shape definition corresponds to the arrowhead's tip point.

Adjustment handles styling

The ActiveItemHandlesStyle, SelectedItemHandlesStyle and DisabledHandlesStyle properties can be used to customize the appearance of selection handles. The HandlesVisualStyle objects returned by them provide sub-properties that control the handles stroke and fill attributes.

Miscellaneous

New in version 1.5

Support for Silverlight 4

The package now includes a Silverlight 4 version of the MindFusion.Diagramming assembly, available in the VS2010 subfolder of the installation folder. That subfolder also includes sample projects for Visual Studio 2010. Silverlight 3 and Visual Studio 2008 are still supported.

Printing support

Printing support is available in the Silverlight 4 version of the component. Call the Print method to print the current diagram. The PrintOptions class exposes the available settings for printing such as Margins and HeaderFormat. An instance of this structure is accessible via the diagram's PrintOptions property.

Visual states

The DiagramItem class now defines two visual state groups. The group SelectionStates contains the Unselected and Selected states. The MouseStates group contains the MouseOut, MouseOver and MouseDown states. Note that the control does not provide any built-in animations for transitions between these states. If that's required, it can be implemented through custom Xaml templates where Storyboard objects are associated with states through the VisualStateManager.VisualStateGroups property.

Miscellaneous

New in version 1.4

TreeView nodes

The TreeViewNode class represents nodes that can display hierarchical data. The root items displayed in the node can be accessed through the RootItems property. New items can be added to and removed from the returned collection. The root items can have child items on their own and so on. For more information, refer to the TreeViewItem class.

Link auto-snapping

Now links can automatically connect to the nearest diagram node without the mouse pointer reaching the node. This is enabled by setting the AutoSnapLinks property. The maximum distance at which auto-snap works can be specified through AutoSnapDistance.

Miscellaneous

New in version 1.3

Undo / redo support

If the UndoEnabled property is set to true, DiagramLite tracks changes done on the diagram and allows undoing and redoing them later by calling the Undo and Redo methods respectively. Multiple changes could be recorded as a single undoable operation by enclosing them between StartCompositeOperation and CommitCompositeOperation calls. It is also possible to create custom undoable operations by deriving from the Command class and calling ExecuteCommand with the custom command as argument.

NodeListView control

NodeListView implements a palette -like control that lets the user create new nodes on the canvas via drag-and-drop. Its elements can be instances of any DiagramNode -derived class, including custom node types, as long as they implement the Clone method.

Miscellaneous

New in version 1.2

Ruler control

The Ruler control provides horizontal and vertical scales that helps users measure and align diagram items. In order to use the Ruler, it must be set as a parent of the Diagram object, i.e. in XAML the <Ruler> element should contain the <Diagram> element. The control also implements a scrollable area and can be used instead of ScrollViewer.

Styling and templating

LayereLayout enhancements

Miscellaneous

New in version 1.1

Overview control

The Overview control displays a scaled-down view of the Diagram. The diagram can be rendered either using a fixed ScaleFactor, or in FitAll mode where the scale is set in such a way that the whole diagram fits inside the overview area. The control also display a tracking rectangle corresponding to the currently visible diagram region, and lets users scroll the diagram by dragging the tracking rectangle.

Flowchart graph layout

FlowchartLayout recognizes program code-like patterns in the graph, such as loops, sequences and if/switch branchings, and arranges them recursively. FlowchartLayout could be used to arrange other types of graphs as well, though with some restrictions. For example it treats all back links as loops in the code, and expects that they are nested - loop links starting closer to the stop node should end closer to the start node. Another similar restriction is that there shouldn't be any cross-links that connect different branches of a decision sub-graph.

Topological graph layout

If the underlying graph if acyclic, TopologicalLayout arranges the nodes linearly in such a way that each node comes before all destination nodes of its outgoing links. The links are drawn as curves above the chain of nodes, with their height proportional to the distance between the nodes. If the graph is not acyclic, the layout algorithm finds an ordering with a minimal number of back links, and draws the back links below the chain of nodes.

Link routing enhancements

A much faster link routing algorithm has been implemented. It can arrange a thousand links for just a few seconds, while older versions would require several minutes. Now it is also possible to create custom routing classes to be used when a link must be routed by implementing the ILinkRouter interface. An instance of such class can be set through the LinkRouter property of the Diagram. DiagramLite provides two classes that implement ILinkRouter - GridRouter and QuickRouter. By default LinkRouter is set to a QuickRouter instance.

Miscellaneous

New in version 1.0.3

OrthogonalLayout

The OrthogonalLayout class implements an orthogonal graph layout algorithm. Each link is drawn as a chain of alternating horizontal and vertical segments. Nodes are placed in a way that facilitates few links bends and crossings. This algorithm was designed for planar graphs where the nodes have at most four incident links, and produces best results with such graphs as input. It can arrange any arbitrary graph as well, by adding some dummy nodes and links to planarize the graph and reduce its vertex degree, and removing them after the layout.

CircularLayout

CircularLayout distributes nodes evenly on the circumference of a circle at positions that result in as few link crossing as possible. Set its Radius property to specify the size of the layout circle. Use SiftingRounds to set the number of fine-tuning crossing-reduction iterations.

Containers

The ContainerNode class implements nodes that can contain child nodes. Containers can be nested one within another, without limitation on the depth of nesting. Child nodes can be added interactively by the user, or programmatically through the Children property of a container.

Path finding

The PathFinder class can be used to find paths and cycles within the diagram graph. The diagram can be considered either a directed or undirected graph, as set through the PathFinder constructor. Graph information is cached by a PathFinder instance. If nodes and links are added to or removed from the graph, a new PathFinder instance should be created for subsequent operations.

Miscellaneous

API changes

New in version 1.0.2

Multiple selection

The user can select multiple diagram items by holding down Ctrl and drawing a selection rectangle, or by Ctrl + clicking on items. If Behavior is set to Modify, users can draw a selection rectangle without using the Ctrl key. Multiple selection can be disabled by setting AllowMultipleSelection to false.

Serialization improvements

The control raises the SerializeTag and DeserializeTag events to let you save or load your custom Tag data. The events are raised while serializing each diagram item, and also for the Tag property of the Diagram object. The SerializeControl and DeserializeControl events let you save information for controls hosted in ControlNode nodes.

BPMN shapes

This version adds predefined Shape definitions that implement the Object Management Group / Business Process Management notation. They are available as members of the Shapes class and have names that start with a Bpmn prefix. They can also be accessed by ID using the FromId method of Shape.

Shape extensions

Miscellaneous

New in version 1.0.1

Copy constructors

DiagramItem and its derived classes now provide copy constructors that let you clone items. The following constructors are available for specific classes: ShapeNode, ControlNode, TableNode and DiagramLink. The following constructors are defined in base classes to let derived classes copy protected fields: DiagramItem, DiagramNode.

Pen class

The Pen class encapsulates the color and width of the items border lines. The type of various Pen properties has been changed from System.Windows.Media.Brush to Pen.

New events

The NodeModified and LinkModified events are raised when the user moves or resizes an item. The SelectionMoved event is raised when the user moves multiple items.

Fixed bugs