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.
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