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 13

×

13

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 );