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

 

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read