This sample demonstrates how a diagram can be used to display and edit a hierarchical organization. 

The sample uses Linq for XML to read the XML and saves the information for each element in instances of the Employee sample class.  The node DataTemplate displays several TextBlocks that are data-bound to properties on the Employee class: Name, Title, Key, ParentKey, Comment.

Once a node is selected, clicking on the name, the title, or the comment text starts in-place editing of the text using a TextBox, dynamically created by the TextEditingTool. When the user hits Enter or Tab or when they click elsewhere to accept any text changes, the TextEditingTool will set the original TextBlock's Text property to the new string. Because the data-bindings of the Name, Title, and Comment properties are TwoWay, this will also automatically update the properties on the corresponding Employee.

The user can easily create a new node connected to an existing node by double-clicking on a node. The Node_MouseLeftButtonDown method is called on each mouse down, but if it's a double-click, the method traverses up the visual tree from the sender to find the clicked Node. Note that other mouse-down operations, such as selecting or dragging, do not need to be implemented by an event handler on the node, because they are implemented by the Diagram's mouse tools.

It can then create a new Employee data object and initialize it. Note in particular that it sets the ParentKey property to connect the new node to the existing node as the "parent" -- i.e. the boss/supervisor. It also does an initial positioning of the new node, just below the existing node. A tree layout will occur automatically to position it correctly, and to adjust the positions of all of the other nodes, which might have to move.

All of these model modifications occur within a model transaction. Whenever you change a diagram, you should try to do so by changing the model, and you should make changes to a model within a transaction.

The user can also restructure the organization by dragging a node onto another node. This is achieved by setting go:Part.DropOntoBehavior="AddsLinkFromNode". Furthermore, you can provide visual feedback that such drop-onto behavior may occur by changing the appearance of the node based on the Part.IsDropOntoAccepted dependency property. In this sample the Background is bound to either a white brush or a red one via a BooleanBrushConverter.

The diagram uses a TreeLayout to achieve the automatic positioning of the nodes.  The Angle attribute represents the direction in which the tree will grow; a value of 90 degrees causes the tree to grow downwards. However the TreeLayout.TreeStyle is set to "LastParents", which causes a different kind of tree layout to occur for those nodes (employees) that have tree children (other employees that report to them) that are not parents (bosses or supervisors) themselves.

For those "LastParent" nodes, the tree layout will use the parameters given by the TreeLayout.AlternateDefaults property. The angle is zero (rightwards) instead of 90 (downwards), and links go from the BottomCenter of parent nodes to the MiddleLeft of the child nodes, instead of to the TopCenter.