A tree-like, manipulable control for manifold hierarchical data

Question

Hi folks,

I am new to C# and WPF and I need to create a diagramming control similar to MS Visio but without direct user interaction. I have tree-like hierarchical data whose nodes can be of the same type. Quite like graphs whose vertices themselves contain graphs (i.e. vertices are subgraphs). I cannot use the Graph# library for several reasons.

The main requirements for my (customized) control are:

1. free moveable/draggable items (which represent hierarchical data)
2. items should have a box layout
3. items can be connected by arrows

Unfortunately, I don't know how to start. I tried several approaches like nesting ListBoxes but each approach had disadvantages. What do you think about nesting TreeViews and templating them? I need something like a Canvas container to freely position my items.

Do you have any suggestions? Thank you very much in advance.

Answer 1

If you need free movable/draggable items you probably need a degree of flexibility that built-in controls don't really provide. You're better off constructing your own controls, perhaps deriving from existing controls that provide close-enough functionality.

So for starters you'd have a control for a box item and a control for an arrow. The controls need to be movable and draggable inside a container, so you'll also need a container, probably derived from Canvas.

What I'd really recommend is to have a look at Model-View-ViewModel techniques; they can be daunting for a beginner but the benefits are immense. In this case, you'd have a collection of objects that represent your structure; all the objects will have, for starters, X and Y properties that define their coordinates. The objects are represented on the page by the previously mentioned controls, with bindings from their relevant properties to the properties of the objects. The objects are the ViewModel, and the controls represent the View.

Then, when you move the items with the mouse (the code for that is pretty easy), the properties of both the controls and the objects are automatically updated. More properties for the objects can include size, labels, and a collection of snap points that represent where arrows can connect to the object.

Arrows can be represented with the same concepts, except that instead of explicit X and Y coordinates they would have associated objects and snap points; then their coordinates would be automatically calculated based on the positions of the snap points.

Based on these structures, you can do actions exclusively from the ViewModel, like adding new items automatically connected to their parents, and have the view update based on that.

This is quite a broad topic so I really should stop now; I don't even what articles to recommend to get you started. Probably anything by Josh Smith on the topic of MVVM :P