Introduction.
I hope you’ve enjoyed the past few tutorial sessions on Microsoft TreeView and ImageList Control, and that you’re ready to dive into the next installment. If you haven’t had a chance to go through the earlier articles yet, you’ll find the links to the previous episodes below.
- Microsoft Tree View Control Tutorial
- Creating an Access Menu with a Tree View Control
- Assigning Images to Tree View Nodes
This post continues from last week’s episode.
In the previous session, we created a set of images and uploaded them into the ImageList Control using VBA. The ImageList reference was then assigned to the TreeView Control’s ImageList property, allowing us to directly use either the image Key Names or Index Numbers as the [Image]
and [SelectedImage]
parameters in the Nodes.Add()
method of the TreeView object.
With these steps, we were able to design a visually appealing Microsoft Access Project Menu featuring a hierarchical structure, tree lines, and custom node images.
Last Week’s Trial Run: Form with Node Images.
Below is the sample Access Project Menu created last week, showing the node images alongside the tree lines:
VBA Code for Uploading Images into the ImageList Object.
The following VBA procedure was used to upload images into the ImageList Control and make them available for use in the TreeView nodes:
Dim tvw As MSComctlLib.TreeView Const KeyPrfx As String = "X" Dim objimgList As MSComctlLib.ImageList Private Sub CreateImageList() Dim strPath As String 'Initialize Tree View Object Set tvw = Me.TreeView0.Object 'Clear the Tree View Nodes, if any. tvw.Nodes.Clear 'Initialize ImageList Object Set objimgList = Me.ImageList0.Object ’the images must be saved in database path strPath = CurrentProject.Path & “\” With objimgList.ListImages 'Key Names are Case sensitive. .Add , "FolderClose", LoadPicture(strPath & "folderclose2.jpg") .Add , "FolderOpen", LoadPicture(strPath & "folderopen2.jpg") .Add , "ArrowHead", LoadPicture(strPath & "arrowhead.bmp") .Add , "LeftArrow", LoadPicture(strPath & "LeftArrow.bmp") .Add , "RightArrow", LoadPicture(strPath & "RightArrow2.bmp") End With With tvw .ImageList = objimgList End With End Sub
The Purpose of Using Meaningful Images
In our last example, we did not just use random icons. Instead, we assigned purpose-driven images that represent the actual behavior of the menu items.
-
Root-level Nodes (Folder Images):
-
FolderClose → Used for the normal view of the Root Node. This indicates that its child items are currently hidden.
-
FolderOpen → Displayed when the Root Node is clicked, showing that its child items are now visible.
-
Note: Once expanded, clicking again will not revert the image back to FolderClose while the Node is in focus. However, depending on your
TreeView0_NodeClick()
event procedure, the child nodes may collapse and hide again.
-
-
Child Nodes (Arrow Images):
-
LeftArrow → A small, left-facing arrow for the default (unclicked) state of child nodes.
-
RightArrow → A slightly larger arrow pointing right, displayed when a child node is clicked. This provides a clear visual cue that the item is active.
-
The highlighted words above are the Key Names that were defined in the ImageList control and then referenced in the Nodes.Add()
method.
When the user clicks a child node, the action not only updates the image but also triggers the opening of the linked object (Form, Report, or Macro), depending on which child node is selected.
The ImageList control on the Form.
The ImageList Control on the frmMenu Form, highlighted in Design View, is shown below.
The ImageList Control Property Sheet.
The ImageList’s Property Sheet Image is given below for reference:
Review of Last Week’s Exercise and Preparations.
In last week’s session, we worked with 16 x 16 pixel images and uploaded them into the ImageList Control using VBA code. After loading the images, we assigned the ImageList Object reference to the TreeView Control’s ImageList property.
This setup allowed us to use either the Index Number or the Key Value of each image in the Add()
method parameters of TreeView Nodes.
A few important points from last week’s method:
-
We did not specify the first (Index) parameter of the ImageList’s
Add()
method. Instead, this method itself automatically generates the Index Numbers sequentially. -
When you use Key Values in the
Nodes.Add()
methods[Image]
and[SelectedImage]
parameters, remember that Key values are case-sensitive. -
For consistency, it is a good practice to enter Key values in the ImageList Control’s Key text box in lowercase letters.
The Easy Way: Loading Images Without VBA
As promised, this week we’ll look at the simpler, no-code approach. Instead of writing VBA code to load images, you can:
-
Open the ImageList control on your form.
-
Manually adding images one by one, directly from your disk.
-
Assign a Key value (lowercase preferred) or rely on the automatically assigned Index number.
That’s it! No VBA required.
Advantages of the Manual Method
-
Quick setup: Ideal when your image set is finalized and not expected to change frequently.
-
Portability: You can copy and paste the ImageList control into another project form, and all the images remain intact. This makes it easy to reuse your ImageList across multiple Access applications.
-
Direct referencing: Just like in the VBA method, you can still use either the Key value or the Index number in the
Nodes.Add()
method of the TreeView Control.
Preparing for This Week’s Demo.
If you have already downloaded last week’s demo database (ProjectMenuV21.accdb
), open it now. Inside, you’ll find a saved copy of the form frmMenu
renamed as frmMenu2.
We’ll be using frmMenu2
this manual image loading method.
Adding an ImageList Control to the frmMenu2 Form.
Open the form frmMenu2 in Design View.
Insert the Microsoft ImageList Control from the ActiveX Controls List, somewhere on the empty space on the frmMenu2 Form.
Change the Name Property value to ImageList0.
Right-click on the Image List Control, highlight ImageListCtrl Object Option, on the displayed menu, and select Properties.
Select the preset Image Size 16 x 16 Pixels Option on the Properties General Tab. You must select one of these options on the General Tab first, before adding any Image to the Images Tab.
Select the Images Tab. The Properties Images Tab looks like the following Image:
Click the Insert Picture command button, then browse to locate the folder_closed sample image (or use any image you created during last week’s trial run). Select the file and click the Open button.
After this step, the ImageList control will display the newly inserted image, as shown in the screenshot below.
Once the image is inserted, three text box controls—Index, Key, and Tag—will become active. The Index text box will automatically display the value 1 for the first image.
In the Key text box, type a unique string value such as folder_close (or any meaningful key name you prefer). This key name will later be used in the Add() method's parameters of the TreeView control. Remember, key values must be unique and are case-sensitive, so keep them simple and easy to recall.
The Tag property is optional but useful. You can enter information like the file path of the image or any other descriptive note.
Repeat the process for all other images:
-
Insert each image one by one from your disk.
-
Assign a meaningful key value in the Key text box.
-
Optionally, add a descriptive note in the Tag box.
If you need to remove an image, simply select it in the control and click Remove Picture.
When you finish uploading all required images, click Apply, then click OK to close the ImageList control.
⚠️ Important: Ensure that the image size (e.g., 16 x 16 pixels) is selected on the General tab before uploading images. Once images are added, the size option becomes locked. To change the image size later, you must remove all images, select the new size, and then re-upload them.
The ImageList control with multiple images will appear similar to the example shown below:
-
If you are unsure of the Key-Value assigned to a particular image, simply click on the image in the control. The Key text box will immediately display its assigned value.
Once all required images are uploaded, they remain stored within the ImageList control itself. This means you can easily reuse them in other projects—just copy the ImageList control to a new form, or share the form/database with others. You can also add more images later from a new location if needed.
After the images are ready, the next step is to pass the ImageList control reference to the TreeView control’s ImageList property, just as we did earlier when uploading images with VBA code.
Here is a sample snippet that demonstrates how to assign the ImageList reference to the TreeView control in a new project:
In this example:
-
TreeView0 is the name of the TreeView control.
-
ImageList1 is the name of the ImageList control containing the uploaded images.
With this link established, you can now use either the Index numbers or the Key values of the images directly in the
Nodes.Add()
method of the TreeView.-
Expanding/Collapsing Nodes with One Command Button.
-
Open the frmMenu2 form in Design View.
-
Select the Collapse All command button, open its Click event procedure, and remove the code.
-
Delete the Collapse All button from the form (we will replace both actions with one button).
-
Select the Expand All command button, and open its Click event procedure.
-
Copy and paste the following VBA code, overwriting any existing lines between
cmdExpand_Click()
andEnd Sub
:
Private Sub cmdExpand_Click() Dim Nodexp As MSComctlLib.Node If cmdExpand.Caption = "Expand All" Then cmdExpand.Caption = "Collapse All" For Each Nodexp In tvw.Nodes Nodexp.Expanded = True Next Nodexp Else cmdExpand.Caption = "Expand All" For Each Nodexp In tvw.Nodes Nodexp.Expanded = False Next Nodexp End If End Sub
Save and Open frmMenu2 in normal view.
The Command Button Caption text is now shown as Expand All, and all the Nodes are in the collapsed state.
Click on the Command Button to open up all the Nodes. All the nodes and their Child Nodes will be in expanded form. The Caption of the Command Button changes to 'Collapse All'.
Click on the same Command Button again, and all the Nodes are now closed except the Root-level Nodes, and the Caption Text changes back to 'Expand All' again.
Next week, we will explore the CheckBoxes on Nodes to learn how we can identify checked Nodes and work with them.
CLASS MODULE
- MS-Access Class Module and VBA
- MS-Access VBA Class Object and Arrays
- MS-Access Base Class and Derived Objects
- VBA-Base Class and Derived Object-2
- Base Class and Derived Object Variants
- MS-Access Recordset and Class Module
- Access Class Module and Wrapper Classes
- Wrapper Class Functionality