DiagramToolBox is needed for CustomDataSerialization example

Hi,

How I add the toolbox to the 'Custom node data' example (project name : CustomDataSerialization) ?

I want drag & drop use and feel for the custom nodes like the other samples ,

I tried to play with it , but no success .

Thanks.

Hello Zakos

To add a toolbox to this sample like in the other samples, you can simply paste this code between the stack panel and the diagram surface in MainWindow.xaml.

<ms:DiagramToolBox DockPanel.Dock="Left" Width="260">
  <ms:DiagramToolBoxGroup Header="Rectangles">
    <ms:DiagramNodeTool ms:ShapeTool.Shape="Rectangle" />
    <ms:DiagramNodeTool ms:ShapeTool.Shape="RoundedRectangle" />
    <ms:DiagramNodeTool ms:ShapeTool.Shape="SnipSingleCornerRectangle" />
    <ms:DiagramNodeTool ms:ShapeTool.Shape="SnipSameSideCornerRectangle" />
    <ms:DiagramNodeTool ms:ShapeTool.Shape="SnipDiagonalCornerRectangle" />
    <ms:DiagramNodeTool ms:ShapeTool.Shape="SnipAndRoundSingleCornerRectangle" />
    <ms:DiagramNodeTool ms:ShapeTool.Shape="RoundSingleCornerRectangle" />
    <ms:DiagramNodeTool ms:ShapeTool.Shape="RoundSameSideCornerRectangle" />
    <ms:DiagramNodeTool ms:ShapeTool.Shape="RoundDiagonalCornerRectangle" />
    <StaticResource ResourceKey="{x:Static ms:DiagramShapes.TitleNodeToolKey}" />
    <StaticResource ResourceKey="{x:Static ms:DiagramShapes.CommentNodeToolKey}" />
  </ms:DiagramToolBoxGroup>
</ms:DiagramToolBox>

If you are looking to add custom node types to the toolbox, then you'll want to view the CustomNodeType.FlowDiagrams sample. Let me know if you have more questions.

Jason Fauchelle

Hi ,

Thanks for the reply ,

CustomNodeType.FlowDiagrams sample is nice, I have only 1 problem , How can I make it like a tree? meaning , I can

connect from my custom node to 'unlimited' other custom nodes , not just 'up down left right' connectors

, unlimited 'down' would be prefect.

About CustomDataSerialization sample , can't I make toolbox from the 3 custom nodes there? ( with the tree feature too)

Thanks again.

Hello Zakos

I have attached a sample that demonstrates one way to implement a tree like diagram. To run the sample, make sure to include a reference to your copy of the Mindscape.WpfDiagramming.Foundation.dll. When you run the sample, drag a few nodes from the toolbox onto the diagram. There is only one type of node which represents a node in the tree. If you hover over a node, you will see a connection point appear in the middle, drag this connection point to start making a connection and hover the mouse over another node. You will see a connection point appear on the top of this node which you can drop the connection on. If you hover the mouse back over the first node, the connection point in the center will appear again. Drag this connection point to another node to make another connection. You will see the first node will add new connection points to the bottom edge when necessary, and will evenly distribute them along the bottom edge. The model for this tree diagram also include logic to prevent the user from making cycles and loops in the diagram - like a true tree structure.

So let's see how this is implemented. In the Model folder there is a custom connection and node implementation. The connection implementation simply provides a constructor (since the base class doesn't have a default constructor), and overrides some properties to say that connections can't directly connect to other connections. In the constructor of the TreeDiagramNode, we add an outbound connection point (the one that appears in the middle and allows you to start making a connection), and an inbound connection point (the one that appears at the top of a node to complete a connection). Next we have a public AddConnectionPoint method. This gets called later whenever a new connection is being created. This adds another connection point to the node along the bottom edge. This method also calls the private UpdateConnectionPointCalculators method. This is how all the connection points along the bottom edge are evenly spaced. Since adding a new connection point will require all connection point positions to be updated, we iterate through all the existing connection points along the bottom edge. Note that the for loop starts from i = 2. This is to skip the 2 connection points added in the constructor. Keep this in mind if you make changes to the connection point system implemented in this sample. Rather than directly setting the position of the connection points, we provide a connection-point-calculator system. This lets you specify relative positions of the connection points based on the bounds of the node. This means if the node is resized, the connection points are still well positioned. The sample also uses a custom TreeDiagramConnectionPoint implementation. Similar to the connection implementation, this overrides some properties to prevent the user from creating cycles or loops in the tree structure.

