TAKING A CLOSER LOOK AT THE IMAGELIST CONTROL
The ImageList control, mentioned briefly in the earlier discussion on the TabStrip control, is used with these other controls: TabStrip, ListView, ToolBar, and TreeView. These controls are examined individually and examples are given for use with the ImageList control, but some specific syntax for programming the ImageList control is called for at this time.
By itself, the ImageList control is pretty useless. However, when you use it with other controls, you can display bitmaps and icons, thereby giving your interface that professional Windows 95 graphical look.
You can load the images used in the ImageList control at design time or during runtime.
Adding Images During Design Time
To place an ImageList control on a form and load it with images at design time, follow these steps:
1. |
Open the form on which you plan to use the ImageList control in Design mode. |
2. |
From the Insert menu, choose Custom Controls. The Insert ActiveX Controls dialog appears. |
3. |
Choose the Microsoft ImageList control from the list of controls and click OK. You now have an ImageList control on the form. |
4. |
Double-click the middle of the control to open the ImageList's property sheet. The General tab is where you can choose the size of the images you're storing (see Figure 14.3). Leave the default, Custom. Figure 14.3. You can choose various sizes to display from the ImageList control. Here, the width and height have been filled in.
|
Note
When determining the bitmaps/icons to use in the ImageList control, remember that they all have to be the same size. Otherwise, an irritating error message keeps appearing.
5. |
Select the Images tab. |
6. |
Click the Insert Picture button. In the Select Picture dialog that opens, you can choose a graphic to go into the ImageList based on the graphic size you want to display. |
7. |
Repeat step 6 for each graphic you want to include. Click OK when finished. |
Note
ImageList controls store the images in memory when the form is open. The more images you have, the more memory that's used, and the longer the load time for the form.
The Current Image section of the Images page has three properties, two of which are filled automatically for you:
The Index property is the index value of the current image. This value corresponds with the Image property of the control that this ImageList is used with. This property is filled in automatically.
For example, on the WindowsCommonControls form, the TabStrip control used has pictures on each tab. Open this form, double-click the TabStrip, and then select the Tabs tab. (You can find the WindowsCommonControls form in the Chap14.mdb database, on the accompanying CD-ROM in the ExamplesChap14 folder.) If you look at the Image property at the bottom of the property sheet, it's a 1 for the first choice, ListView (see Figure 14.4).
Figure 14.4. This TabStrip uses an ImageList with the current tab pointing to the first image.
Close the TabStrip Properties sheet and locate on the form the ImageList control named ocxImageList. (Select ocxImageList from the Object pick list on the Format toolbar. If it hasn't been moved, the ocxImageList control should be on the RichText tab on the TabStrip control.) Double-click the ocxImageList control to bring up the control-specific property sheet. Then select the Images tab. You can now see all the pictures used in the TabStrip control on this form. Notice that Index 1 points to the ListView picture, as in Image 1 of the TabStrip control (see Figure 14.5).
Figure 14.5. The Index property for the ImageList control corresponds with the Image property in other controls, including TabStrip, ListView, TreeView, and ToolBar.
You can use the Key property to tie the image to the other control. Rather than specify a number, you can give a text key value that can then be used in the other control. Notice that the Key property is used in the TabStrip and ImageList controls (refer to Figures 14.4 and 14.5). For this example, it's left blank.
Tip
The Key property is useful when you're linking the images programmatically. As with using constants, they make the code easier to understand when maintaining it because you can give them meaningful names instead of numbers.
The Image Count property displays the current number of images in the ImageList. This number increments automatically as you add images.
When the ImageList is created, it's simply a matter of specifying that the list is to be used in the control. Looking again at the ocxTabStrip found on the WindowsCommonControls form, bring up the control-specific property sheet. You see the ImageList property that's used to specify the ImageList control to use with the TabStrip control. As shown again in Figure 14.6, ocxImageList is selected.
Figure 14.6. The ImageList property allows you to connect an ImageList control to the TabStrip control.
Adding Images to the ImageList Control at Runtime
Sometimes, you might prefer to load images at runtime rather than at design time—for example, when the bitmaps need to be different based on the task.
As with objects in Access, the ImageList control has a collection that's made up of other objects. In this case, the ImageList has a collection made up of ListImages. Each ListImage has its own set of properties and certain methods that can be used.
To add a ListImage to the ListImages collection, you use the Add method. Again, using the Add method with the ListImages collection is similar to the other Access object collections. (For more information on Access collections and manipulating them, see Chapter 4, “Looking at the Access Collections.”)
To see how to add items to ImageList controls, look at Listing 14.3, which was taken from the OnLoad event on the WindowsCommonControlsListView form.
Listing 14.3. Chap14.mdb: Loading an ImageList with VBA
Private Sub Form_Load()
'-- Use a dummy object variable that will be thrown away.
Dim objDummy As Object
'-- ListView Variable
Dim ocxListV As Object
'-- Create a reference to the control
Set ocxListV = Me!ocxListView
'-- Load the images into the image list controls
Set objDummy = Me!ocxImageList1.ListImages.Add(, , _
LoadPicture(gsAppPath & "Graphicsigvid.ico"))
Set objDummy = Me!ocxImageList2.ListImages.Add(, , _
LoadPicture(gsAppPath & "Graphicsltlvid.bmp"))
' Store the image lists into the ListView control's various
' picture types
ocxListV.Icons = Me!ocxImageList1.Object
ocxListV.SmallIcons = Me!ocxImageList2.Object
End Sub
|
Listing 14.3 uses object variables. ObjDummy isn't used to store anything needed in this case, thus the name. A reference to the new ListImages item is created, but it's not needed in this example. The other object variable, objListV, creates a reference to the ListView object that's being manipulated.
These code lines add single images to two different ImageList controls—one a bitmap and the other an icon:
'-- Load the images into the image list controls Set objDummy = Me!ocxImageList1.ListImages.Add(, , _ LoadPicture(gsAppPath &"Graphicsigvid.ico")) Set objDummy = Me!ocxImageList2.ListImages.Add(, , LoadPicture(gsAppPath & "Graphicsltlvid.bmp"))
You need to use two different ImageList controls. A single ImageList control can contain only images of the same size. The ListView control, however, may use different-size controls, based on the view chosen. (For more information on the ListView control, see the next section, “Emulating the Windows 95 Explorer with the ListView Control.”)
After the images are added to the ImageList controls, the code then connects the two ImageLists to the properties in the ListView control:
ocxListV.Icons = Me!ocxImageList1.Object ocxListV.SmallIcons = Me!ocxImageList2.Object
The ListView can now use the images. Figure 14.7 shows the large bitmaps; Figure 14.8 shows the same form displaying a detail view.
Figure 14.7. Here, the ListView control is using ocxImageList1 to display images in icon mode.
Figure 14.8. Here, the ListView control uses ocxImageList2 to display images in report view.
Note
The images used in the preceding example could easily have been assigned at design time. This example was strictly for demonstrative purposes only.
You can use the ImageList control with various other controls in numerous other ways. Besides reading about them in the following sections, you can see the ImageList control used in the forms WindowsCommonControls, WindowsCommonControlsListView, WindowsCommonControlsMultiRowTabs, WindowsCommonControlsToolBar, and WindowsCommonControlsTreeView.