The EntityRelationship sample demonstrates more complicated nodes and links with labels at each end.

Each node is data bound to an instance of the sample's Entity class, and each link is data bound to an instance of the sample's Relationship class. The Entity data class, in turn, holds a list of the sample's Attribute class. These names and their properties were chosen for demonstration purposes only-- of course your own application will use differently named and defined classes.

Each node's DataTemplate includes a ListView (WPF) or DataGrid (Silverlight) that displays a list of the Entity data's list of Attributes. Because the node definition can be any XAML that you like, you can customize the contents of each node just as you would for any other XAML (WPF/Silverlight) presentation. In this sample, we chose to show a simple figure as an icon with each attribute. But you could include your own images and/or checkboxes or whatever XAML you like.

If your application supports the copying of nodes, your data needs to support copying too. In cases like this, the collection of Attributes does not want to be shared, so we have to override the Clone method to make sure the list is copied properly.

The DataTemplate for each link includes two TextBlocks that act as labels for the end of each link. We used the pre-defined Text property on GraphLinksModelLinkData to store the "from" string. We had to add another string property on Relationship, named ToText, to store the "to" string.

Another feature demonstrated by this sample is the ability to automatically increase or decrease the amount of information that is visible depending on the scale. This is implemented by a DiagramPanel.ViewportBoundsChanged event handler that looks at the DiagramPanel.Scale. If it is less than a certain number, it sets the Diagram.NodeTemplate and LinkTemplate to use much simpler DataTemplates. The result is that as the user zooms out or in again, the implementations of the nodes and links are completely replaced.

At the bottom of the sample a ListBox displays all of the nodes (entities). It also keeps in synch the Diagram.SelectedNode and the ListBox.SelectedItem. The way the code is organized also works when there are three or more controls displaying the selected data.

Because the Diagram.CenteredNodeData property is data-bound to the diagram's Diagram.SelectedNode.Data, as the user selects an entity, the corresponding Node is scrolled into view. Of course this has no effect if everything already fits in view due to Stretch="Uniform". But it can be very handy when the diagram is large.