Use Images with Tab Labels

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



Comments

  • progressbar as property page title

    Posted by Legacy on 03/21/2002 12:00am

    Originally posted by: venkatesh

    Hi,

    we need to display progressbar control as property page title to indicate the percentage of work completed in each property page.
    Could you please tell me how to display progressbar control as prperty page title.

    Reply
  • Cannot addd the sencond and the third image??

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

    Originally posted by: Gary Kei

    I cannot add the second and the third image. Why

    Thanks,

    Gary

    Reply
  • Using A Small Icon With The Tab Label

    Posted by Legacy on 01/27/2002 12:00am

    Originally posted by: Siarhei Akulich

    http://www.codeguru.com/controls/iconTab.html

    Reply
  • Writing tabCtrl Item in 2 lines

    Posted by Legacy on 09/13/2001 12:00am

    Originally posted by: Ofir

    Can I write the tabCtrl Item text in two lines??

    Reply
  • Space allocation problem

    Posted by Legacy on 04/20/2000 12:00am

    Originally posted by: Michal Sevcenko

    When you add images to tabs, tabs will require more space. It may happen that tabs will require more lines after adding images, but this additional space is not added automatically (property sheet does not resize). I think you can fix this by calling

    SetActivePage(GetActivePage());

    before you return from the OnInitDialog of your property sheet.

    Reply
  • Assertion Error Fix

    Posted by Legacy on 11/25/1999 12:00am

    Originally posted by: Ken Rice

    You need to add the line:

    m_imageTab.Detach();

    right before "return bResult;" at the end of the function. This will fix an assertion error you get the "second" time you open the property sheet.

    Reply
  • Use Images with Tab Labels

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

    Originally posted by: Willem Hugo

    How can I add bitmaps to the buttons in the Property Sheet ?

    Reply
  • only bitmaps , no text

    Posted by Legacy on 10/29/1998 12:00am

    Originally posted by: Septimiu

    My bitmaps are long (as the text was) for each tab button. But the button
    doesn't allocate enough space for the images. How can I set the length
    of the buttons?

    Reply
  • bitmaps in the tabs of property pages

    Posted by Legacy on 09/30/1998 12:00am

    Originally posted by: Peter

    Hello,

    I am working on an application containing some property pages embedded
    in a property sheet. I tried to place bitmaps in the tabs of the
    property pages as described in your article.

    It is working fine the first time I open the dialog but the second time the bitmaps dissappear.

    Do you know the solution to this problem?
    I would be very glad if you can give me some hints.

    In advance thank you very much for your help.

    Best regards,

    Peter

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

Top White Papers and Webcasts

  • Live Event Date: August 20, 2014 @ 1:00 p.m. ET / 10:00 a.m. PT When you look at natural user interfaces as a developer, it isn't just fun and games. There are some very serious, real-world usage models of how things can help make the world a better place – things like Intel® RealSense™ technology. Check out this upcoming eSeminar and join the panel of experts, both from inside and outside of Intel, as they discuss how natural user interfaces will likely be getting adopted in a wide variety …

  • Event Date: April 15, 2014 The ability to effectively set sales goals, assign quotas and territories, bring new people on board and quickly make adjustments to the sales force is often crucial to success--and to the field experience! But for sales operations leaders, managing the administrative processes, systems, data and various departments to get it all right can often be difficult, inefficient and manually intensive. Register for this webinar and learn how you can: Align sales goals, quotas and …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds