NodeMarker

The NodeMarker node control allows you to draw vertical colored lines on the treeview's left border:

The drawn line could be of the same color for all nodes by using the StaticColor property, or customized per each node via data binding by using the DataFieldName property.

Data source & binding#

The only data that is needed for NodeMarker is the color of the marker line to draw, per node. This color could be the same for all nodes by assigning it to the StaticColor property. By default, its value is null so the bound value, described below, will be used.

If the StaticColor property value is null, then the standard node control's data binding mechanism via DataFieldName property is used. The expected data type of the bound property is System.Drawing.Color or Nullable<System.Drawing.Color>.

Below is an example of how to bind NodeMarker to a data property.

class TaskNode : Node
{
  public Color? StateColor { get; set; }

  public TaskNode(string text, Color? markerColor) : base(text)
  {
    StateColor = markerColor;
  }
}

NodeTextBox titleCtrl = new NodeTextBox();
titleCtrl.DataFieldName = "Text";
titleCtrl.AttachTo(tree);

NodeMarker markerCtrl = new NodeMarker();
markerCtrl.DataFieldName = "StateColor";
markerCtrl.AttachTo(tree);

TaskNode node = new TaskNode("Read Inbox", Color.Red);
node.AttachTo(tree);
TaskNode node2 = new TaskNode("Call mom", Color.Green);
node2.AttachTo(tree);

Class TaskNode
    Inherits Node
    Public Property StateColor As System.Nullable(Of Color)

    Public Sub New(text As String, markerColor As System.Nullable(Of Color))
        MyBase.New(text)
        StateColor = markerColor
    End Sub
End Class

Dim titleCtrl As New NodeTextBox()
titleCtrl.DataFieldName = "Text"
titleCtrl.AttachTo(tree)

Dim markerCtrl As New NodeMarker()
markerCtrl.DataFieldName = "StateColor"
markerCtrl.AttachTo(tree)

Dim node As New TaskNode("Read Inbox", Color.Red)
node.AttachTo(tree)
Dim node2 As New TaskNode("Call mom", Color.Green)
node2.AttachTo(tree)

Above we specify the bound data property name via the DataFieldName node control property.

Padding#

By default, the marker line has a height equal to the height of the node it is drawn for. To add some empty space gaps on the marker's sides, the Padding property could be used. By default, NodeMarker sets its padding to 0,0,0,0 value, i.e., show no gaps.

If the marker line is drawn too close to the treeview plus-minus sign, the RootIndent treeview property could be increased to shift nodes to the right a bit.