Create Diagram Instance

After following the previous topic, you should be able to use MindFusion.Diagramming classes in your project.

Add a Diagram to Xaml UI

1. Add an xmlns attribute to the root Xaml object and set its value to "using:MindFusion.Diagramming", which lets you create objects from the Diagramming namespace in Xaml.
2. Add a Diagram element, and set its Name attribute to a variable name that lets you access the instance from code-behind.
3. Enclose the diagram within ScrollViewer element to enable scrolling.

Xaml

<?xml version="1.0" encoding="utf-8"?>
<Window
    ....
    xmlns:diag="using:MindFusion.Diagramming">

    <Grid>
        <ScrollViewer HorizontalScrollBarVisibility="Auto">
            <diag:Diagram x:Name="diagram" />
        </ScrollViewer>
    </Grid>
</Window>

Create diagram items

You can create nodes and links programmatically either by calling Factory methods, or by instantiating objects of respective class and adding them to Items collection:

C#

public MainWindow()
{
    this.InitializeComponent();

    diagram.Bounds = new Rect(0, 0, 5000, 5000);

    var node1 = diagram.Factory.CreateShapeNode(30, 30, 90, 90);
    node1.Text = "Hello";

    var node2 = diagram.Factory.CreateShapeNode(180, 75, 90, 90);
    node2.Text = "WinUI!";

    diagram.Factory.CreateDiagramLink(node1, node2);
}

Diagram interaction

Set the value of the Behavior property, which defines how the control interprets touch or mouse input. The default value LinkShapes specifies that users can draw shape nodes and connect them with links. Other Link* and Draw* modes allow drawing different types of nodes (TableNode, ContainerNode, etc). Modes such as Modify, PanAndModify, MoveNodes, SelectOnly allow users to interact with existing items, but not draw new ones on the canvas.

Browse the other sections of this help file to learn more about the functionality provided by the MindFusion.Diagramming classes, methods and properties. Follow the tutorials to learn how to populate the diagram model programmatically.