LIDOR SYSTEMS

Advanced User Interface Controls and Components

Expand Node on Hover or by Clicking on Node's Text in TreeView .NET

Created: 12 August 2013

By default a node can be expanded by clicking on expand button. In some cases is better to expand node on hover when mouse cursor is over node space. In other cases you may need to expand or collapse a node when a click is made over node text. In following sections you can find how to expand or collapse a node in those cases.

Expand Node on Hover

Although you can handle the MouseMove event to track which node is hovered, the better way is to handle the ItemMouseHover event. This event is triggered only after intial delay of 500 miliseconds is passed when mouse cursor hovers over node.

private void treeView1_ItemMouseHover(object sender, LidorSystems.IntegralUI.ObjectEventArgs e)

{

// Check whether the object passed to this event is a TreeNode

// If it is a TreeNode, expand its content

if (e.Object is LidorSystems.IntegralUI.Lists.TreeNode)

{

LidorSystems.IntegralUI.Lists.TreeNode node = (LidorSystems.IntegralUI.Lists.TreeNode)e.Object;

 

node.Expand();

}

}

Private Sub treeView1_ItemMouseHover(ByVal sender As Object, ByVal e As LidorSystems.IntegralUI.ObjectEventArgs) Handles treeView1.ItemMouseHover

' Check whether the object passed to this event is a TreeNode

' If it is a TreeNode, expand its content

If TypeOf e.[Object] Is LidorSystems.IntegralUI.Lists.TreeNode Then

Dim node As LidorSystems.IntegralUI.Lists.TreeNode = DirectCast(e.[Object], LidorSystems.IntegralUI.Lists.TreeNode)

 

node.Expand()

End If

End Sub

Related: Expand Only One Node at One Time

In above code first we are checking whether the object passed to the event is a treenode, and then we can expand it by calling the Expand method. You can also use Toggle method to expand the node if it is collapsed or to collapse it if it is expanded. Simply replace the Expand method with Toggle method.

Download TreeView Sample for Expanding Nodes on Mouse Over or by Click on Node's Text

Expand Node by Clicking on its Text

You can also click node and expand or collapse it by handling the Click event:

private void treeView1_Click(object sender, EventArgs e)

{

// Retrieve the current position of mouse cursor

Point mousePos = this.treeView1.ContentPanel.PointToClient(Control.MousePosition);

 

// Get a node at which mouse cursor points to

LidorSystems.IntegralUI.Lists.TreeNode node = this.treeView1.GetNodeAt(mousePos);

if (node != null)

{

// Retrieve the space of node text and check whether the click was made inside it

// If it is expand or collapse the node

RectangleF textArea = node.TextRect;

if (textArea.Contains(mousePos))

node.Toggle();

}

}

Private Sub treeView1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles treeView1.Click

' Retrieve the current position of mouse cursor

Dim mousePos As Point = Me.treeView1.ContentPanel.PointToClient(Control.MousePosition)

 

' Get a node at which mouse cursor points to

Dim node As LidorSystems.IntegralUI.Lists.TreeNode = Me.treeView1.GetNodeAt(mousePos)

If node IsNot Nothing Then

' Retrieve the space of node text and check whether the click was made inside it

' If it is expand or collapse the node

Dim textArea As RectangleF = node.TextRect

If textArea.Contains(mousePos) Then

node.Toggle()

End If

End If

End Sub

In above code we are using the GetNodeAt method to retrieve the treenode that was clicked. If node exists than we are checking to see whether the click was made over node’s text. If it is, we can expand or collapse it by using the Toggle method.

Because the user cannot tell whether the node can be expanded by clicking on node text, it is useful to show underlined text or to add a hyperlink to the node. In this way for example you can expand node by clicking on hyperlink.

A complete sample project in C# and VB showing how to create a tree view where each node expands on mouse over or when it is clicked is available for download from here: Hover or Click Node Text to Expand it

Newsletter


Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.
Name: Email: *
*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.