TreeView.DrawNode Event


The .NET API Reference documentation has a new home. Visit the .NET API Browser on to see the new experience.

Occurs when a TreeView is drawn and the DrawMode property is set to a TreeViewDrawMode value other than Normal.

Namespace:   System.Windows.Forms
Assembly:  System.Windows.Forms (in System.Windows.Forms.dll)

Public Event DrawNode As DrawTreeNodeEventHandler

Use this event to customize the appearance of nodes in a TreeView control using owner drawing.

This event is raised only when the DrawMode property is set to TreeViewDrawMode values of OwnerDrawAll or OwnerDrawText. The following table indicates how the TreeNode can be customized when the DrawMode property is set to these values.

DrawMode property value

TreeNode customization


The TreeNode label area can be customized. All other TreeNode elements are drawn automatically.


The appearance of the entire TreeNode can be customized. Icons, check boxes, plus and minus signs, and lines connecting the nodes must be drawn manually if they are desired.

The region that the TreeNode.Text value would occupy if it were drawn using the font specified by the TreeView control's Font property is the region in which a node can be clicked to select it. This is called the hit test region. If you draw outside this region, you should provide your own code that selects a node when its visible area is clicked.

The hit test region corresponds to the DrawTreeNodeEventArgs.Bounds property when using OwnerDrawText. When using OwnerDrawAll, however, the DrawTreeNodeEventArgs.Bounds property encompasses the entire width of the TreeView. In this case, you can access the hit test region by getting the DrawTreeNodeEventArgs.Node value and accessing its TreeNode.Bounds property. You can then draw the hit test region of the node within these bounds, or you can provide your own hit test code. Note that setting the TreeNode.NodeFont property does not change the size of the hit test region, which is calculated using the font specified for the entire TreeView.

For more information about how to handle events, see Handling and Raising Events.

The following code example demonstrates how to customize a TreeView control using owner drawing. The TreeView control in the example displays optional node tags alongside the standard node labels. Node tags are specified by using the TreeNode.Tag property. The TreeView control also uses custom colors, which include a custom highlight color.

You can customize most of the TreeView colors by setting color properties, but the selection highlight color is not available as a property. Additionally, the default selection highlight rectangle extends only around a node label. Owner drawing must be used to draw the node tags and to draw a customized highlight rectangle large enough to include a node tag.

In the example, a handler for the DrawNode event draws the node tags and the custom selection highlight manually. Unselected nodes do not need customization. For these, the DrawTreeNodeEventArgs.DrawDefault property is set to true so that they will be drawn by the operating system.

Additionally, a handler for the MouseDown event provides hit-testing. By default, a node can be selected only by clicking the region around its label. The MouseDown event handler selects a node that is clicked anywhere within this region or within the region around a node tag, if present.

Imports System
Imports System.Drawing
Imports System.Windows.Forms

