True Color Image List

Introduction

Tree and list controls always look better when you have images associated with each item. Both trees and lists use a CImageList to display images. However, it's not handy to display true color (24 or 32 bits) images using CImageList. To quickly overcome this, I have created a class for true color images,

   

True Color Image List

CTCImageList is derived from CImageList. It provides several methods for creating a true color image list.

BOOL CreateTC(UINT nID);
BOOL CreateTC(UINT nID, COLORREF colMask);
BOOL CreateTC(UINT nID, int cx);
BOOL CreateTC(UINT nID, int cx, COLORREF colMask);
BOOL CreateTC(UINT nID, int cx, int cy);
BOOL CreateTC(UINT nID, int cx, int cy, COLORREF colMask);

where
nID is the ID of the true color bitmap resource
cx is the width of images
cy is the height of images
colMask is the color treated as transparent

CreateTC(UINT nID) determines the size of images from the bitmap, and the width of the bitmap with ID nID must be a multiple of its height (images are squared). The transparent color is white (RGB(255,255,255)).

CreateTC(UINT nID, int cx) creates a list of squared images with the size given by cx, and transparent color white.

CreateTC(UINT nID, int cx, int cy, COLORREF colMask) creates a list of true color images, the size given by cx, cy, and the transparent color colMask.

How to Use CTCImageList

Create a bitmap with the images you want. Here are two examples. The transparent color is RGB(255, 0, 255). Whatever color you use, you should make sure is not present in the image itself, because in that case, parts of the image will become transparent.

   

Import the image to the resource list. VC++ 6.0 will be able to display the image because it has more than 256 colors.

Include the TCImageList.h file in your class header and declare an object in your class.

CTCImageList m_imageList;

Create the image list and attach it to a tree or list. (The example is taken from the sample project: a SDI app with a tree view.)

void CTrueColorsView::OnInitialUpdate()
{
   CTreeView::OnInitialUpdate();

   CTreeCtrl &tree = GetTreeCtrl();
   // bitmap ID: TREE_ICONS_SMALL
   // transparent color: RGB(255, 0, 255)
   m_imageList.CreateTC(TREE_ICONS_SMALL, COLORREF(RGB(255,0,255)));

   tree.SetImageList(&m_imageList,TVSIL_NORMAL);
}

CTCImageList for True Color Toolbar

Another usage for CTCImageList is to create true colors toolbars. CTCToolBar is derived from CToolBar is uses CTCImageList.

A tool bar button may have three states: disabled, enabled, and hovered (when it is enabled and the cursor is on it). A true color toolbar needs three bitmaps, one for each state.

BOOL LoadTCToolBar(int nWidth, UINT uNormal, UINT uHot,
                   UINT uDisabled);
BOOL LoadTCToolBar(int nWidth, UINT uNormal, UINT uHot,
                   UINT uDisabled, COLORREF colMask);

The LoadTCToolBar() method allows you to load the true color bitmaps to the toolbar. You must specify the size of the buttons, and for the second overloaded, the transparent color (which is RGB(255, 255, 255) for the first).

How to use CTCToolBar

Create tree bitmaps with the button images you want, like these:

       

Add them to the resources in your project (VC++ 6.0 can display them because they have more than 256 colors).

Include TCToolbar.h in your main frame header (or any other file you need) and declare a CTCToolBar object. (This example shows you how to replace the default toolbar from CMainFrame with a true color toolbar).

After creating the toolbar, call LoadTCToolBar:

int CMainFrame::OnCreate(LPCREATESTRUCT lpCreateStruct)
{
   if (CFrameWnd::OnCreate(lpCreateStruct) == -1)
      return -1;

   if (!m_wndToolBar.CreateEx(this, TBSTYLE_FLAT, WS_CHILD
       | WS_VISIBLE | CBRS_TOP | CBRS_GRIPPER | CBRS_TOOLTIPS 
       | CBRS_FLYBY | CBRS_SIZE_DYNAMIC) ||
       !m_wndToolBar.LoadToolBar(IDR_MAINFRAME))
   {
      TRACE0("Failed to create toolbar\n");
      return -1;      // fail to create
   }

   // buttons size: 16
   // bitmaps: 
   // enabled - IDB_TOOLBAR_NORMAL
   // hovered - IDB_TOOLBAR_HOT
   // disabled - IDB_TOOLBAR_DISABLED
   // transparent color RGB(255, 0, 255)
   m_wndToolBar.LoadTCToolBar(16, IDB_TOOLBAR_NORMAL,IDB_TOOLBAR_HOT,
                              IDB_TOOLBAR_DISABLED, RGB(255,0,255));
}

