This sample creates state charts. The text is editable for both the nodes and the links. The user can draw multiple links from one node to another one, and they can draw reflexive links. Links can be reconnected as well as deleted.

Nodes that are selected change their appearance in two different ways. First, the edge of the node changes color from Black to Blue. This is implemented by binding the Stroke property of the node shape to the IsSelected property of the part. That binding uses a BooleanBrushConverter that returns either a Black or a Blue brush.

Second, this sample customizes the SelectionAdornmentTemplate of the node to a template that basically contains just a Button. The button is positioned to be at the TopRight corner of the node by being in a SpotPanel with a SpotPanel.Spot attached property set to TopRight. The SpotPanel.Alignment attached property says that the Center of the button should be position at the TopRight spot of the node.

The Button_Click method finds the Node that the Button was adorning by first finding the button's grandparent Adornment. The Adornment.AdoredPart property will return the Node, from which we can get the data to which the node was data-bound.

Then the code creates a new node data, an instance of State, adds it to the model, and creates a link from the original node data to the new node data. All of this is done inside a model transaction.

The Diagram also has a customized ClickCreatingTool that implements the functionality associated with double-clicking in the background to create a new node.

Saving the diagram to XML also saves the points of each Link.Route. When loading the link route points, it does not set the Route.Points right away. Instead it waits until a Diagram.LayoutCompleted event occurs, at which time it restores the Route.Points from the Transition link data. To avoid doing this repeatedly, the app only adds the LayoutCompleted event handler when loading, and the event handler removes itself when it executes.