Over the last couple of days I was working on an internal demo and one of the controls I built for that was a SpiderWebControl. It is a Silverlight 4 custom control that allows you to draw a network graph. A quick run down of the features is given below:

• Adding, removing, renaming of nodes
• Dragging of nodes
• CTRL + Drag to drag a subtree/branch
• CTRL + Drag on the canvas to pan around
• Selections and hovers using VSM
• Simple automatic layout with animations

The following video shows the control in action

Design choices

There were a few design decisions made while building this control that are worth highlighting:

1. The top level control is called the SpiderWebControl and each node within that control is an instance of the SpiderWebItem. Ideally I would have derived SpiderWebControl from ItemsControl if not for the extra level of control that I wanted for adding items to the ItemsPanel.

2. The node elements (boxes) and the connecting elements (lines) are inside two separate containers. The container that contains the boxes is overlaid on top of the container for lines. This achieves a nice effect of lines that seem to start from the edge of the box. Here you can see the connecting line and the box in different configurations

   

3. There is a private DependencyProperty on the SpiderWebItem called LinkedConnectorProperty. This is used to store the connector (Line) instance.

4. The SpiderWebControl makes use of the HierarchicalDataTemplate from the Silverlight Toolkit to expand nested levels (sub-branches)

Sidebar

Some of the ideas in the above list are discussed in more detail in my book “WPF Control Development Unleashed”.

Although the concepts are WPF specific, the ideas apply equally well to Silverlight.

Demo and code

I am sure you will agree that this post would be incomplete without a real demo and source code :-)

Download Source code