Custom node control

If you need specific node controls with custom behavior or appearance, you can easily create them. Depending on your requirements, you should inherit your node control class from one of the following:

  • BindableControl - for node controls that can bind to a node class's member.
  • EditableControl - for editable node controls.
  • TextControl - for editable text node controls.
  • StaticTextControl - for non-editable text node controls.
  • PopupControl - for node controls that show a popup on mouse click.
  • ExpandableControl - for expandable node controls.

For instance, here we'll create a node control that displays a color rectangle inside a node and changes the color on mouse click:

// Custom node control class.
class MyNodeControl : BindableControl
{
    public MyNodeControl()
    {
        // Bind to the Color node class's property.
        DataFieldName = "Color";
    }

    protected override Size MeasureSize(Node node, DrawContext context)
    {
        // Static node control size.
        return new Size(15, 15);
    }

    protected override void Draw(Node node, DrawContext context)
    {
        // Display bounded color.
        Color cl = GetValue<Color>(node);
        using (SolidBrush br = new SolidBrush(cl))
        {
            context.Graphics.FillRectangle(br, context.Bounds);
        }
    }

    protected override void MouseDown(MouseActionArgs args, DrawContext context)
    {
        // Switch color on mouse click.
        Color cl = GetValue<Color>(args.Node);
        Color clNew = (cl == Color.Red) ? Color.Blue : Color.Red;
        SetValue(args.Node, clNew);
        OnControlChanged(eNodeControlChangeType.Look);
    }
}

// Use our node control.
MyNodeControl nc = new MyNodeControl();
nc.AttachTo(tree);

NodeWithColor node = new NodeWithColor();
// Initialize bounded property value.
node.Color = Color.Red;
node.AttachTo(tree);

' Custom node control class.
Class MyNodeControl
    Inherits BindableControl
    Public Sub New()
        ' Bind to the Color node class's property.
        DataFieldName = "Color"
    End Sub

    Protected Overrides Function MeasureSize(node As Node, context As DrawContext) As Size
        ' Static node control size.
        Return New Size(15, 15)
    End Function

    Protected Overrides Sub Draw(node As Node, context As DrawContext)
        ' Display bounded color.
        Dim cl As Color = GetValue(Of Color)(node)
        Using br As New SolidBrush(cl)
            context.Graphics.FillRectangle(br, context.Bounds)
        End Using
    End Sub

    Protected Overrides Sub MouseDown(args As MouseActionArgs, context As DrawContext)
        ' Switch color on mouse click.
        Dim cl As Color = GetValue(Of Color)(args.Node)
        Dim clNew As Color = If((cl = Color.Red), Color.Blue, Color.Red)
        SetValue(args.Node, clNew)
        OnControlChanged(eNodeControlChangeType.Look)
    End Sub
End Class

' Use our node control.
Dim nc As New MyNodeControl()
nc.AttachTo(tree)

Dim node As New NodeWithColor()
' Initialize bounded property value.
node.Color = Color.Red
node.AttachTo(tree)

This example demonstrates how to create a custom node control that displays a color rectangle and changes its color when clicked. The MyNodeControl class inherits from BindableControl and overrides the MeasureSize, Draw, and MouseDown methods to implement the desired behavior and appearance.