Virtual Developer Workshop: Containerized Development with Docker

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

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

        // Using SetItemState


  • What if you need more than 15 state images?

    Posted by Legacy on 12/02/2002 08:00am

    Originally posted by: Pierre

    Is there some way to do this without the ownerdraw options

  • specifying state image in the tree view

    Posted by Legacy on 09/20/2001 07:00am

    Originally posted by: deepak jain

    it's a good example, if u could elaborate more on state, stagemask and mask members of item structure, it'll be good.

  • How to determine whether a node is expanded or not?

    Posted by Legacy on 07/05/2001 07:00am

    Originally posted by: Angshuman Chatterjee

    I want to examine whether a node in the tree control is presently expanded on not (i.e. it has the '-' sign infront of its label. I cannot do it with
    The problem is that the return valu of GetItemState is the combination of the flags TVIS_EXPANDEDONCE and TVIS_EXPANDED. How can I test for ONLY TVIS_EXPANDED?

  • Don't forget TVS_CHECKBOXES

    Posted by Legacy on 05/24/2000 07:00am

    Originally posted by: Peter Hahm

    You forgot to mention that it is usefull to create the treecontrol with a specific style constant, TVS_CHECKBOXES.


    • Thanks !

      Posted by Trimoulin on 05/23/2012 07:50am

      This remark solves my problem, thanks a lot :-)

  • Changing the Overlay Image

    Posted by Legacy on 12/05/1999 08:00am

    Originally posted by: Mustafa Zein

    Yiu changed the State Image here, could you please show a complete example shows how to add an overlay image, changing/removing it at runtime!!! thank you..

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date