Click here to Skip to main content
15,880,725 members
Articles / Desktop Programming

TabCtrl - Adjustable Control with Zooming and Scrolling Tabs

Rate me:
Please Sign up or sign in to vote.
4.97/5 (140 votes)
25 Mar 2021Public Domain2 min read 214.8K   22.8K   346   107
In this article, you will learn about an adjustable control that has zooming and scrolling tabs, dragging with the mouse, custom drawing and much more.

Sample Image

Introduction

Tabs can be top or bottom of child windows. The user can drag tabs using the mouse. Control has a zoom (shrink of tabs) and scrolling tabs mode. Also, if there is one tab, the area of tabs can be hidden.

Control has 28 built-in tab drawing styles, including tabs VS2003, VS2008, VS2010 and VS2019. Drawing for all styles is created programmatically and does not require resources. You can create your own style by editing an existing render class or creating a new one.

This control is based on CWnd class and can be placed as a child window anywhere, for example, in the client area of the frame or dialog.

Using the Code

Child windows are added using their HWND and they can be of any type, for example, modeless dialogs. TabCtrl consists of three areas: control area, tabs area, windows area. This knowledge can be useful to you when creating a drawing class and working with TabCtrl functions.

Sample Image

To create the control and add elements to it, you can do the next steps:

C++
#include "TabCtrl.h"

TabCtrlEx<TabCtrlStyle_VS2019_client_light> m_TabCtrl;
CListCtrl m_List1, m_List2;

...

// Creation and initialization of TabCtrl.
if( !m_TabCtrl.Create(this,WS_CHILD | WS_VISIBLE,CRect(0,0,0,0),ID_TabCtrl) )
    return -1;    // error.

// Creation of ImageList with icons for buttons (close, menu, scroll) and for tabs.
if( !m_TabCtrl.CreateSystemImage(NULL,IDB_IMAGES_SYSTEM,true,14) ||
    !m_TabCtrl.CreateImage(NULL,IDB_IMAGES_TAB_NORMAL,IDB_IMAGES_TAB_DISABLE,true,16) )
    return -1;    // error.

// Creation of child windows.
if( !m_List1.Create(WS_CLIPCHILDREN | LVS_REPORT,CRect(0,0,0,0),&m_TabCtrl,ID_List1) ||
    !m_List2.Create(WS_CLIPCHILDREN | LVS_REPORT,CRect(0,0,0,0),&m_TabCtrl,ID_List2) )
    return -1;    // error.
m_List1.InsertColumn(0,"Mail",LVCFMT_LEFT,100);
m_List2.InsertColumn(0,"Calendar",LVCFMT_LEFT,100);

// Attaching of child windows to the TabCtrl.
if( !m_TabCtrl.Add(m_List1,"Mail",0) ||
    !m_TabCtrl.Add(m_List2,"Calendar",1) )
    return -1;    // error.

// Load state from registry and update.
m_TabCtrl.LoadState(AfxGetApp(),"TabCtrl","State");
m_TabCtrl.Update();

Class TabCtrl does not perform any rendering. For its drawing, it calls the functions of TabCtrl::Draw interface. To draw TabCtrl, you need to create an object inherited from the TabCtrl::Draw class, implement its functions, and pass the TabCtrl::Draw pointer to TabCtrl using the TabCtrl::SetDrawManager function call.

Similarly, a TabCtrl::IRecalc interface is used to specify the size and spacing between TabCtrl areas. A TabCtrl::IBehavior interface will help you adjust the behavior of the TabCtrl, and a TabCtrl::ToolTip will help you create tooltips for tabs and buttons. There is also a TabCtrl::Ability class for setting the ability to click on buttons and a TabCtrl::Notify class for notifying about events in TabCtrl.

If you implement any of the above interfaces, then this implementation must exist for the entire time the control is running. If you are working with only one style, then use the template class, TabCtrlEx. The name of the style class is specified as a template parameter, for example:

C++
TabCtrlEx<TabCtrlStyle_VS2003_client> m_TabCtrl;

Some styles have already been created. For example, styles similar to the docking/floating panels in Visual Studio 2003, 2008, 2010 and 2019. See the TabCtrlComplex class in the DemoDlg.h file for a list of all existing style classes.

Classes ITabCtrlStyle::RecalcStub and ITabCtrlStyle::BehaviorStub create a default implementation for the functions of TabCtrl::IRecalc and TabCtrl::IBehavior interfaces respectively. You can use them to create your own style classes.

The control requires a call of Update() after you add or delete tabs, as well as change its properties and state.

Good luck!

