Using Default Node Styles in Custom Nodes

Hello.

I want to use default node's (StartNode,DecisionNode,EndNode etc.) styles, maybe change them a little, on my custom nodes visualization. I have my own node hierarchy, so i don't want to inherit my nodes from them, i just want to use styles. Is there a way to do this?

Also if i want to use default nodes seperated from my hierarchy, how can i edit their visual properties?

Thanks for your help.

Hello and thanks for the feedback. We will get back to you very shortly.

Jason Fauchelle

Hello

To do this, you can specify your own node styles. These can be modified versions of the default ones we provide. You can check out this blog post for information about how to create and apply custom node styles: http://www.mindscapehq.com/blog/index.php/2011/5/31/wpf-diagrams-2-0-custom-node-styles/

In a nutshell, you start by making a Style where the target type is our DiagramNodeElement class. Next, use a Setter to set the NodeTemplate property. This is a data template that defines the shape and layout of the node. In most of the default styles, this is simply a colored path with a text box in the middle. You could have multiple paths and various controls to display values from additional properties on your custom node that this style is going to be applied to. The data context of the data template is your node model object. Once you have a node style for each of your different node types, you next need to create a node style selector. This is basically a mapping that defines which style will be applied to which type of node model. This is demonstrated near the end of the blog post. You then use this node style selector to set the NodeStyleSelector property of the diagram formatter. You can check out the CustomStyle.FlowDiagrams sample that comes with WPF Diagrams for examples of how to do all this.

If you want to use the default styles we provide directly, then while you're setting up the node-style-selector map, you can set the style using one of the resource keys like this:

<ms:ShapeNodeStyleSelector x:Key="NodeStyleSelector">
  <ms:TypeStyle DataType="local:MyStartNode" Style="{StaticResource {x:Static styles:GradientStyle.StartNodeStyleKey}}" />
</ms:ShapeNodeStyleSelector>

Where styles is Mindscape.WpfDiagramming.FlowDiagrams.Styles namespace which contains the default flow diagram node styles. Though if you need to make changes to the default styles, it's best to copy the default styles and modify them rather than importing them directly like this. The default styles are very simple which you'll see soon.

UI controls such a connection-points, the rotate thumb and resize thumbs don't need to be touched when styling a node because these are provided to all nodes through the base style. If you needed to customize these, you would apply the custom styles by setting the Template property of a node style. Let me know if you need to modify the styles of the UI controls attached to the nodes.

I have attached a text file that contains the xaml code for the default flow diagram node styles that have the nice gradient brushes. This will give you a starting point for creating node styles to apply to your custom nodes. Most of the node styles here use the PathShapeStyle which contains common Path property settings. As you can see, the styles are very basic. Altogether there are only 4 styles. There is the StartNode, DecisionNode and EndNode. The remaining type of node - StepNode extends the ShapeNode class. This allows it's shape to be specified using a 'dynamic enum' which causes its NodeTemplate to be created automagically. This is why it's NodeTemplate is the most simple.

The same technique of creating a custom style and adding it to the NodeStyleSelector map can be used to customize the look of the default nodes that we provide.

Please let us know if you have any questions about any of this.

Jason Fauchelle