Step 1: Hand draw version of the control and functionality definition

In order to create a visual control I think it is important to have an image where you can analyze the behavior, here is my first visualization for this control.

As you see it's not much impressive but good enough to analize behavior, from the image we can conclude and/or assume:

Conclusions

• Each box in the image will be called 'node'.
• Each node can have zero, one or more children.
• Each node must have a parent, except for the first at the top wich will be called 'root node'.
• There is a space between levels wich will be called vertical space ( simplified as vSpace ).
• There is a space between nodes wich will be called horizontal space ( simplified as hSpace ).
• There are many lines used to associate parent nodes with their children.

Assumptions

• Levels: we will apply the level concept to our model, assuming the root node as the first level (level) and its children as second level (level+1), the children of its children as third level (level + 2) and so on.

Now we need to think on what this control can do.

Behavior

• Create a node. Yes, the first thing we need is a node.
• Select a node, for this we need a 'selected' status.
• Update a node, a node must be selected before we update it.
• Delete a node. This will affect the node and its children and a node must be selected before we update it.
• Show data, meaning that the control should show us the data it has in a format we can storage, better yet if we can understand.
• Load data, meaning that the control should be able to load the data it gave us before.

The node will have the distribution shown in the image

A node is composed by the following visible elements:

• Picture
• Title
• Description

You may add more elements according to your needs.