See the attached project for more details.



About the Author

Marius Bancila

Marius Bancila is a Microsoft MVP for VC++. He works as a software developer for a Norwegian-based company. He is mainly focused on building desktop applications with MFC and VC#. He keeps a blog at www.mariusbancila.ro/blog, focused on Windows programming. He is the co-founder of codexpert.ro, a community for Romanian C++/VC++ programmers.

Downloads

Comments

  • Answer finaly found

    Posted by Nicolas Jacobsen on 01/04/2013 11:59pm

    Thanks to this article i finaly find out how to get true colors in my tree control. And the answer is so simple: Edit the bitmap outside Visual Studio!!!! I have spent more than a day on this problem. And how to load it correctly, i got from your code. Great job. Thanks.

    Reply
  • Great but what about conflict with TB_ADDBITMAP

    Posted by Ricou on 03/02/2010 06:48am

    Here is what MSDN says: >> The TB_SETIMAGELIST message cannot be combined with TB_ADDBITMAP >>Attempting to modify it with TB_SETIMAGELIST has unpredictable consequences. Unfortunately LoadToolBar( ) uses TB_ADDBITMAP :( So ???

    Reply
  • Thank so much

    Posted by letjanet on 11/03/2009 11:06pm

    i'm finding something like this, this's helpful ;)) thanks

    Reply
  • button state

    Posted by sebvanden on 07/17/2006 05:45am

    How do you do for disable a button in the toolbar? Thanks

    Reply
  • Nice but...

    Posted by wolfgangjia on 07/27/2005 03:27am

    I prefer to take off the clothes.
    Create a empty control with proper attributes and add images as you like. Like this:
    {
    	CBitmap bmp;
    	bmp.LoadBitmap(IDB_BITMAP_TREETAG);
    	imgList.Create(int, int, {ILC_COLOR24|ILC_COLOR16}|ILC_MASK, int, int);
    	imgList.Add(&bmp, COLORREF);
    }

    Reply
  • Nice!

    Posted by Siddhartha on 07/17/2005 07:12am

    I am not a UI developer, but liked the article nevertheless! :)
    
    Good work, Cilu! :thumbs:
    
    Cheers,
    Sid :)

    Reply
  • Great job but one question

    Posted by mocolt on 02/03/2005 04:05am

    For the toolbar, how do I split it up into 2 groups so one group will have as many icons I want and move the 2nd group more toward to the right with as many icons I want. Is that possible?

    Reply
  • Perfect!

    Posted by NoHero on 01/31/2005 02:25am

    Very good, nice example and code. :thumb:

    Reply
  • Nice

    Posted by ovidiucucu on 01/25/2005 02:03pm

    I gave you 5 rating. Good job! ;) However, here is few observations regarding the example: 1. You have no main menu items corresponding to "small icons"/"large icons"; any user may expect to find them there. 2. You have neither tooltips nor statusbar prompts for your added toobar buttons; you know, it's no sweat for example to type "Show small icons\nSmall icons" in the "Prompt:" field of ID_TREE_SMALLICONS menu item properties. 3. Should be better if "small icons"/"large icons" toolbar buttons have BTNS_CHECK style (see also BTNS_GROUP and TBSTYLE_GROUP); this avoid confusing an user when pushes one of them and nothing happens. Well, these are just details , this is just an example. However, let's try make examples here to look better. :thumb: Best regards, Ovidiu P.S. Had you a deadline for making the example? :D ;) :thumb:

    Reply
  • Good job

    Posted by kirants on 01/20/2005 12:11pm

    Neat and well written

    Reply
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 …

  • Live Webinar Tuesday, August 26, 2014 1:00 PM EDT Customers are more empowered and connected than ever, and the customer's journey has grown more complex. Their expectations are growing and trust is diminishing as they may interact with multiple brands through web, mobile and social channels. Considering 70% of the buying process in a complex sale is already complete before prospects are willing to engage with a live salesperson -- it's critical to understand your customers and anticipate their needs.* …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds