1. Technology

ImageList: Project a Good Image When Using VB.NET

In fact, project a whole list of them!


Updated September 14, 2008

The ImageList component has been in Visual Basic since VB6 days. Like everything in .NET, it's changed a bit, however.

The main advantage of using the ImageList is that you can treat the images as a collection. The major design-time alternative is to use Resources instead. Doing this way, you would add all of your graphics into the Resources tab of the project properties. You would have to work with them individually, however, using code that looks like this:

PictureBox.Image = My.Resources.Image0

Another advantage of the ImageList is that the images are added into your project assembly for easy distribution and fast execution. ImageList also works seamlessly with other VB.NET controls such as TreeView, ListView, TabStrip, and ImageCombo. And TabControl. To demonstrate how that works, let's add a series of images from an ImageList to a TabControl.

The first thing you need to do is add an ImageList to your project from the Toolbox. Since you will be using the ImageList later in the project, it makes sense to do any initialization first in your code. VB.NET has a smart tag based dialog that gives you designer support for adding images into the ImageList. When you click "Choose Images" the Image Collection Editor dialog opens. In the example below, I've added three images that I named "Mable," "Roger," and "George" just to demonstrate the way names work.

Click Here to display the illustration
Click the Back button on your browser to return

Selecting a whole group of images and adding them at one time to the ImageList is a real timesaver. Notice that there is an image size and bit depth that applies to the whole collection. You don't have to have the same size and bit depth (or even graphic type). VB.NET will convert the image when it's used.

Now add a TabControl component. This component is designed to work with a single ImageList. Find the ImageList property in the TabControl property list and fill in the name of the ImageList component that you just added. This allows you to use either the ImageIndex or the ImageKey to select individual images for the different tabs. Both are shown below.

Click Here to display the illustration
Click the Back button on your browser to return

Just for extra interest, I also made the background of each image a solid green and assigned that color as the TransparentColor in the ImageList.

But ImageList can be used for a lot more than that. For example, you could produce a simple animation for your project by simply adding a Timer and a loop. This code does the trick:

Static imageNumber As Integer = 0
imageNumber = (imageNumber + 1) Mod myImageList.Images.Count
PictureBox.Image = myImageList.Images(imageNumber)

If you want to add a moving logo to your project, this is a nice alternative to animated GIF or some other technique. The technique is illustrated in the downloadable project code below with the About Visual Basic logo.

Another trick that you might want to do is use the images stored in your ImageList as icons. Doing this takes a bit of conversion, but once you know what code to use, it's relatively easy to do. This code takes one of the images and assigns it as the icon for the Form in the project:

Me.Icon = _
   Icon.FromHandle( _
   CType(tabImageList.Images(0), _

The entire project where this code is demonstrated can be downloaded here.

  1. About.com
  2. Technology
  3. Visual Basic
  4. Using VB.NET
  5. Using ImageList in Visual Basic .NET

©2014 About.com. All rights reserved.