This thread looks to be a little on the old side and therefore may no longer be relevant. Please see if there is a newer thread on the subject and ensure you're using the most recent build of any software if your question regards a particular product.
This thread has been locked and is no longer accepting new posts, if you have a question regarding this topic please email us at support@mindscape.co.nz
|
Hello all, I have a jpg mockup for our diagram. There are several node types and each of these node type has own look and feel style. So, my question, could you give me a direction(best practise) how i can create fully custom Node figure and bind the custom class to it and display the data from that class inside the custom figure. For instance, Custom class has the following properties: Title, Discription, So I need to TextBlocks there... probably I need to use Styles + Data templates somehow... thanks in advance, Vlad. |
|
|
|
|
Hello Vlad The best way to make custom nodes is to extend the DiagramNode class. In the constructor you can set up the connection points - how many connection points to add to each side. Then you can add properties to your custom node class such as title and description. Then you create a custom style in a resource dictionary. The main thing you do in the style is use a setter to set the NodeTemplate property. This is a DataTemplate that defines the shape and color of the node and is where you can add the textblocks which bind to the appropriate properties on your custom node class. The default style takes care of adding the UI controls for creating connections from the connection points, rotating, moving and resizing the node. A good place to look for examples on implementing custom nodes is the ActivityDiagrams sample. Look at the FinalStateNode for example which is a very simple node implementation. You won't need to worry about the CanOriginateNewConnections property for now. In the constructor you can see a connection point is being added to each side of the node. You may want to use ConnectionPointDirection.Any. Then take a look in ActivityDiagramStyle at around line 36 to see the FinalStateNode style. Then, around line 130, all the node styles are wrapped up into a style selector. This is for the diagramSurface control to know which style to use for different node types. This style selector is used to set the NodeStyleSelector property of the DiagramFormatter on line 165. Then finally, this DiagramFormatter is used to set the Formatter property of the DiagramSurface. Here is a blog post that also describes how to make custom node styles. This is for existing node types not custom node types, but the principle is the same: http://www.mindscapehq.com/blog/index.php/2011/5/31/wpf-diagrams-2-0-custom-node-styles/ Try out these things and don't hesitate to ask me more questions about WPF diagrams. -Jason |
|
|
|
