CapitolSoft Banner
Open Architecture
Control Development Kit
RAD Foundation Class
Enhanced IntelliSense
Migration Center
Using Microsoft's TabStrip ActiveX Control

A TabStrip acts like the dividers in a notebook or the labels on a group of file folders. By using a TabStrip control, you can define multiple pages for the same area of a window or dialog box in your application.

Note: This article uses RadVC 1.2 or later

Also: See the sample using MS Tabstrip ActiveX control here


TS_gen.jpg (4798 bytes)

Inserting TabStrip Control into Your Project

Right-click on the RadVC toolbox and select the menuitem "Insert ActiveX Control". This will display the ActiveX control selection dialog. Scroll down the list of the ActiveX controls available in your system and select the item "Microsoft TabStrip Control, version 6.0", as shown below.

TS_InsertAxDlg.jpg (39737 bytes)

Once you insert the control in your project by clicking on "OK", RadVC generates 3 wrapper classes for the control in your project. These are:

CRAxTabstrip in files tabstrip.h and tabstrip.cpp implements the control
CRAxTabs in files rTabs.h and rTabs.cpp implements Tabs collection
CRAxTab in files rTab.h and rTab implements Tab object

Possible Uses

  • To create a tabbed dialog that sets various text attributes for a RichTextBox control.
  • To create a tabbed dialog that sets preferences for an application.

The Tabs Collection

The control consists of one or more Tab objects in a Tabs collection. At both design time and run time, you can affect the Tab object's appearance by setting properties, and at run time, by invoking methods to add and remove Tab objects.

Associate the ImageList Control with the TabStrip Control

To identify a tab's function, you can assign an image from the ImageList control to the Tab object. You must first associate an ImageList control with the TabStrip control. To associate an ImageList control with a TabStrip control at run time simply set the ImageList property to the name of the ImageList control, as shown in the example below:

void CForm1::Form_Load()
	// set the imagelist
	// The tabstrip control is named m_Tabstrip
	// and the imahelist control is named m_Imagelist
	m_Tabstrip.ImageList = m_Imagelist.GetDispatch();

Create Tabs at Design Time or Run Time

You can create Tab objects at both design and run time. To create Tab objects at design time, use the Property Pages dialog box.

To create Tab objects at design time

1. Click on the browse button [with caption "...", next to the control name edit box] on the property      window.
2. Click Tabs to display the Tabs page, as shown in Figure 2.36, below:

TS_propsheet.jpg (17373 bytes)


Create Tab Objects at Run Time Using the Add Method

To create Tab objects at run time, use the Add method for Tab objects.

Note   One Tab object is created for you by default.

The code below adds 2 tabs to a tab control

void CForm1::Form_Load()
	// Add tabs 
	// "Find_Image" and "Draw_Image" are two images that belong
	// to an imagelist control
	// You need to set the images before (either at design or run time)
	// before you call the following "Add" methods
	m_AxTabstrip1.Tabs.Add(NULL, _V("Key1"), _V("Find"), _V("Find_Image"));
	m_AxTabstrip1.Tabs.Add(NULL, _V("Key2"), _V("Draw"), _V("Draw_Image"));

Here the first parameter is always NULL ("Index" of the tab).

The second parameter ["Key1" or "key2"] is the "key" to the tab to be added. Assigning a unique Key property value to the Tab object allows you to create code that is easier to read. When assigning the Tab to a property, you can use its Key value instead of its Index value.

The 4th parameter sets a image item for the tab item. Here Draw_Image and  Draw_Image are the "key" values of two images that belong to an imagelist.

The keyword "_V" is used to make VARIANTs used by the "Add" function.

Use the Client Area to Position Container Controls

The TabStrip control is commonly used to create tabbed dialog boxes. Each page in the dialog box consists of a tab and a client area, as seen in the figure below:

TS_ClientArea.jpg (40288 bytes)

At run time, when the user clicks on a tab, you must program the client area to be reconfigured with a different set of container controls (discussed below in "Managing Tabs and Container Controls").

At design time, draw a container control, such as the PictureBox or Frame control, on the form. If you use a Frame control, you can set its BorderStyle property to be invisible at run time. Copy and paste the same control to create an array of controls; create one control for each Tab object you have created.

