Visual Basic Concepts

Using the ImageList with Other Controls

You can use the ImageList control as a repository of images for use by other Windows Common Controls and by controls with a Picture property.

Using the ImageList with Other Windows Common Controls

The ImageList control can be used to supply images for the following controls using certain of their properties, as listed in the following table.

Windows
Common Control
Control Object Properties Settable with ImageList Images
ImageCombo control ComboItem Image and SelImage
ListView control ListItem SmallIcon and Icon properties
TreeView control Node Image and SelectedImage properties
Toolbar control Button Image property
Toolbar control Button HotImageList property
Toolbar control Button DisabledImageList property
TabStrip control Tab Image property

For More Information   For examples of using the ImageList with the ImageCombo, TreeView, ListView, Toolbar, and TabStrip controls, see the scenario topics for those controls. (For example, see "TreeView Control Scenario: Bind the TreeView to the Biblio.mdb Database.")

To use the ImageList with these controls, you must first associate the ImageList with the other control, and then assign either the Key or Index property to one of the properties listed in the table above. This can be done at design time or run time. All of the Windows Common controls, except the ListView control (discussed in this topic), have an ImageList property that can be set with the name of the ImageList control you are using.

Important   You should populate the ImageList control with images before you associate it with another control. Once you have associated an ImageList with a control, and assigned any image to a property of the control, the ImageList control will not allow you to add any more images.

To associate the ImageList control with the TreeView, TabStrip, or Toolbar control at design time

  1. Right-click on the control using images from the ImageList control and click Properties to display the Property Pages dialog box.

  2. On the General tab, select the name of the ImageList control from the ImageList box.

To associate the ImageList control at run time, you might use the following code:

' Associate an ImageList named "imlImages" with a
' TreeView control named "tvwDB."
Set tvwDB.ImageList = imlImages

Once you have associated an ImageList control with another control, you can set properties for various objects using either the Key or Index property of an image in the ImageList control. For example, the following code sets the Image property of a TreeView control's Node object to an ImageList image with the Key property "leaf."

Private Sub Form_Load()
   ' The TreeView is named "tvwData."
   ' Add a node and set its Image property.
   ' The Key value of the image is "leaf."
   tvwData.Nodes.Add , ,"1 node","Top","leaf"
End Sub

Using the ImageList Control with the ListView Control

The ListView control can use two ImageList controls simultaneously. Instead of having a single ImageList property, the ListView control has an Icons and a SmallIcons property, each of which can be associated with an ImageList control. This can be done at design time or at run time.

To associate two ImageList controls with the ListView control at design time

  1. Right-click on the ListView control and click Properties to display the Property Pages.

  2. Click the ImageLists tab.

  3. In the Normal box, select the name of an ImageList control.

  4. In the Small box, select the name of another ImageList control.

You can also assign the ImageList controls at run time with code like that shown in the following example:

' Assuming the ListView control is named "lvwDB", the
' first ImageList is named "imlSmallImages," and the
' second is named "imlImages."
Set lvwDB.SmallIcons = imlSmallImages
Set lvwDB.Icons = imlImages

The ImageList control used depends on the display mode determined in the View property of the ListView control. When the ListView control is in Icon view, it uses the images supplied by the ImageList named in the Icons property. In any of the other views (List, Report, or SmallIcon), the ListView uses the images from the ImageList named in the SmallIcons property.

For More Information   For details about the ListView control see "Using the ListView Control" later in this chapter.

Assigning ListImage Objects By Index or Key Property

After you have associated the ImageList control with one of the Windows Common Controls, you can specify a particular image using the image's Index or Key property.

For example, if you are using the ImageList with a TreeView control, the following code will assign the third ListImage object (which has an Index value of 3) to a new Node object's Image property:

' The TreeView control is named "tvwDB."
' The fifth argument of the Add method
' specifies an image by either the ListImage
' object's Index or Key property.
tvwDB.Nodes.Add , , ,"node x", 3

On the other hand, you could use the Key property to achieve the same end:

' Assuming the Key property is "open."
tvwDB.Nodes.Add , , ,"node x", "open"

Because the ListImage object's Key property must be a unique string, at run time, you can then use the Key property instead of the Index property to reference the image. This results in code that is easier to read.

Tip   Because the Key must be a unique string, using a descriptive name for each ListImage object will make your code easier to read and debug.

Using the ImageList Control with Controls Not Part of the Windows Common Controls

You can also use the ImageList as an image repository for objects which have a Picture property. These include the following:

  • CommandButton control

  • OptionButton control

  • Image control

  • PictureBox control

  • CheckBox control

  • Form object

  • Panel object (StatusBar control)

The ListImage object's Picture property returns a Picture object, which can be assigned to another control's Picture property. For example, the following code will display the third ListImage object in a PictureBox control named "picBox":

Set picBox.Picture = ImageList1.ListImages(3).Picture