Setting up state images


As you are already aware, the tree view control can display two images for each item. Each of these two images belong in different image list controls that have to be associated with the tree control. Whereas, an item can have upto 256 item images, it can only have 15 state images. Nevertheless, the programming for the state images is very similar to the programming for item images.

An image list has to be created before it can be associated with the tree view control. You can create the image list from a single bitmap, horizontally laid out to contain all the images or you can add individual icons to the image list.

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 13x13 pixels, but you may choose a different size and it need not be a square. The first image in the list is not used.

 

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_imageState ;
    :
    :
    :

}

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. Note that in the call to SetImageList(), the second argument is TVSIL_STATE.
 

        m_tree.m_imageState.Create( IDB_STATE, 13, 1, RGB(255,255,255) );
        m_tree.SetImageList( &(m_tree.m_imageState), TVSIL_STATE );

Step 4: Specify state icons for the items

Once an image list has been associated with the tree view control, you can instruct the tree view control to the use the state image you want when inserting an item to the control. You can also use the SetItemState() image function. In both the cases you have to use the macro INDEXTOSTATEIMAGEMASK(). This macro essentially rearranges the bits of the index value to be compatible with what the tree view control expects. To remove the state image for an item, use the index zero. Here are example usages
 
        // Using TV_INSERTSTRUCT
        CString str = "xyzASDFqwerZCV";
        TV_INSERTSTRUCT tv_is;
        tv_is.hParent = parent ? parent : TVI_ROOT;
        tv_is.hInsertAfter = TVI_LAST ;
        tv_is.item.mask = TVIF_TEXT | TVIF_STATE;
        tv_is.item.stateMask = TVIS_STATEIMAGEMASK;
        tv_is.item.state = INDEXTOSTATEIMAGEMASK( 1 );
        tv_is.item.pszText = str.GetBuffer(1);
        tv_is.item.cchTextMax = str.GetLength();
        hItem = InsertItem( &tv_is );
        str.ReleaseBuffer();


        // Using SetItemState
        SetItemState( hItem, INDEXTOSTATEIMAGEMASK(1), TVIS_STATEIMAGEMASK );