Use Images with Tab Labels

 

Use Images with Tab Labels
Rating:

Zafir Anjum (view profile) August 6, 1998

The tab control is one of the common controls that support using an image list to specify an image for each item in the tab control. Since the property sheet uses a tab control, adding images to the tab lables is fairly simple.

Step 1: Create a bitmap resource with the images

You can also use icons or even create the images at run time. In this example, however, lets stay with the bitmap since it is so much simpler. A single bitmap contains all the images and the images should be laid out horizontally as shown below. You can create the bitmap with an reasonable height and the image list will use it for the individual images. You can also select any reasonable width for the images as long as they are all the same. I say 'reasonable' because the size of the images should be in proportion to the height of the label. The bitmap shown below is 13 pixel high and each image is 13 pixel wide. The height and width need not be the same.

Step 2: Add member variable of type CimageList

Add a member variable to the CPropertySheet derived class. You will need to derive from the CPropertySheet class if you are not already doing so.

protected :

         CImageList m_imageTab;

Step 3: Override OnInitDialog() and add code to it.

The code to add images to the tab labels should be placed in the OnInitDialog() function. After calling the base class version of OnInitDialog() we create the image list. The first argument to the create function is the resource ID of the bitmap we create in step one. The second argument is the width of each image in the bitmap. We had drawn the bitmap with each image 13 pixels wide. The third argument is the number of images that the image list should grow by when more images are added to it. Since we don't anticipate adding more images to the image list, this value is 1. The final argument is the color that will be treated as a transparent color. We have chosen white to be the transparent color since we used white as the background color when drawing the image.

The next step is to associate the image list with the tab control. Finally, specify an image for each tab item.

BOOL CMyPropSheet::OnInitDialog()

{

         BOOL bResult = CPropertySheet::OnInitDialog();

 

         m_imageTab.Create( IDB_TABIMAGES, 13, 1, RGB(255,255,255) );

         CTabCtrl *pTab = GetTabControl();

         pTab->SetImageList( &m_imageTab );

 

         TC_ITEM tcItem;

         tcItem.mask = TCIF_IMAGE;

         for ( int i = 0; i < 3; i++ )

         {

                 tcItem.iImage = i;

                 pTab->SetItem( i, &tcItem );

         }

         return bResult;

}

 

 

 

第一步，创建图像列表  
                  CImageList   m_TabImageList;   //成员对象  
   
  m_TabImageList.Create(16,   16,   ILC_COLOR4,   3,   3);  
  HICON   hIcon;  
  hIcon=pApp->LoadIcon(IDI_RED);     //IDI_RED等在资源文件中  
  m_TabImageList.Add(hIcon);  
  hIcon=pApp->LoadIcon(IDI_YELLOW);  
  m_TabImageList.Add(hIcon);  
  hIcon=pApp->LoadIcon(IDI_GREEN);  
  m_TabImageList.Add(hIcon);  
   
  m_tab.SetImageList(&m_TabImageList);   //m_tab为CTabCtrl对象  
   
  第二步，设定关联图标  
  UINT   nMask   =   TCIF_TEXT   and   TCIF_IMAGE;  
  int   nImageIndex;  
  int   nItemIndex=0;  
                      CString   sTabLabel;  
   
  nImageIndex=0;  
  sTabLabel="标签1";  
  m_tab.InsertItem(nMask,   nItemIndex,   sTabLabel,    
  nImageIndex,   0L);  
   
  nImageIndex++;  
  nItemIndex++;  
  sTabLabel="标签2";  
  m_tab.InsertItem(nMask,   nItemIndex,   sTabLabel,    
  nImageIndex,   0L);  
   
  nImageIndex++;  
  nItemIndex++;  
  sTabLabel="标签3";  
  m_tab.InsertItem(nMask,   nItemIndex,   sTabLabel,    
  nImageIndex,   0L);  
   
   
  程序最后，不要忘记释放m_TabImageList.