Diagram 2.0 Node Style structures

Hi, just want to get the information easier without digging too much into different examples. 

Can you explain the structures in the new Diagram 2.0 Node Styles, because it seems like the NodeTemplate had been moved into NodeStyle, so the TemplateSelector is no longer being used. I guess it applies to the ConnectionTemplate as well. I am not sure why is this, but I would like to know in the new Diagram2.0, how easy is it to reuse the same NodeTemplate or ConnectionTemplate across different node type.

Let me point out what I see and understand so far, and also my questions:

1. In the DiagramFormatter, "NodeTemplateSelector" had been removed, as well as "ConnectionTemplateSelector". Are they actually the same for "NodeContentTemplateSelector" / "ConnectionPointTemplateSelector"?

2. What's the difference between "ConnectionContentTemplateSelector" and "ConnectionPointTemplateSelector"?

3. What's the difference between <MatchingStyleSelector> and <TypeStyleSelector>?

4. Considering we have multiple custom node type that we implemented inheriting "DiagramNode", although they are visually different types, but they are actually having the same "Node structure", for eg: if we don't allow resizing, probably we'll remove the "resizer" from the Node style. And, in terms of reusing, and optimization, is it we should always reuse the same Node Style, but changing the NodeTemplate for different node types?

5. Probably I should ask this first: "ConnectionPointThumb" actually refers to the style of the "mover" for the ConnectionPoint itself? So, if we're not intended to let user move the connectionPoints, this is not needed at all?

6. Considering about reusing and try to trim down as much as duplicate styles we have, I have a problem on the ConnectionPoint styles though. For eg: We have NodeA and NodeB, both should have different visual styles when the mouse is hovering, clicking, or dragging on the ConnectionPoint. It is also depending on which Edge the ConnectionPoint is, the visual style is different. However, they are actually having the same "Node structure", which means they won't have "Resizer", won't have "MoveThumb", and so on. How can I implement different ConnectionPoint styles based on that same Node style? Or we should simply duplicate the Node style and change the <ItemsControl> 's "ConnectionPointThumbTemplate" accordingly?

7. The ds.FormatAllConnectionElements() is no longer there, should I still need to call this whenever I rearrange my node through codes?

Hello

Indeed NodeTemplateSelector and ConnectionTemplateSelector has been removed. Using the style selectors can now achieve the same effect by setting the NodeTemplate property.

Originally customizing a node style could consist of up to 3 different parts. The NodeTemplate (shape & color), the ConnectionPointCalculatorSelector, and the NodeStyle (fine styling details such as for UI controls). The ConnectionPointCalculatorSelector in particular starts to get rather messy when there are a large number of nodes with lots of connection points. Each node-type/edge/ID/calculator needed to be mapped in the calculator selector. This issue was present when I created the 70+ built in shapes for diagrams 2.0. I figured it was uneccessary for the calculators to be defined seperatly to the node styles/templates. So an easier way of doing this was to create a property on DiagramNodeElement called ConnectionPointPositions. Now you can simply set this property using a Setter on a node style for a particular type of node. Now since it is required to utilize the NodeStyleSelector for setting calculators, it made sense to bring the NodeTemplate into the style as a simple property setter as well. Now all customizable asspects of a particular node type can be done in one place rather than being spread across 3 different sections.

To answer you first enquiry, you can reuse the same NodeTemplate across different node types by creating a DataTemplate in the resource dictionary and give it a resource key. Then for the styles of the different nodes, you can set the NodeTemplate property using a StaticResource that gets the same template. Also, if the different node types share the same style, you would be able to have a single style that is applied to all those node types.

1/2. NodeContentTemplateSelector and ConnectionContentTemplateSelector still function the same way as they did in Diagrams 1.0. These are for customizing the way that data is displayed within nodes or connections. Say for example you have lots of different types of nodes, and lots of different types of data that can be displayed by those nodes. But any particular node type doesn't always hold a particular data type. Some times nodes may hold a string, which you want to be displayed in a textbox. But sometimes maybe your data is a collection, so you can provide a template that shows the collection in a ListBox etc.

ConnectionPointTemplateSelector is for customizing the connection point thumbs. (the thumbs that appear when you hover the mouse over a node, and then drag them to create a connection). This selector is so you can create different implementations of IDiagramConnectionPoint and have them look different to each other. Say for example you create an "inbound only" connection point type and an "outbound only" connection point type which you want to template differently. Take a look at the ConnectionPointValidation.FlowDiagrams sample which has an example of using a connection point template selector. This example selects different templates for a single connection point implementation, but uses the contents of the Data property to choose different templates.

