Vector images and performance

I have a set of images that I would like use for each node of my diagram. I have the images in two formats: pngs and xaml. My preference is to use the xaml because the images are treated as vector. When I do so they look great in the diagram. The problem is the diagram seems to take a big performance hit. Moving nodes around and zooming in and out are not very fluid. When I switch from using xaml images to pngs, the performance is great, but the images don’t look good when zoomed in very close.



Perhaps this is simply the expect result, but I was hoping for a suggestion to get better performance from using xaml vector images in the diagram. Walter, you always seem to have good ideas, perhaps you have a solution for this problem?

Well, you could swap them out for the other implementation when the scale changes to values that you decide upon.

The EntityRelationship sample demonstrates this. The normal node template includes an “expensive” data grid. When the scale becomes less than some value, it replaces the template with a really simple one.

This is basically the same thing that you do for the Overview diagram, except that one usually doesn’t bother changing the templates dynamically based on the DiagramPanel.Scale, because the scale is assumed to always be “small”.

Thanks for your response.



I wasn’t able to find the “EntityRelationship” sample in the demo program I have, but in all events I was able to use the code example from the GoXam documentation to implement your suggestion. The only problem is that when the DataTemplateDictionaries are swapped the diagram is redrawn in such a way that the placement of the nodes changes. I am using a Force Directed layout and am not feeding in any layout coordinates. It is common for the diagram to look different when I refresh. But it is not a nice user experience when the layout changes during zoom. Am I doing something wrong?

The EntityRelationship sample is abbreviated as “ER Diagram” in the demo’s list of samples. But the source files are still named “EntityRelationship.*”.

The layout is performed again when the LayoutManager realizes that all of the newly created Nodes don’t have locations.

I suggest that you do a two-way data-binding on the Node.Location, on the root element of the node DataTemplates:

go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}"

That way the Node.Location will persist in the data model, so that the re-created nodes will have the old values for the Node.Location.

Hmmm, if the nodes are noticeably different in size, it might also help to set:

go:Node.LocationSpot="Center"

I have two templates NodeTemplateVector (default) and NodeTemplatePng (for zoom out).



When I add the location binding that you recommended ONLY to the NodeTemplatePng and I zoom out of the diagram, the templates are swapped beautifully. When I zoom in, I get the jarring re-layout.



When I add the location binding that you recommended ONLY to the NodeTemplateVector, I always get the jarring re-layout whether zooming in or out.



When I add the location binding that you recommended to BOTH the NodeTemplatePng and NodeTemplateVector, all nodes pile up on each other in one stack.



What am I missing? As always, thank you for your help!!!

That’s odd, because the EntityRelationship sample definitely does the same two-way data-binding of Node.Location in both DataTemplates. So I can’t explain what’s happening in your case.

Exactly which version of GoXam are you using?

Do you have an Overview that is looking at the Diagram? If so, maybe you need to set Overview.UsesObservedTemplates to false and explicitly set Overview.NodeTemplate to a DataTemplate that just shows the appropriate PNG image.

You are correct. The Overview is the issue. When I remove it, everything renders perfectly. I am at a loss as to how to solve this.



Below is the code I using for the Overview. Perhaps you can see if I am doing something wrong.



(Side note: For some reason, I must use TemplateDictionaries rather than just Templates for Overview. When I use NodeTemplate and LinkTemplate properties, the parts in the Overview don’t render and instead I get ‘PartManager.PartBinding of Node to [Key of data]’. If I use TemplateDictionaries and just have the Default property of the dictionary point to the Template I want to use, the Overview parts render properly.)



<go:Overview x:Name=“myOverview” VerticalAlignment=“Top” HorizontalAlignment=“Left” Grid.Row=“0” Grid.Column=“0”

UsesObservedTemplates=“False”

NodeTemplateDictionary="{StaticResource OverviewNodeTemplates}"

LinkTemplateDictionary="{StaticResource OverviewLinkTemplates}"

Observed="{Binding ElementName=myDiagram}"/>

In version 1.1 there was a bug with Overview causing problems with animated layouts in the observed Diagram. I believe it was fixed in version 1.2.

I am using 1.2.5.4.

If you turn off animation in the Diagram by setting Diagram.LayoutManager.Animated = false, does everything work including the Overview?

Turning off animation fixes most issues. However, I am finding that when zooming way out of the diagram, the overview does not adjust properly.

Do you have any unbound nodes that don’t have a location? That would cause the LayoutManager to want to perform another layout, even when all of your regular nodes are data-bound to data with real values for Location.

You could try setting myDiagram.LayoutManager.Initial = LayoutInitial.None in a Diagram.InitialLayoutCompleted event handler. (If you did this before the model is loaded, it might never want to do any layout, which would cause the nodes not to have any location, which would result in no nodes seen in the view.)

I haven’t seen any problems with an Overview and with layout animation turned on.

I added a bunch of nodes to my diagram, and now I am having the same problem as before where there is a re-layout when I swap DataTemplates. I am going to email my project to info@nwoods.com. Perhaps having my example will help resolve any issues.

Hi Walter,



I wanted to follow up on two fronts.



First, did you receive the project I emailed you?



Second, I have found a couple situations where re-layout seems to happen when DataTemplates are swapped. One is that when the diagram is initially loaded and then I zoom out (triggering the DataTemplate swap), the diagram layout will change. After that, if I make no other changes it says pretty static through all zooming in and out. The other occurs when I move a node outside the “natural perimeter of the current layout” (I don’t know the right term, “viewport”?) and then zoom.



I hope my description is helpful.



As always, thanks for your assistance!!

No, I have not received it. We just changed mail systems, and I’m not sure who’s reading info@nwoods.com.

Try sending it to GoXam.

In general, yes, it’s supposed to consider performing a layout when templates have changed.