Last week we have created Access Project Menu on TreeView Control and I hope you were able to create it on your own and run it, in your Version of Microsoft Access. There is a Demo Database, created under Access 2007 and attached it to the following Post for download. The Link of that Article is given below:
You may download the database so that you can add the new VBA Code pertains to the above topic and to try out in the same Database.
This is the continuation of the earlier Article and we need the same Demo Access Menu Project to assign Images to Nodes and learn.
MS-Office Version Issues for TreeView Control.
If you had any issues in running the Demo Database in your version of Microsoft Access then you may refer the following link for some corrective actions, which may be helpful to solve your issue:
Sample Demo Image.
When we complete our Access Project Menu, with Images on Nodes will look like the Image given below:
Optionally, we can assign two Images on each Node. One Image is displayed in normal state and different one displays when the Node receives a Click.
Here, we have assigned the Root-level Node with the Closed-Folder Image for normal view and the Open-Folder like Image will appear when the Node receives Click.
Similarly, the Child-Nodes have an Arrow-head Image, facing to the left-side, in normal view and the Arrow-head Image, pointing to the right, displayed when the Node is selected.
You can use the same Image for both (normal and for Click Event) so that the same image stays without any change in both instances. If you use either one of these two parameters, say use the Normal View parameter only and omit the second one, then the Node click will not display any image.
Ideal Image Sizes for Nodes.
The Image format can be of any common image type, like .bmp, .jpg, .jpeg, .ico, .tiff etc. You can find plenty of Icon images by searching in Google. Ideal Image size, that looks good on the Node, is 16 x 16 pixels. The ImageList Control have the preset Image-size values like 16 x 16, 32 x 32, 48 x 48 pixels and Custom Size Options to choose from.
Higher Image Size Options 32 x 32 or 48 x 48 Pixels will display larger images and occupies more space on the Tree View Display.
Node Graphics with Different Image Sizes.
The following sample image below shows 32 x 32 Pixels size Icon:
TreeView Control with Node Image Size 48 x 48 Pixels:
If you prefer to use Custom Image Option then the actual image size provided will be displayed without change.
Image Quality and Size Considerations.
We have used Image Size 16 x 16 in the first sample Image above. If we upload a Custom Image size, larger than 48 x 48, like 512 x 512 Pixels or more and use the Option 16 x 16 it reduces the size to the resolution specified but the clarity of the image will be reduced or distorted.
The best approach is to find small images with good quality, that can fit into the 16 x 16 pixels resolution (canvas size). It works with both 16 x 16 pixel or custom settings, without loosing the quality of the image.
You may experiment with different image types, size and quality, do trial runs before finalizing. You may use MS-Paint, or whatever Image editing programs you have and create/Import and edit Images to your liking.
Before proceeding further create four or more small images and save them in the database folder. Upload them into the ImageList control and try them on the Tree View Control, by changing the Nodes Add() method’s last two parameters.
You may Download the Demo Database: ProjectMenu.accdb, from the earlier Article Page.
Prepare for the Trial Run.
- Open the ProjectMenu.accdb Database.
- Make a Copy of the Form frmMenu and name it as frmMenu2 and keep it for later use.
- Open frmMenu in Design View.
- Select ActiveX Controls Option, from the Controls Button Group, and find the file Microsoft ImageList Control and click OK to insert an ImageList control, drag and place it anywhere in the empty area on the Form.
Form with ImageList Control highlighted in Design View is given below for reference:
- Display it’s Property Sheet and change the Name Property value to ImageList0.
- Right-Click on the ImageList Control and highlight the ImageListCtrl Object Option in the displayed Menu and Select Properties to display the Control’s Image settings Property Sheet.
- Select 16 x 16 image size Radio Button on the General Tab, indicating that we need the smallest of the three image sizes for the Node. The setting here takes effect on all Images we add to the ImageList Control.
- Click Apply Command Button and then the OK Button to close the Property Sheet.
First, we must add required images to the ImageList Control before we are able to use them in Tree View Control.
Image Loading Approaches.
There is an easy way and hard way to Add Images to the ImageList Control. The easy way works without VBA Code and the other method needs VBA. We will go by the hard way first with VBA and then try the easy way, so you will know the difference, when to use Code and when without Code. VBA based method is good for experimenting, with different images, sizes before finalizing what looks good on the Node.
We will use the ImageList Object’s Add() Method to add images to the Control, like we did for Tree View data to Node. This way we add several images to the ImageList Control and use at run-time.
The Syntax of Add() Method of ImageList control is as given below:
ObjImgList.ListImages.Add([Index],[Key],[Picture]) As ListImage
The first two Parameters are optional. The third argument uses the LoadPicture() Function to open images from the specified location and add it to the list. The function parameter is the Image File PathName. All the image files are added, one after the other to the ImageList Object, in the Order they are placed. The Index values are automatically generated, in consecutive numbers starting from 1 (one) onwards.
After adding all the images to the ImageList Object, the Object reference must be passed over to the Tree View Control’s ImageList Property.
The VBA Code.
The sample VBA Code for loading images for our Menu above is given below:
Dim tvw As MSComctlLib.TreeView
Const KeyPrfx As String = "X"
Dim objimgList As MSComctlLib.ImageList
Private Sub CreateImageList()
Dim strPath As String
'TreeView Object reference set in tvw
Set tvw = Me.TreeView0.Object
'Clear the Tree View Nodes, if any.
'ImageList Object reference set in objimglist
Set objimgList = Me.ImageList0.Object
strPath = CurrentProject.Path & ""
'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")
.ImageList = objimgList
Once we are through with this procedure it is easy to add the images to the Tree View Nodes.
TreeView Nodes Add() Method and Image Parameters.
The Tree View Object Add() Method’s last two parameters are for the Node Images. Let us look at the TreeView Object Nodes Add() method’s Syntax one more time:
tvw.Nodes.Add([Relative],[Relationship],[Key],[Text],[Image],[SelectedImage]) As Node
The last two parameters are for Node Images. The first Image parameter is for Node’s normal view and the second image displayed when the Node selected. The [Image] and [SelectedImage] values can be either the ImageList Index Number or the Key Value.
The CreateImageList() sub-routine adds five images to the ImageList Control . Out of the first two Images, the first one (FolderClose) is for Root-level Node’s Normal View and the second one (FolderOpen) image is displayed when the root-level Node is selected.
The last two Images are used for the Child Nodes normal view and for the Click Event action.
The ArrowHead image is ignored.
FormLoad() Event Procedure with Changes.
The modified FormLoad() Event Procedure is given below:
Private Sub Form_Load()
Dim db As Database
Dim rst As Recordset
Dim nodKey As String
Dim PKey As String
Dim strText As String
Dim strSQL As String
Dim tmpNod As MSComctlLib.Node
Dim Typ As Variant
'1. Initializes TreeView Control Object
'2. Creates ImageList in ImageListObject
.Style = tvwTreelinesPlusMinusPictureText
.LineStyle = tvwRootLines
.LabelEdit = tvwManual
.Font.Name = "Verdana"
.Indentation = 400
strSQL = "SELECT ID, Desc, PID, Type,Macro,Form,Report FROM Menu;"
Set db = CurrentDb
Set rst = db.OpenRecordset(strSQL, dbOpenDynaset)
Do While Not rst.EOF And Not rst.BOF
If Nz(rst!PID, "") = "" Then
nodKey = KeyPrfx & CStr(rst!ID)
strText = rst!desc
Set tmpNod = tvw.Nodes.Add(, , nodKey, strText, "FolderClose", "FolderOpen")
'Root-Level Node Description in Bold letters
.Bold = True
PKey = KeyPrfx & CStr(rst!PID)
nodKey = KeyPrfx & CStr(rst!ID)
strText = rst!desc
Set tmpNod = tvw.Nodes.Add(PKey, tvwChild, nodKey, strText, "LeftArrow", "RightArrow")
'Check for the presense of Type Code
If Nz(rst!Type, 0) > 0 Then
Typ = rst!Type
Select Case Typ
Case 1 'save type Code & Form Name in Node Tag Property
tmpNod.Tag = Typ & rst!Form
Case 2 'save type Code & Report Name in Node Tag Property
tmpNod.Tag = Typ & rst!Report
Case 3 'save type Code & Macro Name in Node Tag Property
tmpNod.Tag = Typ & rst!Macro
Set rst = Nothing
Set db = Nothing
The Add() method line of TreeView Nodes is highlighted on the VBA Code above, where the Image Key String Parameter Values are inserted for both normal and Click Views of the Images.
Alternatively you may use Image Index Values 1, 2 for the Root-level Nodes and Index Numbers 4, 5 for Child Nodes.
You may change the Values and try out yourself.
A new Demo Database with all the changes and additional Image Loading procedure is attached for you to Download.
Note: Create four new images, as explained above, for your own trial runs and change the Images Names and location Addresses in the above Code, if you save the images in a different location.
Next, we will try out the easy method with the Images and I will share my Images to you.
Sample Database for Download.