Page 1
Page 2
Page 3
Adding nodes to a TreeView Control that
make use of images in the Imagelist control
The TreeView control needs to be added to
your toolbox by selecting the Project/Component menu and then
checking the 'Microsoft CE TreeView Control 3.0" checkbox.
Figure 1.
The TreeView control is a way to display information
hierarchically. Each bit of information that is added to the tree
is done so by adding a node object, which has properties that
determine how the information is presented to the user.
The text information that is displayed in
the TreeView control can be edited by the user, or merely displayed
(by preventing editing). Each node can be expanded to show the
children nodes, or collapsed to hide them. For more information
on collapsing and expanding nodes, refer to the Microsoft help
file.
The Treeview and Imagelist controls
What we are going to cover is how to add a
node to a TreeView control, and how to use an image from the Imagelist
control to display with each node that is added to the tree.
Let me first briefly discuss what the Imagelist
control is for any of you who might not know. The Imagelist control
contains a list of images that you want to use with another control
such as the TreeView control. Other controls that might use the
Imagelist control are the TabStrip, ListView, CommandBar, MenuBar.
The TreeView control has an imagelist property
which it uses to point to the Imagelist control's handle - hImagelist.
This allows the TreeView control to reference the images in this
list. The TreeView control has a style property which can be set
to a number from 1 to 7. Each number in this range specifies a
different look and feel to the way information is displayed in
the TreeView control. Any style that uses a picture (image), needs
to get the images from the Imagelist control.
The TreeView control can use any of the images
in the Imagelist for any of its nodes as a way to highlight aspects
of the tree. Different user actions can also cause the displayed
image to change for the node in question. For example, all nodes
with children could have a folder image, and the leaf nodes could
have a different image (such as the bee icon used in this tutorial)
to indicate that the user has reached the bottom of that branch
of the tree. Also, when a user has expanded a node that has children,
for example, the image for this node could be changed from a closed
folder to that of an open folder, indicating that the node is
expanded (open).
Let's discuss how to create a TreeView control
with information in it and how to use the images in the Imagelist,
by looking through some code that I wrote to very simply illustrate
the aforementioned points. Download
the code here. Copy the three images to your "My Documents"
folder on your pocket pc. The three images are "bee_icon_bmp.bmp",
"icon_folder_closed.bmp" and "icon_folder_open.bmp".
Getting right to it
1) Take a look at form1. Note that you need
to add the TreeView control to the project as explained at the
start of this tutorial.
2) I am using frames to circumvent the problem
eVB has with not having a form unload event. This enables you
to jump between "screens" by simply hiding the frames
that are not in use, and making the relevant one visible and aligning
it with the top left-hand corner of the screen (pocket pc's screen).
As you will notice, we have two frames (see
figure 2 below). The first frame has functionality to add a database
and a table (we will be reading in our information from the database
and displaying it in the TreeView control), as well as the ability
to insert and list some rows of data before viewing them in the
TreeView control. The second frame contains the TreeView control
and a back button to take the user back to the first "screen"
(frame) once the information in the tree has been viewed.
Figure 2.
3) No editing capabilities have been added
to this TreeView control (that will be another tutorial). What
you will notice though is that there is code in the TreeView_Collapse
event and the TreeView_Expand event which sets the image of the
node to the expanded image (open folder) or the collapsed image
(closed folder) depending on whether the node is expanded or collapsed.
TreeView.Nodes.Item(Index).Image
= 2
There are 3 images in our Imagelist control,
and the above code sets the node's image to the second image,
image number "2" in the Imagelist, which is the open
folder image.
The number "2" indicates which of
the three images in the imagelist are to be used. The first image
is in position 1 in the Imagelist. The second image is in position
2 and so on.
Next Page