Next are the builder implementations. By implementing node/connection builders in your application, you can provide custom "construct" and "Can Construct" logic. The node builder simply builds a new instance of a TreeDiagramNode, sets the position, and adds it to the diagram model. An instance of this builder is given to the toolbox item so that when you drag it to the diagram, it knows what node to build. The TreeDiagramConnectionBuilder is where the connection point magic happens. Whenever the user creates a new connection, the CreateConnection method is called. Using the parameters, we can get the node that the user started the connection from. Then we call the AddConnectionPoint method I mentioned earlier which adds a new connection point to the bottom edge of the node. Then rather than using the given connection point as the source of the new connection, we use the connection point that was just added to the bottom edge of the node. IMPORTANT: In order to actually use the custom connection builder, don't forget to set the DefaultConnectionBuilder property of the diagram model. You can see this in MainWindow.xaml.cs.

The user interactivity of this sample may be different to what you have in mind, but it will give you a place to start. You may also need to consider the logic of deleting connections which will then need to delete the appropriate connection point from the bottom edge and update the connection point calculators. I haven't implement this functionality in the attached sample.

As for the custom node tool box items for the CustomDataSerialization sample, the nodes in that sample aren't actually custom node implementations. They are all just normal ShapeNode objects provided by the diagramming foundation. Their Data property is being set to different types of data objects (an enum, a plain old C# object, and a collection). Then a content template selector selects a different template used to display the data for each node (A ComboBox, a few TextBoxes, and a ListBox). Mind you, it is still possible to create tool box items for these. The first step would be to make 3 different node builder implementations. These would all create the same type of ShapeNode, but would set the Data property to some default value. Each builder would set the data to a different type of object like in the CustomDataSerialization demo. Then you add a DiagramNodeTool that uses the appropriate builder, just like what is seen in MainWindow.xaml of the CustomNodeType.FlowDiagrams sample. You'll of course still need the data content template selectors from the CustomDataSerialization sample to display the data correctly.

Let me know if you have any questions about any of this.

Jason Fauchelle

1 ) WoW - Thanks for the hard effort .

2) I can't run the example

Exception occurred creating type 'Mindscape.WpfDiagramming.DiagramSurface, Mindscape.WpfDiagramming.Foundation, Version=2.0.574.17118, Culture=neutral, PublicKeyToken=c2e9c4ef235fd77f' System.ComponentModel.LicenseException: No License Installed C:\Users\xxx\Desktop\TreeDiagramExperiment\Properties\licenses.licx 1 TreeDiagramExperiment

3) Quick question : Change from a tree to a graph (meaning a leaf can go back to root or something), is this needed a big change?

4) I'll play and dive deeper with all this and ask your help for a problems.

Thanks again!

Hello Zakos

For licensing problems, you can read this quick FAQ: http://www.mindscapehq.com/forums/thread/1309. Although this is related to our WpfPropertyGrid, the same techniques apply to WPF Diagrams. The most likely cause is that your missing the .lic file. Find the .lic file that was installed with WPF Diagrams. It will be in the Bin folder - same place as the dlls. If you've copied the dll to your own Lib folder or the like, make sure you also copy the .lic file and include it in the same folder as the dll you are referencing in the project.

In the sample I sent you, changing from a tree structure to a graph structure is very simple. Go to the TreeDiagramConnectionPoint class. There are 2 overriding properties here that define the connectivity logic of the overall diagram. The last property in this class (CanReceiveNewConnections) states that a connection point can only receive incoming connections if it currently has no connections on it already. Once a connection has been made to the top of a node, it will no longer accept more connections. In other words, a node can only have one parent. If you simply delete this property, this constraint will be removed allowing your diagrams to have loops and cycles.

The CanOriginateNewConnections property has the same logic. If you recall, in the sample I sent you, users can create connections by dragging from the center connection point. But the connection is not actually originated from this point, it is given a new point that was dynamically added to the bottom edge. This CanOriginateNewConnections override prevents you from creating connections from these dynamically created points. So for the purposes of this sample, you wouldn't want to remove the CanOriginateNewConnections property.

Regards

Jason Fauchelle