WPF Diagram Control - Microsoft Automatic Graph Layout (MSAGL) Algorithms

This example integrates Microsoft Automatic Graph Layout (MSAGL) algorithms with the WPF DiagramControl. The workflow extracts a graph from the diagram, processes it with an MSAGL algorithm, and applies calculated node positions to diagram items.

Implementation Details

Extract the Graph

Use the GraphOperations.GetDiagramGraph method to extract the current diagram. The method returns a Graph object that contains the collections of nodes and edges represented by diagram items:

GraphOperations.GetDiagramGraph(diagramControl);

Calculate Position Information

For each shape, calculate diagram shape coordinates and store them in PositionInfo objects:

layout.RelayoutGraphNodesPosition(GraphOperations.GetDiagramGraph(diagramControl));

public virtual IEnumerable<PositionInfo<IDiagramItem>> RelayoutGraphNodesPosition(Graph<IDiagramItem> graph) {
    GeometryGraph = MsaglGeometryGraphHelpers.CreateGeometryGraph(graph);
    LayoutCalculator.CalculateLayout(GeometryGraph);
    return MsaglGeometryGraphHelpers.GetGetNodesPositionInfo(GeometryGraph);
}

Apply Layout

Update the diagram with calculated node positions:

diagramControl.RelayoutDiagramItems(
    layout.RelayoutGraphNodesPosition(GraphOperations.GetDiagramGraph(diagramControl))
);

Update Shape Connectors

After shapes are repositioned, reroute shape connectors and register a routing strategy:

diagramControl.Items.OfType<IDiagramConnector>().ForEach(connector => {
    connector.Type = layout.GetDiagramConnectorType();
    connector.UpdateRoute();
});

diagramControl.Controller.RegisterRoutingStrategy(
    layout.GetDiagramConnectorType(), 
    layout.GetDiagramRoutingStrategy()
);

Display Entire Diagram

Fit the view so that all items are visible in the viewport:

diagramControl.FitToDrawing();

Ribbon commands

Create ribbon items and handle their ItemClick events to apply different MSAGL algorithms:

void ApplySugiyama(object s, ItemClickEventArgs e) {
    ApplyLayout(new GraphLayout(new SugiyamaLayoutCalculator()));
}
void ApplyRanking(object s, ItemClickEventArgs e) {
    ApplyLayout(new GraphLayout(new RankingLayoutCalculator()));
}
void ApplyPhyloTree(object s, ItemClickEventArgs e) {
    ApplyLayout(new PhyloTreeLayout(new PhyloTreeLayoutCalculator()));
}
void ApplyMDS(object s, ItemClickEventArgs e) {
    ApplyLayout(new GraphLayout(new MDSLayoutCalculator()));
}
void ApplyDisconnectedGraphs(object s, ItemClickEventArgs e) {
    ApplyLayout(new GraphLayout(new DisconnectedGraphsLayoutCalculator()));
}

Files to Review

• LayoutExampleWindow.xaml (VB: LayoutExampleWindow.xaml)
• LayoutExampleWindow.xaml.cs (VB: LayoutExampleWindow.xaml.vb)
• MainWindow.xaml (VB: MainWindow.xaml)
• MainWindow.xaml.cs (VB: MainWindow.xaml.vb)
• Converter.cs (VB: Converter.vb)
• GraphLayout.cs (VB: GraphLayout.vb)
• PhyloTreeLayout.cs (VB: PhyloTreeLayout.vb)
• DisconnectedGraphsLayoutCalculator.cs (VB: DisconnectedGraphsLayoutCalculator.vb)
• ILayoutCalculator.cs (VB: ILayoutCalculator.vb)
• MDSLayoutCalculator.cs (VB: MDSLayoutCalculator.vb)
• PhyloTreeLayoutCalculator.cs (VB: PhyloTreeLayoutCalculator.vb)
• RankingLayoutCalculator.cs (VB: RankingLayoutCalculator.vb)
• SugiyamaLayoutCalculator.cs (VB: SugiyamaLayoutCalculator.vb)
• MsaglGeometryGraphHelpers.cs (VB: MsaglGeometryGraphHelpers.vb)
• RoutingHelper.cs (VB: RoutingHelper.vb)

Documentation

• DiagramControl
• Diagram Items
• DiagramDesignerControl
• RibbonControl
• RibbonPageCategory
• RibbonPage

More Examples

• WPF DiagramControl - Create Custom Shapes with Connection Points
• WPF DiagramControl - Create Custom Context Menus
• WPF Diagram Control - Track and Restrict Drag Actions

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)