loading custom node Types from dataSource

I have created a custom node class AGDiagramNode from DiagramNodeBase, and AGDiagramModel from DiagramModelBase, and followed some sample from the support forum and every thing is working fine. Now i want to load Node Paths and Connection points from some database, and for every record in the database i want to create an insteance of AGDiagramNode in such a way that its Path should be read from database. it means every node will be instance of AGDiagramNode but it will have different path geomettery and connection point depending on database records. I need some help from support forum to find a way to load nodes into DiagramToolBox from database and and all of its style should also be readable from database, in addition when we draw a node from the tool on the diagram surface its presentation style should also be read from the database. Abdul

Hello Abdul

You may find it easier to have your nodes extend the ShapeNode class instead of DiagramNodeBase. ShapeNode is a single node implementation that can appear as any shape. There are other classes called DiagramShape and ShapeLayout that is used by the ShapeNode and encapsulates the information required to draw a shape. This makes it easier to load shape information externally such as from a database and load it into tool box items and nodes. For more information about this approach, take a look at this blog post: http://www.mindscapehq.com/blog/index.php/2011/8/30/wpf-diagrams-custom-diagram-shapes/

Extending from DiagramNodeBase is still a viable solution though, but will mean you'll need to implement your own way of providing shape information externally from a database.

Whichever approach you decide to use, please let me know if you have any specific questions about how to use our WPF Diagramming framework. Feel free to send a sample project of what you've done so far which can help to answer any questions you have.

-Jason Fauchelle

Thank You Jason for your response to my query, i tried visiting the link you mentioned above, BTW, I had already went through that blog post a few days ago. That link is really very helpful, but infact does not suits our requirement. I think I should first summaries my objective to achive.

I want to allow my users to load already created custom Nodes/Shapes (which they already created from some other part of the application with custom geometery and connection points) from some xml Shape/Node description file. every shape/Node should use a generic Node/Shape class in this regard, and does not need to create a separate shape/node class for every customized node. That custom Class should have the ability to not create nodes connection points, as well as should also be able to create style for every node. for this purpose i created a custom class by extending DiagramBase, this new class is able to create custom connection points too as follows,

        var connection = new AGInputConnectionPoint(this, Edge.Right, 0) { Data = ConnectionDirection.Input };
        connection.PositionCalculator = new OffsetPositionCalculator(1, 0.25);
        ConnectionPoints.Add(connection);
        var connection1 = new AGInputConnectionPoint(this, Edge.Right, 1) { Data = ConnectionDirection.Input };
        connection1.PositionCalculator = new OffsetPositionCalculator(1, 0.5);
        ConnectionPoints.Add(connection1);
        var connection2 = new AGInputConnectionPoint(this, Edge.Right, 2) { Data = ConnectionDirection.Input };
        connection2.PositionCalculator = new OffsetPositionCalculator(1, 0.75);
        ConnectionPoints.Add(connection2);
        //ConnectionPoints.Add(new FlowDiagramConnectionPoint(this, Edge.Bottom));
        var connection3 = new AGOutputConnectionPoint(this, Edge.Left, 0) { Data = ConnectionDirection.Output };
        connection3.PositionCalculator = new OffsetPositionCalculator(0, 0.25);
        ConnectionPoints.Add(connection3);
        var connection4 = new AGOutputConnectionPoint(this, Edge.Left, 1) { Data = ConnectionDirection.Output };
        connection4.PositionCalculator = new OffsetPositionCalculator(0, 0.5);
        ConnectionPoints.Add(connection4);
        var connection5 = new AGOutputConnectionPoint(this, Edge.Left, 2) { Data = ConnectionDirection.Output };
        connection5.PositionCalculator = new OffsetPositionCalculator(0, 0.75);
        ConnectionPoints.Add(connection5);

the problem i actually facing is 1. I can not instruct DiagramToolBox to load the ToolBoxGroups and Nodes into that group from some Database Source. 2. I can not instruct DiagramtoolBox to use Customized Geometery to show every customized Node into toolBox. 3. I can not Instruct DiagramFormatter.NodeStyleSelector to use custom style and DataTemplate from the database.

Infact i was thinking that there might by some way to instruct DiagramToolBox to load tool group and nodes from some database source. and there might be some way to instruct DiagramSurface to use Node display template from database. Abdul

Hello Abdul

To add the groups, you will need to create an instance of DiagramToolBoxGroup and add it to the Groups property of the DiagramToolBox. To add items to a group, you will need to create instances of DiagramNodeTool and add them to the ItemsSource property of the DiagramToolBoxGroup. Or the ItemsSource can be binding to a collection of model objects that contain the information of each node-tool to display.

For each DiagramNodeTool, set the Content property to be the visuals that you want to be displayed in the toolbox. In your case this would most likely be a Path object with its Data property binding to a property on a model object that you provide that contains the geometry information. This binding may need a custom converter if your geometry information is not directly compatible with the Path.Data property. You'd of course also want to set other properties on the Path to define the color and size. Then you'd do a similar thing to set the CursorVisual property of the node tool which defines what is displayed at the mouse pointer as you drag a node-tool onto the diagram.

For the nodes, you'd only want a single node style which also contains a Path object that binds to various properties on your node implementation to get the desired look. Then the DiagramFormatter.NodeStyleSelector could be a FixedStyleSelector that references that single node style. (Unless you have other types of nodes - in which case you'd need something like a TypeStyleSelector).

The WPF Diagrams tool does not contain methods or properties that interface it directly with a database. You will need the part of your application that loads the diagram to query the database and put all the required information into model classes that the node styles and tool box items can bind to.

You'll want to tackle this one little bit at a time. I'd recommend starting with getting the nodes on the diagram looking the way that you want, then work on the toolbox items next. Remember to have a look at some of the provided samples as they have lots of examples of how to create node styles.

Let me know if you have further questions.

-Jason Fauchelle

Thank you Jason! I have implemented it through code, as I am new to WPF, it will be a great help if you could please provide me a sample code/project.

Abdul

Hello Abdul

Implementing it in code is still fine. Getting this functionality to work in one way or another is certainly a good start! Using xaml to define the styles/templates and binding to the model is recommended though. All the samples provided with WPF Diagrams will be a good place for you to see the recommended way of creating node styles and to learn the basics of how to use bindings. Unfortunately I don't have much time to create a full sample specific to your application. But if you are able to send me what you have done so far, I'd be happy to help you get started with xaml styles/templates and data binding. If you prefer not to attach your code to a forum post, you can email it to jason@mindscape.co.nz

Let me know if you have more questions about WPF Diagrams.

-Jason Fauchelle