This diagram demonstrates the expanding/collapsing subgraphs where members of each subgraph are only created "on-demand", when the user clicks on the "expand" Button.

As you expand the tree, it automatically performs an animated force-directed layout and layered-digraph layouts within subgraphs. Remember that you can use control-mouse-wheel to zoom out and zoom into the diagram.

The data for each node is implemented by the SimpleData class. It defines an EverExpanded property that indicates whether we have already created all of its "member" data and added them to the model. The EverExpanded property defaults to false, to match the initial value of go:Node.IsSubGraphExpanded="False" in the node DataTemplate, which specifies that the subgraphs start collapsed.

When the user clicks on the "expand" Button, the button click event handler finds the corresponding SimpleData by going up the visual tree to find the Node and then getting its Data. If SimpleData.EverExpanded is false, the code creates a random number of SimpleData children for that node, including some that are subgraphs, each with a random Color property. The code also connects each node with another node by adding the "to" node key to the "from" node's ToKeys list. Then the button click event handler changes the value of Node.IsExpandedSubGraph, thereby expanding or collapsing the subgraph.

Some subgraphs result in there being no members at all. In this case the Button is made invisible.

All changes are performed within a transaction. You should always surround your code with StartTransaction and CommitTransaction.

The diagram's Diagram.Layout is an instance of ForceDirectedLayout. The standard conditions under which the layout will be performed include when nodes or links or group-memberships are added or removed from the model. This particular ForceDirectedLayout also includes the condition that changing the size of any group will cause another layout. In this case that means that when the user expands or collapses a node, another layout occurs again.

Each subgraph has its own LayeredDigraphLayout that positions its member nodes and routes its member links. It too is set to perform a layout whenever a member subgraph changes size.