Data Template for Flow Diagram Node

I have a simple flow diagram built. I see that I can set the Data property of each node to a text string and it is displayed on the diagram node. Fine.

Now what I want to do is define a data template that will contain an icon and a name. This will be displayed inside the flow diagram node.

From the custom data serialization example, I see how to do this using ShapeNode objects. What I want is to add the data template to each flow diagram node so that, for example, the icon/text combination is displayed within each type of flow diagram node. This seems not to be possible.

What I have discovered is that in order to specify a data template for a node, I need to specify a formatter. Thus I cannot simply override the data template for the flow diagram's gradient style formatter. Even then what happens is that my data template is only used for some node types...for example step nodes and not decision nodes. Why? Because the data template seems to only be applied to ShapeNode objects and the step node is derived from ShapeNode but the decision node is not. Why? Why? Why?

So what am I missing? Is it really the case that the only thing I can display for the interior of each flow diagram node is simple text? Does this really mean that if I want to have a custom interior for flow diagram shapes I have to start from scratch and build up a entire library of flow diagram shapes?

Bob Rundle

Hello Bob

You do not need to start from scratch to achieve this. Here are the steps to do this, most of which you would have done by following the CustomDataSerialization sample.

• Create a DataTemplate for the node content. In your case this will be an icon and a name.
• Create a FixedTemplateSelector and set the Template property to be the data template for the node content.
• Create a DiagramFormatter and set the NodeContentTemplateSelector to be the FixedTemplateSelector.

• Here is the step you may have missed - Set the NodeStyleSelector and ConnectionStyleSelector properties of the DiagramFormatter to be the selectors of a theme of your choice. For example, if you want to use the GradientStyle, your DiagramFormatter would look like this:

  <ms:DiagramFormatter x:Key="Formatter"
                       NodeContentTemplateSelector="{StaticResource NodeContentTempateSelector}"
                       NodeStyleSelector="{StaticResource {x:Static ms:GradientStyle.NodeStyleSelectorKey}}"
                       ConnectionStyleSelector="{StaticResource {x:Static ms:GradientStyle.ConnectionStyleSelectorKey}}"
                       />
  

• Last of all, set the Formatter property of the DiagramSurface to be that DiagramFormatter

Make sure you add ms:FlowDiagramStyles to the merged dictionaries of the windows resource dictionary so that the gradient style can be found.

If at some stage you are interested in using your own custom styles for the flow diagram nodes, e.g. you want different colors or shapes than the default ones we provide, then use the following code in each node style for displaying the content:

<ContentPresenter Content="{Binding}" ContentTemplateSelector="{Binding NodeContentTemplateSelector, RelativeSource={RelativeSource AncestorType={x:Type ms:DiagramNodeElement}}}" />

The reason why StepNode extends from ShapeNode is so that the single implementation of StepNode can be used for lots of different nodes with different shapes. The logic for Step nodes with different shapes are all the same. The ShapeNode provides a way for the nodes to have different shapes which is useful for step/processes where a different shape can be used for an Action or a Data-Lookup or a Document-Reference etc. The other flow diagram nodes - decision, start and end will only ever have a single shape, and also they have unique logic which is why they have their own implementations and don't extend ShapeNode.

I have also attached a sample that demonstrates how to provide a custom node content template for flow diagrams. To run the sample, make sure to include a reference to your copy of the Mindscape.WpfDiagramming.Foundation.dll and FlowDiagrams.dll.

Let me know if you have any other questions about WPF Diagrams.

Jason Fauchelle

Indeed. Well done. I see also I can define a data template for the connector in the same way. Bob Rundle

Ok, I have my data template defined the workflow node. It looks good in the step nodes, but for the decision node it is positioned at the top rather than in the vertical center. Not sure why this happens because simple text is centered...why not my data template?

            <DataTemplate x:Key="CollectionDataTemplate">
            <StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center">
                <StackPanel Orientation="Horizontal" VerticalAlignment="Center"  HorizontalAlignment="Center">
                    <Image Width="24" Height="24" Source="{Binding Path=Data.State, Converter={StaticResource WorkflowElementStateConverter}}" />
                    <TextBox Text="{Binding Path=Data.Description, UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Center" Margin="12,0,0,0" Background="Transparent" Foreground="White" BorderThickness="0" />
                </StackPanel>
                <ProgressBar Value="{Binding Path=Data.PercentComplete}" HorizontalAlignment="Stretch" Margin="5,5,5,5" Height="10" Foreground="Green"/>
            </StackPanel>
        </DataTemplate>

Hello Bob

I've tried your code in the sample I sent previously and it is correctly centering the data within the decision node. Setting the VerticalAlignment of the root of the DataTemplate like what you've done is how to do this, so I'm not sure why it is not working in your case. Could you send a repro project so I can look into it further?

Jason Fauchelle

Attached. BR

I've attached an image of what I'm seeing. It doesn't seem to match up with what you've described though unless I've misunderstood something. Try installing the latest nightly build: http://www.mindscapehq.com/products/wpfdiagrams/nightly-builds

Jason Fauchelle

This is the way it looks on mine. I'll try the daily build. BR

No help. Decision node still looks the same. BR

Nevermind...working now. Pfffft

Great to hear you got it working.