This sample demonstrates how a diagram can be used to display a hierarchical organization. The organization information is contained in an XML file. In this demo the XML file is stored as a manifest resource -- of course you could acquire the XML data in some other manner.
The sample uses Linq for XML to read the XML and saves the information for each element in instances of the OrgMember sample class. That information includes the bitmap image of the national flag for each person. These image files are also stored as manifest resources and are converted to instances of BitmapSource for display by each node.
Note that besides the information about people in the organization, there is some document-level information stored on the root XML element. In this sample it is stored on the OrgChart UserControl as additional properties, which is used as the DataContext for the XAML that wants to present that information.
Each node is implemented by a NodeTemplate that uses a Grid to show text and an image of a flag. Because flags have different natural aspect ratios that we want to maintain while keeping a constant height, the Width is data-bound to the image using a special converter, ImageSizeConverter, that returns the desired width.
The initial scale and position of the diagram is specified by the InitialScale, InitialPanelSpot, and InitialDiagramBoundsSpot properties. The two ...Spot properties specify what point in the Diagram.Panel to position a point in the Panel.DiagramBounds. The diagram bounds is a Rect that describes the extent of the nodes and links.
This sample also demonstrates the use of the Overview control.
It it a diagram that shows the viewport of another Diagram within
that other diagram's model. The Overview needs to have a reference
to that other diagram as its Overview.Observed property.
That reference should be established after both the observed diagram and the observing
overview are initialized, so the myOverview.Observed = myDiagram
assignment is performed in a Loaded event handler.
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.