Assigning Images to Tree View Nodes-2 ~ LEARN MS-ACCESS TIPS AND TRICKS

Friday, October 9, 2020

Assigning Images to Tree View Nodes-2

Introduction.

I hope, you found the last few week's Tutorial Sessions, of Microsoft TreeView and ImageList Control interesting and, are ready to take on the next episode. If you have not yet gone through the earlier Articles then the Links are given below.

This post is the continuation of last week’s episode.

Last week we created a few images and uploaded them to the ImageList Control using VBA Code, for Microsoft Tree View Control. The ImageList control reference has been passed to the Tree View Control’s ImageList Property. After these steps, we could directly use the Image’s Key-Names or Index Numbers as Node [Image] and [SelectedImage] Parameters in the Nodes.Add() Method of Microsoft Tree View Object. With the aid of both these Controls, we could create a beautiful Microsoft Access Project Menu, having menu items in a hierarchical structure with Tree-lines and visually pleasing menu item Images.

Last Week’s Trial Run Form with Node Images.

Last week’s Access Project Menu image is given below, with Node Images and Tree-lines.

VBA Code for Uploading Images to ImageList Control.

The Following is the VBA Code, that we have used to upload images to the ImageList Object 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

While presenting the above Code I have mentioned that there is an easier way to upload the images to the ImageList Control, without VBA Code. Besides that, I have promised to share the Images, which I have used in the above demo Access Menu Nodes. We will come to that in a short while.

We were not simply creating some images and using them. But, we have created some meaningful images for our Tree View-based Access Project Menu.

Take the case of the root-level folder images. The FolderClose image style is used for the Root-level Node’s normal view while hiding all its Child Nodes from view. When the user clicks on the Root-level Node the FolderOpen image appears and exposes its child nodes. A second click on the Node will not change the Image to normal view, while it has the focus, but the child nodes may disappear from view, depending on the TreeView0_NodeClick() Event Procedure Code.

Similarly, the child nodes have the left-facing LeftArrow image in normal view and a slightly bigger image RightArrow, pointing to the right, when Clicked. The highlighted words are Key Names used in the ImageList control. The Click action opens the Form, Report, or Macro, depending on the child Node selected.

The ImageList control on the Form.

The ImageList Control on the frmMenu Form highlighted in the Design View is given 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.

Last week we selected the Image-size 16 x 16 pixels and uploaded the required Images into the above ImageList Control using VBA Code. After uploading all the images, we passed the ImageList Object reference to the Tree View Control’s ImageList Property.

After the above steps, we could use the Index Number or Key-Value of Images in the Add() method parameters, of Tree View Nodes.

We have not specified the first parameter of ImageList’s Add() method. But, the Add() Method itself inserts the Index Number for each image, into the ImageList Control. Remember, when you enter the Key value into the Nodes.Add() Method’s [Image], [SelectedImage] Parameter it is Case Sensitive. It is better, when you enter Key values, into the ImageList Control’s Key Text Box, with small-case letters.

Now, as I have promised to show the easy way of loading Images to the ImageList Control. It is as simple as selecting all the required Images, one by one, from your disk manually and adding them to the ImageList Control, without any VBA Code.

Besides that, you can share the ImageList Control with other Projects, by simply Copying and Pasting the ImageList Control to another Project Form, with all the images intact. Then all you have to do is to use the Key-Value or Index Number in the Add() method of TreeView Control Nodes.

If you have already downloaded the Demo Database from last Week’s Post then open ProjectMenuV21.accdb. We have saved a copy of the Form frmMenu with the new Name frmMenu2.

Adding ImageList Control on frmMenu2 Form.

Open the form frmMenu2 in Design View.
Insert Microsoft ImageList Control from the Activex Controls List, somewhere on the empty space on the frmMenu2 Form.
Change its 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. It is important that you 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 on the Insert Picture Command Button, find the folder_closed sample image (if you have one or select the image you prepared earlier), you created for a trial run last week, select it and click on Open Command Button.
The ImageList control will look like the image given below, after inserting the selected image.
Three Text Box controls: Index, Key, and Tag are now enabled. The Index control has the Index Value 1 inserted into it automatically.
Enter the Text folder_close or whatever Key-value you prefer to use in the Add() Method’s parameters of Tree View control, in the Key Text Box control. Its data Type should be of String Type and unique among all the image Key Values.
The Tag property can be used to record some useful information, like the Path Name of the Image.
Add all the required Images from your disk, one after the other, and enter appropriate Key Values in the Key Text control, for all Images you upload. Use simple, meaningful, and easy to memorize Key values.
If you would like to remove some image from the control then select that Image and click Remove Picture.
When finished loading Images click on Apply Command Button and then Click OK to close the ImageList Control.
Note: Remember, you have added all the Images, after selecting the Image Size 16 x 16 pixels on the General Tab. After uploading images you cannot change the Image Size on the General Tab. If you would prefer a different Image Size option, after uploading images then you must remove all the Images first. Then only you will be able to select a different Image size option and then repeat the upload process again.
The ImageList Control with more Images:
In case you are not sure what Key-Value you have entered for a particular Image then Click on the Image to display the Key-Value in the Key Text Box.
After uploading all the required images into the control they remain within the ImageList Control. If you need the same Images in some other Project you can make a copy of the ImageList Control anywhere you want or share the Form/Database with others, with the images. You can add more images this way from a new location.
After uploading all Images we need to pass the ImageList control Reference to the Tree view Control’s ImageList Property like earlier we did after uploading Images through VBA Code.

The following sample code will pass the ImageList’s Reference to the Tree View Control’s ImageList Property in new Projects.

Dim objimgList As MSComctlLib.ImageList

'Initialize ImageList Object
Set objimgList = Me.ImageList0.Object

With tvw
    .ImageList = objimgList
End With

Expanding/Collapsing Nodes with One Command Button

Open frmMenu2 Form in Design View.
Select the Collapse All Command Button, open its Click Event Procedure, and remove the Code.
Remove that Command Button itself from the Form.
Select Expand All Command Button, and open its Click Event Procedure.
Copy the following VBA Code and Paste it over-writing the existing lines, between cmdExpand_Click() . . . End Sub lines as shown below:

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 is Expand All now.
Click on the Command Button to expand all the Nodes. All the Nodes are in the expanded form now. The Caption of the Command Button changes to Collapse All.
Click on it again and all the Nodes are in a collapsed state, the Caption Text changes back to Expand All again.

Next week we will see the usage of CheckBoxes on Nodes to learn how we can identify checked Nodes and work with them.

Download ProjectMenuV22.zip