The Size of the Images

You can use a larger size:

• The maximum length a picture can have is 256 pixels
• The maximum height the picture can have is 256 pixels

To create or design your bitmaps, you can use either the bitmap designer of Microsoft Visual Studio or you can use a more advanced external application to prepare the pictures. Although the pictures used in an image list are usually square (16x16, 32x32, 48x48, 96x96, etc), you can use a different length and a different height but, if you are creating individual pictures, they should each have the same size (same length and same height).

Instead of using different pictures, you can create one long picture whose sections would be used to identify each picture. There is no particular way you must design the long picture and there is no real rule about its dimensions: the size would become an issue when it is time to use the picture(s). Alternatively, when creating the picture, if it will include the different pictures that would be considered in the list, make sure you know where each sectional picture starts and where it ends. Here is an example:

In this cases, there is one long picture made of different sections and each section holds a particular picture. When creating this type, you must know the size that holds each particular picture.

After preparing the pictures, you can get ready to create the image list. If you want, you can specify the size of each picture before actually creating the list. To support this, the ImageList class is equipped with a property named ImageSize. The ImageSize property is of type Size. You can use it to specify the size of each picture. Here is an example:

Public Sub InitializeComponent()

            lstImages = New ImageList()
            lstImages.ImageSize = New Size(256, 256)

End Sub

If the image list has been created already, to find out the size of the picture, you can get the value of the ImageSize property.

1. Copy each of the following pictures and paste them in a directory or folder of your computer
    
2. Under the form, click lstPictures and, in the Properties window, set the ImageSize to 250, 165

Before creating the list of images, you must specify the number of bits that will be used to specify the color of each pixel. This information is referred to as the color depth. To support it, the ImageList class is equipped with a property named ColorDepth. The possible values are Depth4Bit, Depth8Bit, Depth16Bit, Depth24Bit, and Depth32Bit. The default value is Depth8Bit.

• Under the form, click lstPictures and, in the Properties window, set the ColorDeph to Depth32Bit

After preparing the pictures, to visually create the list of images, under the form, click the image list control to select it. Then:

• Click the arrow button on the control . Then click Choose Images
   
  
• In the Properties window, click the ellipsis button of the Images field

This would open the Images Collection Editor. To add a picture, you can click the Add button, locate a picture and select it. You can continue doing this until you have selected all necessary pictures. Here is an example:

After selecting the pictures, you can click OK.

To assist you with creating the list of images, the ImageList class is equipped with a property named Images, which is a collection. The ImageList.Images property is of type ImageCollection. The ImageCollection class implements the IList, the ICollection, and the IEnumerable interfaces.

Using the ImageCollection class through the Images property, you can add the necessary icons or pictures one at a time. To help you with this, the ImageCollection class implements the Add() method. If you are creating a list of icons, you can call the following version of the Add() method:

Public Sub Add(value As Icon)

If you are creating a list of pictures, you can call the following version of the Add() method:

Public Sub Add(value As Image)

Here is an example:

Public Sub InitializeComponent()

            lstImages = New ImageList()
            lstImages.ImageSize = New Size(256, 256)

            Dim img1 As Image = Image.FromFile("E:\\Programs\\image1.jpg")
            lstImages.Images.Add(img1)
            Dim img2 As Image = Image.FromFile("E:\\Programs\\Image2.jpg")
            lstImages.Images.Add(img2)

        End Sub

Instead of adding one picture at a time, you can first store them in an array. To add an array of pictures, the ImageCollection class provides a method named AddRange and whose syntax is:

public void AddRange(Image[] images)

1. Under the form, click lstPictures
2. In the Properties window, click Images and click the ellipsis button
3. In the Images Collection Editor, click Add, locate one of the pictures you had saved, select it, and click Open
4. Do the same to select the other pictures
    
   
5. Click OK

After creating an image list, you can use it in your application. As it name implies, an image list is just a collection of images. The control that holds this collection does not define why or when the images would be used. Some Windows controls, such as the list view, the tab control or the toolbar, use them. Most of the time, you will know when a certain control needs an image list and how to use it. Otherwise, you can use the pictures in an image list in various ways. For example, you can use those pictures like any others, such as to display one on a form.

To support the ability to display the pictures of an image list, the ImageList class is equipped with a method named Draw. When calling this method, because the image list doesn't know where it would be used, and because the target control would not define where the picture is coming from, the primary argument to this method is the platform on which to display the picture. This platform is a Graphics object. Once you have decided on the receiving graphics, you must specified the location where the picture would be positioned. You have two primary options. You can specify the location by the left and top coordinates. In this case, you would use the following version of the Draw() method:

Public Sub Draw(g As Graphics, x As Integer, y As Integer, index As Integer)

Alternatively, you can specify the location by a Point value. In this case, you would use the following version of the method:

Public Sub Draw(g As Graphics, pt As Point, index As Integer)

In both cases, the last argument is the index of the desired picture within the collection.

1. Under the form, double-click timer1 and change the file as follows:
   

   Public Class Form1
   
       Private index As Integer
   
       Private Sub Timer1_Tick(ByVal sender As System.Object, _
                               ByVal e As System.EventArgs) _
                               Handles Timer1.Tick
           If index < 6 Then
               lstPictures.Draw(pbxViewer.CreateGraphics(), _
                                          pbxViewer.Left, _
                                     pbxViewer.Top, _
                                     index)
               index += 1
           Else
               index = 0
           End If
       End Sub
   End Class

2. Execute the application to see the result
    
   
3. Close the form and return to your programming environment

When drawing the pictures of an image list, you can designate one color that the compiler will ignore or "see through". This is referred to as the transparent color. To support this, the ImageList class is equipped with a property named TransparentColor, which is of type Color.