3. TypeStyleSelector is for mapping a Type to a Style. When it needs to select a style for an object, it looks at the Type of that object and returns whatever Style is mapped to it. The MatchingStyleSelector is for selecting a Style based on custom selection logic. You can implement the IStyleMatcher interface to create custom criterion for selecting a style based on the given object. The ConnectionPointValidation.FlowDiagrams sample has an example of using a MatchingTemplateSelector which works in a similar way, but for templates instead of styles. The custom criterion logic is found in the ConnectionPointTemplateMatcher class.

4. Yes, if you have several node types that have the same node structure, then they can reuse the same node structure parts, but can have different node templates. One way to do this is make a ControlTemplate resource that has all the node structure bits. Each node would have a different style which set their own NodeTemplate properties. Then the Template property on all of them can be set to be that same ControlTemplate resource. Or you can create a common style that sets the Template property with all the node structure components. Then the individual node styles can be BasedOn the common node style.

5. ConnectionPointThumbs are the UI controls that appear when you hover the mouse over a node and then drag on them to create a connection. You will probably still need these. Are you talking about the ConnectionPointRelocatorThumb? These appear when you hover the mouse over a connection and drag them to relocate the end of the connection to a different connection point. The generic style for these is called "ConnectionMover" They are set up in the connection style. If you don't need relocation then you can remove these if you want.

6. I'm not sure I fully understand the extent of what you need here. A repro or some images may help. Note again that you can customize the appearance of connection point thumbs using the ConnectionPointTemplateSelector. Though I'm not sure if this will support all the behaviour you're looking for.

7. Diagrams 2.0 has much better support for automatically updating connection paths when the nodes are rearranged. Whenever you move the nodes in code, the diagram model will take care of updating the connections that need to be updated.

Let us know if you need more information about any of this
 - Jason

Thanks, Jason, you really help me alot in understanding the Diagram nodes structure. Appreciate that. ;) I think I got most of them.

1. I found that the "ItemsControl" in the Node style is actually for all the ConnectionPoints. If I have NodeTypeA, NodeTypeB, having same node structure, but different ConnectionPoints visual display, I can no longer use the same ControlTemplate resource right? (As suggested from your 4.) Since I need to implement different ItemTemplate for the ItemsControl.

Do enlighten me what's the best way to implement it.

2. While I was re-templating the ConnectionPointsThumb, I found that I need a way to set the z-ordering of the ConnectionPoints. In my case: I have way too much ConnectionPoints in 1 edge, for eg: Right edge. I wanted to evenly distribute the space between them, but when the points are too much, every points will get overlapped on each other. In this specific case, How can I make the "hovered" point to always shown on top most when the mouse is hovering on it?

Hello

1. I think you can still use the same ControlTemplate resource in this scenario. Just to clarify, NodeTypeA and NodeTypeB will have the same node structure, but their connection point thumbs will be styled differently?

The ItemTemplate property on that ItemsControl is simply being set to a DataTemplate that only contains a ConnectionPointThumb. The ConnectionPointThumb generic style is then automatically applied to this thumb. Within the generic ConnectionPointThumb style is a ContentPresenter. This content presenter displays the actual graphic of the thumb. This is similar to how the node style displays the NodeTemplate inside a ContentPresenter. So if the connection points in NodeTypeA and NodeTypeB are only different because of what they look like (color, shape, mouse-over-color etc), then you can use the ConnectionPointTemplateSelector property on the DiagramFormatter to change the thumb appearances. Take a look at the ConnectionPointValidation.FlowDiagrams example if you need to see how this can be done.

2. Unfortunatly I have not been able to work out how to do this.

Hi, 

1. Yes, I need NodeTypeA and NodeTypeB to be having same node structure, but connection point thumbs being styled differently.

To be exact, not only the color, shape and mouse-over colors, but also the positions of the points on different edge. NodeTypeA will have bottom edge point at position x, but NodeTypeB will have bottom edge point at position x+2, for eg. Is this still feasible using the ConnectionPointTemplateSelector?

2. Sad case for me. Let me know if you can think of any workaround for it. 

Thanks. 

Hello

The positions of the connection points will not be an issue with reusing the ControlTemplate resource. Connection point positions can be defined by setting the ConnectionPointPositions property on the DiagramNodeElement. This is done using a Setter on the node style. Some examples for setting this can be found in the ActivityDiagramStyle.xaml file of the ActivityDiagrams sample project.