Create nodes and their connections programmatically.

I am looking for example how can I create nodes of specific shape and color at specific place programmatically and than add connections (programmatically!) I don't need any toolboxes - just create the chart from the code. And I don't want to let the user change the sizes and places.

Hello DinDan

You can create the diagram programatically by building up a diagram model in code. Start by creating an instance of a diagram model. We provide a few different types of diagrams such as FlowDiagramModel and StarDiagramModel. I recommend using the normal Diagram model class which is the most flexible.

Once you have an instance of Diagram, you can add nodes to the Diagram.Nodes collection. The type of node that you'll probably be most interested in is the ShapeNode. This has a Shape property that lets you easily specify what shape you want the node to be rendered as. You can use one of our pre-built shapes, or create your own custom shapes. (Let me know if you need help with this). If you don't specify a shape, the node will use the Rectangle shape by default. You can find the pre-built shapes in the DiagramShapes class. To set the position and size of the node, you can set the Bounds property. Here is an example of programatically building a node:

ShapeNode node1 = new ShapeNode() { Bounds = new Rect(50, 50, 200, 100), Shape = DiagramShapes.Parallelogram };

You can then add this node to the DiagramModel.Nodes collection. You can run up the QuickStart project and look in the diagram-toolbox to see what shapes are available.

For the connections, you can create an instance of DiagramConnection, and pass the source and destination connection points into the constructor. You can get the connection point instances from the nodes you have already created. Here is an example:

IDiagramConnection connection1 = new DiagramConnection(node1.ConnectionPoints[2], node2.ConnectionPoints[4]);

Here the connection will be routed from node1 to node2. You can get the connection points by using the index operator on the ConnectionPoints collection. In terms of shape nodes, each shape can have different numbers of connections points. A Rectangle has 4 points - one in the center of each side. A 5-pointed star has a connection point on each point of the star. You'll need to experiment with what indicies get which point for each different shape you need. Also, once you've created a DiagramConnection instance, don't forget to add it to the Diagram.Connections collection.

In order to render the diagram, you can set the Diagram property of the DiagramSurface in your application. If any changes are made to the diagram model, the DiagramSurface will listen to these changes and update the visuals accordingly.

The node model implementations that come with WPF Diagrams do not include coloring properties, so to color each node in code, a bit of customization is required. For convenience, I've attached a sample to help you get started with this. You will see there is not much code involved so it should be easy to follow. I started by implementing a ColoredShapeNode class which extends the ShapeNode class and includes a Color property. Then in MainWindow.xaml, I created the custom ShapeNodeStyle and used a setter to set the ShapeTool.ShapePathStyle property. This attached property is exclusively used by shape nodes and is used to set the Path style used to render the shapes. In the setter, I am binding the value to the Color property and I use a custom converter to convert the color into a Path Style. This style simply sets the Fill property based on the Color property. You can extend this approach to use a gradient brush and include a border if you like. In MainWindow.xaml, the ShapeNodeStyleSelector is used to apply the ShapeNodeStyle to all ColoredShapeNodes in your diagram. This selector is used to set the NodeStyleSelector property of the DiagramFormatter, which in turn is used to set the Formatter property of the DiagramSurface used to render the diagram model. Let me know if you have any questions about this. Also, if you want to run the sample to see it in action, make sure to include a reference to your copy of the Mindscape.WpfDiagramming.Foundation.dll.

To prevent users from modifying the diagram, you can set the IsReadOnly property on the DiagramSurface to true.

If you havn't done so already, you may like to go through this quick getting started tutorial to set up the references, licensing and the merged dictionary to get started with WPF Diagrams in your application: http://www.mindscapehq.com/blog/index.php/2011/5/16/getting-started-with-wpf-diagrams-2-0/

This should point you in the right direction for creating your application. Let me know if you have any questions while following this and I'll help you out.

Jason Fauchelle

Another question - how do I add legend to connection and nodes programmatically?

Hello DinDan

Are you talking about the content displayed by the Node and Connections? If so, you can set these programatically by setting the Data property of the nodes and connections. If this does not answer your question, let me know.

Jason Fauchelle