Diagram for Silverlight has the ability to present powerful and feature-rich diagrams. It provides an intuitive user interaction model for creating and editing diagrams with XAML support. It stores graphical objects in a node graph and renders those objects onto the screen. It explicitly lays out diagram objects, or lets the layout manager handle the job by automatically arranging the nodes using the predefined layout algorithms. Diagram is fully localizable for any culture.
Nodes can be added to the diagram surface programmatically by defining them in XAML, or interactively during run time by dragging and dropping them from a built-in symbol palette. The shape of nodes can be set to any one of the predefined shapes provided, or you can specify a custom shape by assigning any user-defined WPF Path elements. You can also design custom Path elements using Microsoft Expression Blend. Nodes can be grouped together and common operations can be performed on them.
You can define one or more ports on nodes for connecting them to other nodes. Connection ports can be placed anywhere within a node or at its edges. You can choose one of the predefined symbols like arrows, circles, or diamonds, or you can define a custom connection port. The look and feel of these connection ports are fully customizable.
Connectors are used to represent a link between two nodes. They are usually lines drawn from one connection port in a node to another. Line connectors are used to represent a logical flow or connection between the nodes of a diagram. Setting up such a connection will keep the connectors docked to the nodes when the nodes are moved around. Diagram provides orthogonal, Bezier, and straight connectors. You can also draw polylines using intermediate points. Diagram also provides line bridging support that renders a bridge to clearly distinguish orthogonal lines at their points of intersection.
Diagram provides options to fully customize nodes, connectors, and connection ports. Besides the nodes, customizable options are provided to change the look and feel of different portions of a diagram, enabling you to create professional-looking diagrams that reflect style patterns commonly used in business.
Diagram provides various user interactions, like displaying tooltips and context menus for nodes and connectors. Context menus provide easy access to commonly used commands for nodes and connectors.
The surface on which all the nodes are rendered is fully customizable. The drawing area of the diagram control can be rendered with horizontal and vertical gridlines. You can enable horizontal and vertical rulers to indicate the coordinates of the mouse pointer position with respect to the view.
Diagram content can be exported to the following file formats: Bitmap, JPEG, PNG, GIF, TIFF, WDP.
Diagram supports saving a diagram page in XAML format (full visual UI) for future use or in XML format (platform independent diagram information like node size, position, etc.). The content of the page can also be saved to a stream from which it can be loaded again at a later point in time.
Diagram supports printing with the following user options to customize the output: print preview, to view the page before printing; color modes, to select printing in color or black and white; and stretch, to adjust the fit of the image on the page.
Diagram provides several commands that enable users to easily perform commonly used operations like node alignment, sizing, nudging, spacing, undo, redo, z-order specification, and clipboard operations. These commands are associated with tools available in the built-in toolbar to enable you to build a diagram intuitively.
Diagram provides out-of-the-box data binding support to many popular data sources including ObservableCollection, CollectionViewSource, and all the collections implementing ICollectionView and IEnumerable that can bind to XML data sources. Data binding is usually used in conjunction with the built-in layout manager to automatically arrange the nodes in one of the built-in layout patterns supported.
The directed tree Layout automatically arranges nodes in a tree-like structure. This enables users to position nodes in a tree-like fashion without specifying the coordinate location for each node. The horizontal and vertical spacing between the nodes of the tree can also be specified. The layout manager enables the tree to be positioned in different directions. It can be used to create sophisticated arrangements, a few of which have been illustrated in the following images.
The hierarchical tree layout arranges nodes in a tree-like structure. However, unlike the directed tree layout, the nodes in a hierarchical layout may have multiple parents. As a result, there is no need to specify the layout root. This enables users to have many root nodes for a layout. The horizontal and vertical spacing between the nodes of the tree can also be specified. The hierarchical layout is useful when you want to show multiple parent-child relationships (i.e., when you have nodes with multiple parents). The layout manager enables the tree to be positioned in different directions and can be used to create sophisticated arrangements, a few of which have been illustrated in the following images.
The Radial Tree Layout Manager is a specialization of the Directed Tree Layout Manager that employs a circular layout algorithm for locating diagram nodes. RadialTreeLayout arranges nodes in a circular layout, positioning the root node at the center of the graph and the child nodes in a circular fashion around the root. Sub-trees formed by the branching of child nodes are located radially around other child nodes.
Table layout automatically arranges nodes in a tabular structure based on specified intervals, without the need to specify the offset positions for each node. The layout can be designed by specifying the number of nodes in each row and column. Nodes are assigned to rows and columns based on the order in which they are added to the model and also based on the maximum number of nodes allowed in that row or column. Support for horizontal and vertical table-expand modes has also been provided.
The symbol palette is a large collection of predefined nodes. It allows nodes and line connectors to be easily dragged into a diagram. Custom symbols can also be added to the symbol palette. It also supports grouping and filtering symbols.
Symbol designer is a stand-alone application that lets you create and modify custom symbols. The custom shapes designed can then be used in your applications and also in the Diagram Builder application.