Public Class TreeViewOwnerDraw
    Inherits Form

    Private WithEvents myTreeView As TreeView

    ' Create a Font object for the node tags.
    Private tagFont As New Font("Helvetica", 8, FontStyle.Bold)

    Public Sub New()

        ' Create and initialize the TreeView control.
        myTreeView = New TreeView()
        myTreeView.Dock = DockStyle.Fill
        myTreeView.BackColor = Color.Tan
        myTreeView.CheckBoxes = True

        ' Add nodes to the TreeView control.
        Dim node As TreeNode
        Dim x As Integer
        For x = 1 To 3

            ' Add a root node to the TreeView control.
            node = myTreeView.Nodes.Add(String.Format("Task {0}", x))
            Dim y As Integer
            For y = 1 To 3 

                ' Add a child node to the root node.
                node.Nodes.Add(String.Format("Subtask {0}", y))
            Next y
        Next x

        ' Add tags containing alert messages to a few nodes 
        ' and set the node background color to highlight them.
        myTreeView.Nodes(1).Nodes(0).Tag = "urgent!"
        myTreeView.Nodes(1).Nodes(0).BackColor = Color.Yellow
        myTreeView.SelectedNode = myTreeView.Nodes(1).Nodes(0)
        myTreeView.Nodes(2).Nodes(1).Tag = "urgent!"
        myTreeView.Nodes(2).Nodes(1).BackColor = Color.Yellow

        ' Configure the TreeView control for owner-draw.
        myTreeView.DrawMode = TreeViewDrawMode.OwnerDrawText

        ' Add a handler for the MouseDown event so that a node can be 
        ' selected by clicking the tag text as well as the node text.
        AddHandler myTreeView.MouseDown, AddressOf myTreeView_MouseDown

        ' Initialize the form and add the TreeView control to it.
        Me.ClientSize = New Size(292, 273)
    End Sub 'NewNew

    <STAThreadAttribute()> _
    Shared Sub Main()
        Application.Run(New TreeViewOwnerDraw())
    End Sub 'Main

    ' Draws a node.
    Private Sub myTreeView_DrawNode(ByVal sender As Object, _
        ByVal e As DrawTreeNodeEventArgs) Handles myTreeView.DrawNode

        ' Draw the background and node text for a selected node.
        If (e.State And TreeNodeStates.Selected) <> 0 Then

            ' Draw the background of the selected node. The NodeBounds
            ' method makes the highlight rectangle large enough to
            ' include the text of a node tag, if one is present.
            e.Graphics.FillRectangle(Brushes.Green, NodeBounds(e.Node))

            ' Retrieve the node font. If the node font has not been set,
            ' use the TreeView font.
            Dim nodeFont As Font = e.Node.NodeFont
            If nodeFont Is Nothing Then
                nodeFont = CType(sender, TreeView).Font
            End If

            ' Draw the node text.
            e.Graphics.DrawString(e.Node.Text, nodeFont, Brushes.White, _
                e.Bounds.Left - 2, e.Bounds.Top)

        ' Use the default background and node text.
            e.DrawDefault = True
        End If

        ' If a node tag is present, draw its string representation 
        ' to the right of the label text.
        If (e.Node.Tag IsNot Nothing) Then
            e.Graphics.DrawString(e.Node.Tag.ToString(), tagFont, _
                Brushes.Yellow, e.Bounds.Right + 2, e.Bounds.Top)
        End If

        ' If the node has focus, draw the focus rectangle large, making
        ' it large enough to include the text of the node tag, if present.
        If (e.State And TreeNodeStates.Focused) <> 0 Then
            Dim focusPen As New Pen(Color.Black)
                focusPen.DashStyle = System.Drawing.Drawing2D.DashStyle.Dot
                Dim focusBounds As Rectangle = NodeBounds(e.Node)
                focusBounds.Size = New Size(focusBounds.Width - 1, _
                    focusBounds.Height - 1)
                e.Graphics.DrawRectangle(focusPen, focusBounds)
            End Try
        End If

    End Sub 'myTreeView_DrawNode

    ' Selects a node that is clicked on its label or tag text.
    Private Sub myTreeView_MouseDown(ByVal sender As Object, ByVal e As MouseEventArgs)
        Dim clickedNode As TreeNode = myTreeView.GetNodeAt(e.X, e.Y)
        If NodeBounds(clickedNode).Contains(e.X, e.Y) Then
            myTreeView.SelectedNode = clickedNode
        End If
    End Sub 'myTreeView_MouseDown

    ' Returns the bounds of the specified node, including the region 
    ' occupied by the node label and any node tag displayed.
    Private Function NodeBounds(ByVal node As TreeNode) As Rectangle

        ' Set the return value to the normal node bounds.
        Dim bounds As Rectangle = node.Bounds
        If (node.Tag IsNot Nothing) Then

            ' Retrieve a Graphics object from the TreeView handle
            ' and use it to calculate the display width of the tag.
            Dim g As Graphics = myTreeView.CreateGraphics()
            Dim tagWidth As Integer = CInt(g.MeasureString( _
                node.Tag.ToString(), tagFont).Width) + 6

            ' Adjust the node bounds using the calculated value.
            bounds.Offset(tagWidth \ 2, 0)
            bounds = Rectangle.Inflate(bounds, tagWidth \ 2, 0)
        End If
        Return bounds
    End Function 'NodeBounds

End Class 'TreeViewOwnerDraw 

.NET Framework
Available since 2.0
Return to top