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

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.

    

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_image;
          :
          :
          :
}

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.

        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

Once an image list has been associated with the tree view control, the control displays an icon to the left of the item label. This space matches the dimension of the icons in the image list. When inserting an item into the treeview control, you can specify which icon to use. You can also change the icon at later time. The InsertItem() and SetItemImage() functions, both require two different values for the image. One of the image to be used when the item is not selected, and the other image to be used when the item is selected. Both these values can be the same.

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.



Comments

  • Beginner's Level

    Posted by Legacy on 01/16/2004 12:00am

    Originally posted by: Feroz

    Good explanation for beginners. Let it be a little advanced.

    Reply
  • This is GREAT

    Posted by Legacy on 08/11/2003 12:00am

    Originally posted by: Binayak

    Hi,

    Thanks for this tutorial. This is what I needed.

    Cheers

    Reply
  • Bitmap

    Posted by Legacy on 05/19/2003 12:00am

    Originally posted by: Simoncio

    Thank you very much for you article.

    I have I little question:
    I have a TreeView and each Item is represented
    with a "blue circle" (or a "red circle") and a text.
    So I have my bitmap in the resources, with two different
    images (red/blue circles).

    Now I have to use up to 256 coloured circle images...but
    I don't want to put in my resources 256 different circles...I think this is stupid!

    How can I do?
    The best way, I think, is to use only 1 image and colour
    it...but how ?

    Thanks !

    S.

    Reply
  • Thank you for your articles.

    Posted by Legacy on 11/19/2002 12:00am

    Originally posted by: Mark Fine

    Zafir,
    Thanks a lot for your articles.

    Regards,
    Mark.

    Reply
  • Still Doesn't Work

    Posted by Legacy on 05/09/2002 12:00am

    Originally posted by: Joni

    I've done exactly what was written on the tutorial, still no pictures appear

    Is it necessary to create the CTreeCtrlX class or could i just create an instance of an imagelist on the
    OnInitialUpdate() function.

    My code goes like this:

    :
    :
    :
    CImagelist Images;
    Images.Create(IDB_IMAGES, 16, 1, RGB(255,255,255));
    m_tree.SetImageList(&Images, TVIS_NORMAL);

    m_tree.InsertItem("Item1", m_tree.GetRootItem(), TVI_LAST);
    :
    :
    :

    Is there something wrong with my code? please help me!!!

    Reply
  • Help me !! in putting the icon of tree in runtime

    Posted by Legacy on 08/06/2000 12:00am

    Originally posted by: monther

    hello ,
    please..if you can help me in putting the icon of the tree view item in the run time also,if we can else changing it without reloading >because i work on the database appl. and it has big records to reload<.....
    thanks.

    Reply
  • 1 Bitmap in the list

    Posted by Legacy on 03/26/2000 12:00am

    Originally posted by: Igor

    That is nice when you have many images with many items. What happen if you will have 1 bitmap with 1 item that should be associated with? I have VC++5.0 && Win98. Item is inserted but no bitmap!!!!!

    Reply
  • Inserting a second image right after an ownerdraw checkbox

    Posted by Legacy on 12/16/1999 12:00am

    Originally posted by: mimouni

    im trying to set up a tree with an ownerdraw checkbox
    i cant add another image near the checkbox
    when i associate an image state with my tree i use
    TVSIL_STATE for the states
    m_tree.SetImageList( &(m_tree.m_imageState), TVSIL_STATE);
    for the other image if i accociate another bitmap like
    m_tree.SetImageList( &(m_tree.m_imageBmp), TVSIL_NORMAL);

    i get the system checkboxes and the images but not my ownerdraw checkboxes

    thanks

    Reply
  • DirectDraw and MFC: fatal error C1010 in ddutil.cpp

    Posted by Legacy on 10/21/1999 12:00am

    Originally posted by: Glen Bean

    Does anybody know anything about this error? The MSDN library's documentation on it is small and hard for me to understand. I'm working with a dialog-based project created with the MFC AppWizard. I have ddutil.h included at the top of a CDialog-derived class' file. I've had to add ddutil.cpp to the workspace to avoid a LNK2001 error on certain functions, but I can't get around this bug. I haven't had any problems with non-MFC programs. Thanks...

    Reply
  • changing styles on the fly

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

    Originally posted by: debuke

    is there a way to set the ILC_COLOR flag on the fly, vice on creation?

    Reply
  • Loading, Please Wait ...

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

Top White Papers and Webcasts

  • Live Event Date: September 10, 2014 @ 11:00 a.m. ET / 8:00 a.m. PT Modern mobile applications connect systems-of-engagement (mobile apps) with systems-of-record (traditional IT) to deliver new and innovative business value. But the lifecycle for development of mobile apps is also new and different. Emerging trends in mobile development call for faster delivery of incremental features, coupled with feedback from the users of the app "in the wild". This loop of continuous delivery and continuous feedback is …

  • Java developers know that testing code changes can be a huge pain, and waiting for an application to redeploy after a code fix can take an eternity. Wouldn't it be great if you could see your code changes immediately, fine-tune, debug, explore and deploy code without waiting for ages? In this white paper, find out how that's possible with a Java plugin that drastically changes the way you develop, test and run Java applications. Discover the advantages of this plugin, and the changes you can expect to see …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds