Assigning Images to Tree View Nodes-2

Introduction.

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

• Microsoft Tree View Control Tutorial
• Creating Access Menu with Tree View Control
• Assigning Images to Tree View Nodes

This Post is the continuation of Last week’s episode.

Last week we have created 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 aide of both these Controls we could create a beautiful Microsoft Access Project Menu, having menu items in an 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.

Image may be NSFW.
Clik here to view.

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 it’s Child Nodes from view.  When the User clicks on the Root-level Node the FolderOpen image appears and exposes it’s 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 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 is highlighted on the Design View of the above frmMenu Form is given below for reference:

Image may be NSFW.
Clik here to view.

The ImageList Control Property Sheet.

The ImageList’s Property Sheet Image is given below for reference:

Image may be NSFW.
Clik here to view.

Review of Last Week’s Exercise and Preparations.

Last Week we have 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 have 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 KeyText 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 it to the ImageList Control, without any VBA Code.

Besides that you can share the ImageList Control to other Projects, by simply Copy and Pasting the ImageList Control to other 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.

1. Open the form frmMenu2 in Design View.
2. Insert Microsoft ImageList Control from the Activex Controls List, somewhere on the empty space on frmMenu2 Form.
3. Change it’s NameProperty value to ImageList0.
4. Right-Click on the Image List Control, highlight ImageListCtrl Object Option, on the displayed Menu, and select Properties.
5. 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 into the Images Tab.
6. Select the Images Tab. The Properties Images Tab looks like the following Image:
   Image may be NSFW.
   Clik here to view.
7. Click on the Insert Picture Command Button, find the folder_closed sample image (if you have one or select the image you have prepared earlier), you have created for trial run last week, select it and Click on OpenCommand Button.

   The ImageList Control will look like the image given below, after inserting the selected image.

   Image may be NSFW.
   Clik here to view.
8. Three Text Box controls: Index, Key and Tag are now enabled.  The Index control have the Index Value 1 inserted into it automatically.
9. Enter the Text folder_close orwhatever Key value you prefer to use in the Add() Method’s  parameters of Tree View control, in the Key Text Box control.  It’s data Type should be of String Type and unique among all the image Key Values. 
10. The Tag Property can be used to record some useful information, like the Path Name of the Image.
11. 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.
12. If you would like to remove some image from the control then select that Image and click Remove Picture.
13. 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 to repeat the upload process again.

    The ImageList Control with more Images:

    Image may be NSFW.
    Clik here to view.
14. 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. 
15. 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 to anywhere you want or share the Form/Database to others, with the images. You can add more images this way from new location.
16. 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.
17. 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

1. Open frmMenu2 Form in Design View.
2. Select Collapse All Command Button, open it’s Click Event Procedure and remove the Code.
3. Remove that Command Button itself from the Form.
4. Select Expand All Command Button, open it’s Click Event Procedure.
5. 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

1. Save and Open frmMenu2 in normal view.
2. The Command Button Caption is Expand All now. 
3. Click on the Command Button to expand all the Nodes.  All the Nodes are in expanded form now. The Caption of the Command Button changes to Collapse All.
4. Click on it again and all the Nodes are in collapsed state, the Caption Text changes back to Expand All again.

Next Week we will see the usage of Check Boxes on Nodes to learn how we can identify checked Nodes and work with it.

Image may be NSFW.
Clik here to view.Download ProjectMenuV22.zip

CLASS MODULE

1. MS-Access Class Module and VBA
2. MS-Access VBA Class Object and Arrays
3. MS-Access Base Class and Derived Objects
4. VBA-Base Class and Derived Object-2
5. Base Class and Derived Object Variants
6. MS-Access Recordset and Class Module
7. Access Class Module and Wrapper Classes
8. Wrapper Class Functionality

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.