Databound separators

Hi,

I’m building an application that uses the GoXAM Diagram.
I want to add separators between my nodees at certain positions. I found a sample (the Table Layout sample) where separators are handled in the code behind but this seems not the right way.

Is there a sample or at least some hints on how to integrate separators by only using data binding and templating/styling?

Thanks,
Lars

Are you sure that you want separators between nodes or do you want containers (boxes) around nodes? The latter is often achieved using Groups.

But if you really want separators, you could implement them using a different Link DataTemplate connecting Nodes that you want to separate. The key is to use LinkPanel.Implementation=“Fixed” instead of the normal “Path” where a LinkShape/Path follows the link route. For example:

<go:LinkPanel Implementation=“Fixed” go:Link.Selectable=“False”>

</go:LinkPanel>

Produces something like:

If you move one of the nodes it automatically maintains the separator at the midpoint:

Hi Walter,

maybe my description leaves out some details.

Here is a screenshot of what my diagram:

The data for this diagram is retrieved from a service layer. I do not have any specific code behind, it’s all done with pure Xaml and MVVM.

What I want to get is something like this:

As I right now get all the data from a service layer I thought it would be possible to let the service layer also return node data for the separators and let some styling/templating magic allow me to provide a template for the separators.

Until now I don’t see a way to achieve this but I’m also a GoXam rookie Wink.

Regarding your grouping advice: Do you mean that if I put the different nodes into different groups and provide a template for the groups I could get the desired visualization? What about the layouting routing when using groups. Will the groups change the way the routing is done right now?

Thanks in advance,
Lars

Sorry for misinterpreting. (On the other hand, the demonstration may become useful for someone else needing that kind of functionality.)
Yes, you do want separator objects, not groups.

For a rookie you’ve done pretty well. How did you implement those blue numbers along the left side? Did you use a different node template for them? I assume you used a DataTemplateDictionary as the Diagram.NodeTemplateDictionary.
I think you would want to do something very similar, where the template was just a long dashed red line.
<go:DataTemplateDictionary x:Key=“DTD”>
. . .



</go:DataTemplateDictionary>
(Pardon any typos or thinkos.)

You would have two node data objects with .Category=“Separator” and .Location being the Points halfway between numbers 5&6 and numbers 9&10.

Hi Walter,

a very, very big thank you for your support. Based on your proposal things are going fine. Here is a screenshot of the (intermediate) results:

Kind regards,
Lars

You’re welcome.

I forgot to add other (attached) properties that are commonly set on such “decorative” or “non-functional” objects:

go:Part.LayerName="Background"
go:Part.Selectable="False"
go:Part.LayoutId="None"
go:Part.InDocumentBounds="False"
go:Node.Avoidable="False"

You might not need to set some or all of these properties, depending on your app.

For example you might want to let users select those horizontal separator lines, or perhaps you have already disabled selection for the whole diagram or for the layer that they are in.

Or maybe there is no diagram layout, so you don’t need to tell the layouts that they should ignore those separator objects.

Or perhaps you want people to be able to scroll so they can see all of the separator lines, rather than just limiting the diagram bounds to the area covered by the “real” nodes and links and those numbers on the left side.

Or if there are no links that are “AvoidsNodes”, there is no need to set Avoidable=“False” to keep such links from crossing over those separator lines. (Apparently that is the case, so you don’t need to set this property.)