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

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

class CTreeCtrlX : public CTreeCtrl
{
   // Construction
   public:
       CTreeCtrlX();

   // Attributes
   public:
       CImageList m_image;
          :
          :
          :
}

Step 3: Create and set the image list

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

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.