Tutorial 4: Custom Nodes Integration

This tutorial builds upon the OrgChartNode type from Tutorial 3. It shows how to fully integrate the custom type with other Diagramming for WinUI features, such as serialization, undo support, creating nodes by drag-and-drop or drawing with the mouse on the canvas.

1. Add a NodeListView to the page and add a few OrgChartNode objects as its children:

Xaml

<diag:NodeListView Width="150" x:Name="nodeList" />

C#

var loc = Windows.ApplicationModel.Package.Current.InstalledPath;
nodeList.Items.Add(new OrgChartNode()
{
    Bounds = new Rect(0, 0, 140, 70),
    Title = "CEO",
    FullName = "Type here",
    Text = "Chief executive officer",
    ImageLocation = loc + "\\Assets\\016.png"
});
nodeList.Items.Add(new OrgChartNode()
{
    Bounds = new Rect(0, 0, 140, 70),
    Title = "CIO",
    FullName = "Type here",
    Text = "Chief information officer",
    ImageLocation = loc + "\\Assets\\ac0026-64.png"
});

2. Add a copy constructor to the OrgChartNode class. The control throws an exception if you try to create via drag-and-drop an instance of a class without copy constructor:

C#

// Required for creating nodes by dragging them from the NodeListView
public OrgChartNode(OrgChartNode prototype) : base(prototype)
{
    DefaultStyleKey = typeof(OrgChartNode);
    Title = prototype.Title;
    FullName = prototype.FullName;
}

3. In order to enable drawing OrgChartNodes with the mouse, inherit the LinkNodesBehavior class and override its CreateNode method. You could as well inherit BehaviorBase or any of its derived classes, and override either CreateNode or StartDraw:

C#

public class OrgChartBehavior : LinkNodesBehavior
{
    public OrgChartBehavior(Diagram diagram) : base(diagram) { }

    protected override DiagramNode CreateNode()
    {
        return new OrgChartNode();
    }
}

4. Assign an instance of the behavior class to the CustomBehavior property of the Diagram class:

C#

public MainWindow()
{
    this.InitializeComponent();
    ....
    // enable drawing OrgChartNodes with the mouse
    diagram.CustomBehavior = new OrgChartBehavior(diagram);
}

5. To implement serialization of any new properties added by a custom item class, override the SaveToXml and LoadFromXml methods of the base DiagramItem class:

C#

// serialization support for custom properties

protected override void SaveToXml(System.Xml.Linq.XElement xmlElement, XmlPersistContext context)
{
    base.SaveToXml(xmlElement, context);
    context.WriteString(Title, "Title", xmlElement);
    context.WriteString(FullName, "FullName", xmlElement);
}

protected override void LoadFromXml(System.Xml.Linq.XElement xmlElement, XmlPersistContext context)
{
    base.LoadFromXml(xmlElement, context);
    Title = context.ReadString("Title", xmlElement);
    FullName = context.ReadString("FullName", xmlElement);
}

6. Call the static RegisterItemClass method to assign an XML element name to the custom item type:

C#

public MainWindow()
{
    ....

    // enable serialization of the custom class
    Diagram.RegisterItemClass(typeof(OrgChartNode), "my:OrgChartNode", 1); 

    // enable drawing OrgChartNodes with the mouse
    diagram.CustomBehavior = new OrgChartBehavior(diagram);
}

7. In order to enable undo / redo of changes done on OrgChartNode, create a DiagramItemState-derived class that contains member corresponding to the additional properties defined by OrgChartNode:

C#

public class OrgChartNodeState : ShapeNodeState
{
    internal string Title;
    internal string FullName;
}

8. Override the CreateState, SaveState and RestoreState methods:

C#

// undo and redo support

protected override DiagramItemState CreateState()
{
    return new OrgChartNodeState();
}

protected override DiagramItemState SaveState()
{
    var state = (OrgChartNodeState)base.SaveState();
    state.Title = Title;
    state.FullName = FullName;
    return state;
}

protected override void RestoreState(DiagramItemState itemState)
{
    base.RestoreState(itemState);

    var state = (OrgChartNodeState)itemState;
    Title = state.Title;
    FullName = state.FullName;
}

9. The full source code for this tutorial with several additional UI controls that invoke serialization and undo methods is available in the Samples\Tutorial4 subfolder of the distribution.