History

  • 28th May, 2010: Initial version
  • 10th June, 2010: Added redirect WM_NOTIFY message from child windows to a parent of the TabCtrl control
  • 12th June, 2010: Corrected error display of tooltips
  • 16th March, 2021: Improved sources and text of the article
  • 25th March, 2021: Added a new style and scrolling of tabs with the mouse wheel

License

This article, along with any associated source code and files, is licensed under A Public Domain dedication


Written By
Software Developer
Canada Canada

Comments and Discussions

 
QuestionGreat job,Vote of 10! Pin
Jason.LYJ15-Aug-13 17:03
professionalJason.LYJ15-Aug-13 17:03 
GeneralMy vote of 5 Pin
Herusetiyadi8-Jun-13 16:56
Herusetiyadi8-Jun-13 16:56 
GeneralMy vote of 5 Pin
noending7-May-13 4:33
noending7-May-13 4:33 
GeneralMy vote of 5 Pin
Albertino26-Apr-13 6:32
Albertino26-Apr-13 6:32 
QuestionWould be the worlds best but... Pin
Areal Person21-Dec-12 11:20
Areal Person21-Dec-12 11:20 
AnswerRe: Would be the worlds best but... Pin
Aleh Baradzenka23-Dec-12 4:51
Aleh Baradzenka23-Dec-12 4:51 
AnswerRe: Would be the worlds best but... Pin
Aleh Baradzenka25-Dec-12 1:20
Aleh Baradzenka25-Dec-12 1:20 
Questionhello, about add DDX_Control(pDX, IDC_STATIC, m_picCtrl); run error Pin
dnybz5-Oct-12 23:30
dnybz5-Oct-12 23:30 
hello,how add a table dialg


void CTableCtrlDlg::DoDataExchange(CDataExchange* pDX)
{
CDialog::DoDataExchange(pDX);
DDX_Control(pDX, IDC_STATIC, m_picCtrl);
}

add DDX_Control(pDX, IDC_STATIC, m_picCtrl);

run error

Error: no data exchange control with ID 0x0408.
AnswerRe: hello, about add DDX_Control(pDX, IDC_STATIC, m_picCtrl); run error Pin
noending27-Oct-12 18:59
noending27-Oct-12 18:59 
QuestionHow to add a scroll bar if the inner dialog is very large Pin
Eversoft27-Sep-12 16:04
Eversoft27-Sep-12 16:04 
AnswerRe: How to add a scroll bar if the inner dialog is very large Pin
Aleh Baradzenka27-Sep-12 22:11
Aleh Baradzenka27-Sep-12 22:11 
GeneralMy vote of 5 Pin
Jonathanrz25-Jul-12 3:08
Jonathanrz25-Jul-12 3:08 
Questionenable only single tab on the control Pin
gaurish thakkar21-Jun-12 18:14
gaurish thakkar21-Jun-12 18:14 
AnswerRe: enable only single tab on the control Pin
Aleh Baradzenka21-Jun-12 19:26
Aleh Baradzenka21-Jun-12 19:26 
QuestionCan you use it w/o attaching HWND to tab ? Pin
Sasa Kajic2-Feb-12 1:48
Sasa Kajic2-Feb-12 1:48 
QuestionIt's so good source, and I have a little question. Pin
Member 850081720-Dec-11 16:07
Member 850081720-Dec-11 16:07 
AnswerRe: It's so good source, and I have a little question. Pin
Aleh Baradzenka20-Dec-11 23:17
Aleh Baradzenka20-Dec-11 23:17 
QuestionAwesome!! Pin
Yonghwi Kwon18-Nov-11 20:28
Yonghwi Kwon18-Nov-11 20:28 
GeneralMy vote of 5 Pin
AlbertXiao17-Oct-11 0:04
AlbertXiao17-Oct-11 0:04 
GeneralMy vote of 5 Pin
duke.liu19-Aug-11 14:42
duke.liu19-Aug-11 14:42 
GeneralClose Button on Tab Pin
Dansveen15-Mar-11 7:16
Dansveen15-Mar-11 7:16 
GeneralRe: Close Button on Tab Pin
Aleh Baradzenka15-Mar-11 11:33
Aleh Baradzenka15-Mar-11 11:33 
GeneralRe: Close Button on Tab Pin
hpking5-Jun-11 20:11
hpking5-Jun-11 20:11 
GeneralMy vote of 5 Pin
csystemsaz10-Feb-11 4:27
csystemsaz10-Feb-11 4:27 
GeneralRun-Time Check Failure #1 - cast to a smaller... Pin
csystemsaz19-Jan-11 11:09
csystemsaz19-Jan-11 11:09 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.