On each container control, draw the controls that should appear on a tab. Your form may appear something like Figure, below:

TS_PicBoxes.jpg (12673 bytes)


After you have created the container controls, there is one additional technique required to position them over the TabStrip control's client area: use the Move method with the ClientLeft, ClientTop, ClientWidth, and ClientHeight properties of the Tabstrip control, as shown in the code below:

void CForm1::Form_Load()
	// Set the form size
	Me.Width = 340;
	Me.Height = 300;

	// set the imagelist
	m_AxTabstrip1.ImageList = m_AxImagelistctrl1.GetDispatch();

	// Add tabs 
	m_AxTabstrip1.Tabs.Add(NULL, _V("Key1"), _V("Find"), _V("Find_Image"));
	m_AxTabstrip1.Tabs.Add(NULL, _V("Key2"), _V("Draw"), _V("Draw_Image"));

	// Move pictureboxes inside the tab control
	for(int nIndex = 0; nIndex < m_AxTabstrip1.Tabs.Count; nIndex++)
		m_PictureBox1(nIndex).Left = abs(m_AxTabstrip1.ClientLeft);
		m_PictureBox1(nIndex).Top = abs(m_AxTabstrip1.ClientTop);
		m_PictureBox1(nIndex).Width = m_AxTabstrip1.ClientWidth;
		m_PictureBox1(nIndex).Height = m_AxTabstrip1.ClientHeight;

	m_PictureBox1(0).Visible = TRUE;
Here ::HideAllTabs() is a function that hides all picturebox controls.
void CForm1::HideAllTabs()
	for(int nIndex = 0; nIndex < m_AxTabstrip1.Tabs.Count; nIndex++)
		m_PictureBox1(nIndex).Visible = FALSE;

Managing Tabs and Container Controls

A tabbed dialog box contains more than one Tab object. As seen above, a Frame control (or other container control) should be associated with each Tab object. To efficiently manage the numerous Tab objects and container controls, the following strategy can be used:

  • Create a control array of container controls, one member for each Tab object.
  • On each container control, draw the controls that you want to have on a tab page.
  • At run time, use the control's SelectedItem property to determine the Index of the clicked Tab object.
  • Use the "BringWindowToTop" method to bring the appropriate container control to the front.

The code to bring the proper container control to the front would then resemble the code below:

void CForm1::AxTabstrip1_Click()
	int nSelIndex = m_AxTabstrip1.SelectedItem.Index;
	m_PictureBox1(nSelIndex - 1).Visible = TRUE;
	m_PictureBox1(nSelIndex - 1).BringWindowToTop();

Tab Style Property: Buttons or Tabs

The Style property determines whether the TabStrip control looks like

notebook tabs (Tabs),

TS_TabStyle1.jpg (2612 bytes)

or push buttons (Buttons).

TS_TabStyle2.jpg (2739 bytes)

The advantages of each are outlined below:

Style Possible Use
Tabs Use the Tabs style to create Tabbed dialog boxes. With this style, the complete tabbed dialog, including the client area, is drawn for you. Your code must manage what appears in the client area.
Buttons The Buttons style can be used to create a toolbar or task bar — in other words, when you do not need the client area, but prefer to have only the buttons as an interface element. Alternatively, you may wish to use the Buttons style when you do not need a well-defined client area drawn for you.

Multi-Row Tabs

Another feature of the TabStrip control is the MultiRow property. When this property is set to True, a large number of Tab objects appear in rows, as seen in the figure below:

.TS_MultiTab.jpg (7811 bytes)

If the MultiRow property is set to False, the same set of tabs appears in a single row, with a pair of scroll buttons at the rightmost end:

TS_MultiTab_arrow.jpg (4567 bytes)

The TabWidthStyle property determines the appearance of each row, and, if TabWidthStyle is set to Fixed, you can use the TabFixedHeight and TabFixedWidth properties to set the same height and width for all tabs in the TabStrip control.






[ Home ][ Order Now ][Feedback][ Contact Us ][ About CapitolSoft ]
[ Features ][ Tutorial ][ Samples ][ F.A.Q.s ][ Download ][ CDK ]