Setting up the item images

The tree view control can display two images for each item in the control.
The primary image is generally known as the item image and is immediately
to the left of the item label. The secondary image is the state image and
is to the left of the item image.

To setup the item images, you have to use the SetImageList() function.
One of the argument this function requires is a pointer to an image list.
You can create the image list from a bitmap that has all the images or
you can create it by adding individual icons. I find using a bitmap easier,
besides when using a bitmap you are not restricted to a square shape and
just a few sizes as happens when using icons.

 

Step 1: Create the bitmap

Add a bitmap resource in the resource editor that contains all the icons.

Here is an example below. The individual icons in this bitmap are 13

×

13

pixels, but you may choose a different size and it need not be a square.

Step 2: Add a member variable to hold the image list

The member variable is usually added to the class that is responsible for

setting up the tree view control. This would usually be the CView derivative

or a CDialog derivative. You can also add the member variable to the sub-class

of CTreeCtrl which is what I recommend.

class CTreeCtrlX : public CTreeCtrl
{
   // Construction
   public:
       CTreeCtrlX();
   // Attributes
   public:
       CImageList m_image;
          :
          :
          :
}

Step 3: Create and set the image list

Call the Create() function of the image object with the resource id of

the bitmap we created in step 1 and the width of each icon. The height

of the icons is automatically set to the height of the bitmap. The third

argument required by the Create() function represents the number of new

images the resized image list can contain. Since we are creating the image

list from a bitmap, we would normally not add any more images at runtime

so we let this value be one. The last argument is the mask color. That

is, all the pixels of this color will behave as a transparent color. Since

normally the window color is white, we set the mask color to white.

Once the image list has been created, the tree view control has to be
instructed to use it. We do that by calling the SetImageList() function.
The following statement usually belongs in the OnInitDialog() function
or the OnInitialUpdate() function.

        m_tree.m_image.Create( IDB_OUTLINE, 13, 1, RGB(255,255,255) );
        m_tree.SetImageList( &(m_tree.m_image), TVSIL_NORMAL );

Step 4: Specify icons for the items

Once an image list has been associated with the tree view control, the

control displays an icon to the left of the item label. This space matches

the dimension of the icons in the image list. When inserting an item into

the treeview control, you can specify which icon to use. You can also change

the icon at later time. The InsertItem() and SetItemImage() functions,

both require two different values for the image. One of the image to be

used when the item is not selected, and the other image to be used when

the item is selected. Both these values can be the same.

One common expectation a programmer new to this control has, is that,
the control should automatically support an icon for when the item is collapsed
and another for when the item is expanded. However, as we discussed in
the previous paragraph the two different icons are for the items selection
state. This will make more sense when you realize that the tree view control
was primarily designed for the Windows Explorer and in Explorer when you
select a folder in the tree view, it does open it up in the list view.