Learn Microsoft Access Advanced Programming Techniques, Tips and Tricks.

Assigning Images to Tree View Nodes

Introduction.

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.

  1. Open the ProjectMenu.accdb Database.
  2. Make a Copy of the Form frmMenu and name it as frmMenu2 and keep it for later use.
  3. Open frmMenu in Design View.
  4. 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:

  5. Display it’s Property Sheet and change the Name Property value to ImageList0.
  6. 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.
  7. 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.
  8. 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.
tvw.Nodes.Clear

'ImageList Object reference set in objimglist
Set objimgList = Me.ImageList0.Object

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

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
CreateImageList 

With tvw
    .Style = tvwTreelinesPlusMinusPictureText
    .LineStyle = tvwRootLines
    .LabelEdit = tvwManual
    .Font.Name = "Verdana"
    .Indentation = 400
End With

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
      With tmpNod
        .Bold = True
      End With
    Else
        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
            End Select
        End If
        
    End If
    rst.MoveNext
Loop
rst.Close

Set rst = Nothing
Set db = Nothing

End Sub

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.

  1. MS-Access and E-Mail
  2. Invoke Word- Mail Merge from Access2007
  3. Automated Email Alerts
Share:

No comments:

Post a Comment

Comments subject to moderation before publishing.

MS-Access Tips on your Finger-Tip

  • Download Android App 'MSA Guru' Version of LEARN MS-ACCESS TIPS AND TRICKS from Google Play Store.

Want to Post Free Ads on the Web


Translate



PageRank
Subscribe in a reader
Your email address:

Delivered by FeedBurner

Search

Popular Posts

Blog Archive

Powered by Blogger.

Follow by Email

Labels

Forms Functions How Tos MS-Access Security Reports msaccess forms Animations msaccess animation Utilities msaccess controls Access and Internet MS-Access Scurity MS-Access and Internet Class Module External Links Queries Array msaccess reports Accesstips WithEvents msaccess tips Downloads Menus and Toolbars Objects Collection Object MsaccessLinks Process Controls Art Work Property msaccess How Tos Dictionary Object Graph Charts Query VBA msaccessQuery Calculation Combo Boxes Event List Boxes Command Buttons Controls Data Emails and Alerts Form Custom Functions Custom Wizards DOS Commands Data Type Key Object Reference TreeView Control ms-access functions msaccess functions msaccess graphs msaccess reporttricks Command Button Report msaccess menus msaccessprocess security advanced Access Security Add Auto-Number Field Type Form Instances ImageList Control Item Macros Menus RaiseEvent Recordset Top Values Variables Wrapper Classes msaccess email progressmeter Access2007 Copy Excel Export Expression Fields ImageList Join ListView Control Methods Microsoft Nodes Numbering System Records Security Split SubForm Table Tables Time Difference Utility Workgroup database function msaccess wizards tutorial Access Emails and Alerts Access Fields Access How Tos Access Mail Merge Access2003 Accounting Year Action Animation Attachment Binary Numbers Bookmarks Budgeting ChDir Color Palette Common Controls Conditional Formatting Data Filtering Database Records Defining Pages Diagram Disk Dynamic Lookup Error Handler External Filter Formatting Groups Hexadecimal Numbers Import Labels List Logo Macro Mail Merge Main Form Memo Monitoring Octal Numbers Operating System Paste Primary-Key Product Rank Reading Remove Rich Text Sequence SetFocus Summary Tab-Page Union Query User Users Water-Mark Word automatically commands hyperlinks iSeries Date iif ms-access msaccess msaccess alerts pdf files reference restore switch text toolbar updating upload vba code