New features in XamNetworkNode

The 2011.2 release introduced a number of new features for the XamNetworkNode. The work we have done now makes it easier to use, scalable and more flexible.

Lets take a look at the improvements in the Navigation first. In the old version the only way to navigate was by using the arrow keys or mouse dragging to pan the network node and by using the CTRL+”+”/”-” or the mouse wheel to zoom in and out. Now you can do that also programmatically. You can allow or disable pan or zoom, you can limit the zoom levels and you can set the current zoom level. There are a few useful methods that allow you to Scale to Fit, Zoom to 100%, to ZoomIn, to ZoomOut. You can get more details on those here – in the documentation for the control. If you are feeling really adventurous you can play with the WorldRect and WindowRect properties of the XamNetworkNode. Those Rects control the exact area that is visible on the screen and the position of the nodes in that area.

The next big addition in the XamNetworkNode is the ability to customize the relationship between nodes. You can now control the size, shape and stile of the icons that mark beginning, end and connection of a relationship between two nodes. You can set those customizations on a global level or a per connection level.

Again, you can read more on this in the documentation. In addition to those settings you can find a property called DefineConnectionCallback in the XamNetworkNode (if you use it here it will have global effect) or in the instance of a specific connection from the Connections collection of the XamNetworkNode (if you want to do a connection specific setting). This property can be set to a method that returns a Path object. This is how you can modify the form of the connection. It will no longer be a straight line, but it will have the Path you have returned in the callback.

Sometimes you don’t want to modify how a specific connection look, but you want to hide it all together. In the last release the only way to remove an item was to modify the source. The 11.2 however provides a more elaborate mechanism to hide and delete elements. You can read more about it here. If your data is in the form of a tree and you want to do more than just removing one specific node, for example collapsing a whole tree of nodes under a specific one you can take advantage of the hide/show nodes feature. It is explained extensively in this article.

When you remove items or just show/hide nodes you should have in mind the following limitations. If your data is representing a graph and you remove an item that breaks the connection between two segments of the data, the two areas will look like separate network nodes after the deletion. Use this sample to experiment with the feature. If you remove the central “Widget Corp” node all the rest of the nodes will become free electrons (they will not be connected with one another). On the other hand if you are not deleting, but just hiding nodes you need to be aware that if the nodes under the one you have collapsed only if they are not referenced from somewhere out of the collapsed region. If you have a graph with multiple connections this might be a common scenario. If you have tree like connections you will not encounter this issue.

The next big new feature that the XamNetworkNode got with the 11.2 release is the introduction of VisualStates on the nodes. Now you can create styling and behavior based on the following states: Normal/Disabled, Focused/Unfocused, Selected/Unselected, Editing/NotEditing. Here is an article that explains the feature in more detail and a sample that’s shows how to use this feature in code and allows you to experiment with the behavior. Have in mind that the Editing/NotEditing state by default does not give you much more than just a state, very similar to the other states. However it would be convenient for you to implement a editable text box in the editing state and a display control in the not editing state without interfering with the other states.

The last two features I would like to mention are zoom to node and searching for nodes. First we’ll take a look at the zoom to node, or move node within view (its effectively the same feature). This article explains it in detail, but if we had to summarize it in a few words, you can use the WindowRect property of the XamNetworkNode and the coordinates of the node in question to move the visible area and set the zoom level in such a way to display your node in a visible and appropriate manner. That is if the panning and zooming features are enabled. Second you can search for nodes and automatically bring them into view using a similar approach. The logic behind this is explained here. And you can see it in action here.

I hope this has been informative and useful. Have a great day!