Treeview Control Visual Basic (vb.6) Tutorials
|
| Tips >> Visual
Basic |
|
MAKE WEB APPLICATION WITHOUT KNOWLEDGE OF CODING? CLICK HERE
TREE DEFINITIONS:
|
| Node |
A node can be best thought of as a branch
on our tree. Each node represents 1 item. A node can hold any
number of subnodes. |
| Sibling |
A sibliing is another node that exists on
the same branch as the refering node. |
| Children |
Children are sub-nodes of the current node.
Sometimes called Child nodes. |
| Parent |
A parent node is the node "up"
from your current node. All nodes except the root node have
a parent node. |
|
|
|
|
ADDING NODES TO THE TREEVIEW:
|
| Object Type |
Object Name |
Instructions |
| Treeview |
Treeview1 |
The Treeview control where it all happens. You'll be using
this control though the whole tutorial. |
| Imagelist |
ImageList1 |
This control will hold the images for our nodes. Add 3 images
to the image list control.
| Image |
Key |
| Image of a Closed Folder |
Closed |
| Image of an Open Folder |
Open |
| Image of a File |
Leaf |
|
|
| The Treeview Control holds a collection of nodes
so to add a node to the Tree you need to define a new node and then
add that node to the Treeview's collection. Like this: |
| |
Dim nodx As Node
'Add root Node
Set nodx = TreeView1.Nodes.Add(, , "Root", "Root
Node") |
|
| |
| Trying running that. You should see only one item in the tree called
"Root Node". You will notice that the parent property
was left blank in the example above. This is because we want this
node to be a top level node or Root node, and not to have any parents.
Lets add some more nodes to our tree, but this time we will add images
to each of our nodes:
|
| |
Dim nodx As Node
Set TreeView1.ImageList = ImageList1
'Add root Node
Set nodx = TreeView1.Nodes.Add(, , "Root", "Root
Node","Closed")
'Expand root node so we can see what's under it
nodx.ExpandedImage = "Open"
nodx.Expanded = True
'Create a child node under the root node
Set nodx = TreeView1.Nodes.Add("Root", tvwChild, "Child1",
"Child node 1", "Closed")
'Expand this node so we can see what's under it
nodx.ExpandedImage = "Open"
nodx.Expanded = True
'Create several more children
Set nodx = TreeView1.Nodes.Add("Root", tvwChild, "Child2",
_
"Child
node 2", "Leaf")
Set nodx = TreeView1.Nodes.Add("Root", tvwChild, "Child3",
_
"Child
node 3", "Leaf")
Set nodx = TreeView1.Nodes.Add("Root", tvwChild, "Child4",
_
"Child
node 4", "Leaf")
Set nodx = TreeView1.Nodes.Add("Root", tvwChild, "Child5",
_
"Child
node 5", "Leaf")
'Create two child nodes under the first child node of root
Set nodx = TreeView1.Nodes.Add("Child1", tvwChild,
"Child1A", _
"Child
node 1 A", "Leaf")
Set nodx = TreeView1.Nodes.Add("Child1", tvwChild,
"Child1B", _
"Child
node 1 B", "Leaf") |
|
| |
Now if you look at that code you will notice that we now have a
reference to that node stored in the nodx object. You can use this
reference to modify the properties of that node. That's what's happening
on the nodx.expanded = true lines. What those do is open a node so
we can see the child nodes under it. It's the same thing as when the
user clicks on a node to expand it themselves, except this is done
though the code.
Go ahead and run that last bit of code. You should see that the original
Root Node now has 5 child nodes under it and the first of these
child nodes has two of it's own children. |
|
MOVING THROUGH THE TREE IN TREEVIEW CONTROL:
|
| There are many instances where you want to be able to move though
the tree to find all the sub nodes under a specific node. Using the
above here is a very simple example of how to get all the sub nodes
for a specific node and display their text labels: |
| |
Dim nodx As Node
Set TreeView1.ImageList = ImageList1
'Add root Node
Set nodx = TreeView1.Nodes.Add(, , "Root", "Root
Node", "Closed")
'Expand root node so we can see what's under it
nodx.ExpandedImage = "Open"
nodx.Expanded = True
'Create a child node under the root node
Set nodx = TreeView1.Nodes.Add("Root", tvwChild, "Child1",
_
"Child node 1", "Closed")
'Expand this node so we can see what's under it
nodx.ExpandedImage = "Open"
nodx.Expanded = True
'Create several more children
Set nodx = TreeView1.Nodes.Add("Root", tvwChild, "Child2",
_
"Child node 2", "Leaf")
Set nodx = TreeView1.Nodes.Add("Root", tvwChild, "Child3",
_
"Child node 3", "Leaf")
Set nodx = TreeView1.Nodes.Add("Root", tvwChild, "Child4",
_
"Child node 4", "Leaf")
Set nodx = TreeView1.Nodes.Add("Root", tvwChild, "Child5",
_
"Child node 5", "Leaf")
'Create two child nodes under the first child node of root
Set nodx = TreeView1.Nodes.Add("Child1", tvwChild,
"Child1A", _
"Child node 1 A", "Leaf")
Set nodx = TreeView1.Nodes.Add("Child1", tvwChild,
"Child1B", _
"Child node 1 B", "Leaf")
'Loop though each child of the root node
Dim i As Long
'Set nodx to the first child node of root.
Set nodx = TreeView1.Nodes("Root").Child
'Loop though each child nod assigning it to nodx
For i = 1 To TreeView1.Nodes("Root").Children
MsgBox nodx.Text
Set nodx = nodx.Next
Next
|
|
| |
| Only the last block of code is new in the above example.
You can use the Children property to tell you how many child
nodes a node contains. The Child property points to the first
child node and the Next property points to the next child node after
the current one.
|
| |
|
EVENTS IN TREEVIEW:
|
|
Ok time to try something new.
For this example we will just add two nodes that resemble
directories on your system. When you click on a node it will give
your the absolute file path to get to that folder:
|
| |
Private Sub Form_Load()
Dim nodx As Node
Set TreeView1.ImageList = ImageList1
'Add Drive
Set nodx = TreeView1.Nodes.Add(, , , "c:", "Closed")
nodx.ExpandedImage = "Open"
nodx.Expanded = True
'Add Folder
Set nodx = TreeView1.Nodes.Add(nodx, tvwChild, , "Windows",
"Closed")
nodx.ExpandedImage = "Open"
nodx.Expanded = True
'Add Another Folder
Set nodx = TreeView1.Nodes.Add(nodx, tvwChild, , "System",
"Closed")
nodx.ExpandedImage = "Open"
nodx.Expanded = True
End Sub
Private Sub TreeView1_NodeClick(ByVal Node As MSComctlLib.Node)
MsgBox Node.FullPath
End Sub
|
|
| |
When you click on a node in the tree, the NodeClick event
gets fired and it passes you the node that was clicked, so it's then
easy to manipulate it. Notice anything strange about the above example?
That right there are no Keys for any of the nodes. The key is optional
and does not have to be specified. Also note that since I don't have
a key I have to give the whole node instead of just the node's key
to the add function to be able to add a new node to the tree. That
is why nodx is being passed into the add function, since it is really
just a pointer to the previous node.
You should be able to see from the above example that the Treeview
control works very well for showing the file system, like in Windows
Explorer, the FullPath property gives us everything we
need to tell where the file is located.
Here is an example of the NodeCheck, Collapse, and Expand Events: |
| |
| Try running that and clicking on the checkboxes you should get
a message telling you which node you just checked. Then try UnChecking
a node, and you should get a message telling you which node was unchecked.
Now try collapsing and expanding some nodes and you should get a message
from the Expand and Collapse events. |
Private Sub Form_Load()
Dim nodx As Node
Dim nodr As Node
'Show Root Lines
TreeView1.LineStyle = tvwRootLines
'Display Checkboxes
TreeView1.Checkboxes = True
'Add Items
Set nodx = TreeView1.Nodes.Add(, , , "Item 1")
Set nodx = TreeView1.Nodes.Add(, , , "Item 2")
Set nodx = TreeView1.Nodes.Add(, , , "Item 3")
Set nodx = TreeView1.Nodes.Add(, , , "Item 4")
Set nodx = TreeView1.Nodes.Add(, , , "Item 5")
nodx.Expanded = True
Set nodr = TreeView1.Nodes.Add(nodx, tvwChild, , "Item
6")
nodr.Expanded = True
Set nodx = TreeView1.Nodes.Add(nodr, tvwChild, , "Item
7")
Set nodx = TreeView1.Nodes.Add(nodr, tvwChild, , "Item
8")
Set nodx = TreeView1.Nodes.Add(nodr, tvwChild, , "Item
9")
Set nodx = TreeView1.Nodes.Add(nodr, tvwChild, , "Item
10")
Set nodx = TreeView1.Nodes.Add(nodr, tvwChild, , "Item
11")
Set nodx = TreeView1.Nodes.Add(, , , "Item 12")
End Sub
Private Sub TreeView1_Collapse(ByVal Node As MSComctlLib.Node)
MsgBox "Colapsing node: "
& Node.Text
End Sub
Private Sub TreeView1_Expand(ByVal Node As MSComctlLib.Node)
MsgBox "Expanding node: "
& Node.Text
End Sub
Private Sub TreeView1_NodeCheck(ByVal Node As MSComctlLib.Node)
If Node.Checked Then
MsgBox
"Node " & Node.Text & " was checked"
Else
MsgBox
"Node " & Node.Text & " was Unchecked"
End If
End Sub |
|
|
If you don't find what you are looking for. Please click
here to submit your query, our experts will reply soon.
|
|
