Introduction
I first saw the new Microsoft Visual Studio .NET after beta 2 was released. One of the things that stood out to me was how nice the tabs looked. It also finally included a tabbed MDI.
I soon after found Bjarke Viks�e's Cool Tab Controls. I was especially interested in the "DotNetTabCtrl
". Bjarke soon linked to an updated version by Pascal Binggeli, that had support for the tabs to have images. There were several minor issues with both versions, but when I examined the code, it seemed an excellent foundation to build from.
Starting with the updates from Pascal, I began making my own updates. Initial updates included adding divider lines between the tabs, adjusting the layout to closer match VS.NET, adding implementations to use the tab control for a tabbed MDI, and adding other improvements. At first, I tried to make minimal changes to the base CCustomTabCtrl
. I eventually began evolving even the base CCustomTabCtrl
to accommodate my vision for what this could be.
Custom Tab Controls
CCustomTabCtrl
is the base, templatized, ATL::CWindowImpl
derived class to help implement a customized tab control window. The painting is double buffered for flicker free drawing. Clients never use this class directly, but instead use a class derived from it. Included out of the box are a handful of tab controls derived from CCustomTabCtrl
:
CDotNetTabCtrl
in "DotNetTabCtrl.h".
Written by Daniel Bowen. Tab control with the look and feel of the tabs in VS.NET. Used for both MDI tabs, pane window tabs, and others.
CDotNetButtonTabCtrl
in "DotNetTabCtrl.h".
Written by Daniel Bowen. Tab control with the VS.NET style of button tabs (to look like VS.NET view of HTML with the Design/HTML buttons).
CButtonTabCtrl
in "SimpleTabCtrls.h", CButtonTabCtrl
in "SimpleDlgTabCtrls.h".
Written by Bjarke Vik�e, updated for new CCustomTabCtrl
by Daniel Bowen. Push button style tabs. The "DlgTabCtrl
" version is meant to subclass an existing static control.
CFolderTabCtrl
in "SimpleTabCtrls.h", CFolderTabCtrl
in "SimpleDlgTabCtrls.h".
Written by Bjarke Vik�e, updated for new CCustomTabCtrl
by Daniel Bowen. Trapezoidal folder tabs similar to the tabs used in the output pane of Visual Studio 6. The "DlgTabCtrl
" version is meant to subclass an existing static control.
CSimpleDotNetTabCtrl
in "SimpleTabCtrls.h", CSimpleDotNetTabCtrl
in "SimpleDlgTabCtrls.h".
Written by Bjarke Vik�e, updated for new CCustomTabCtrl
by Daniel Bowen. This is essentially Bjarke's original "CDotNetTabCtrl
" with a flat tab look. The "DlgTabCtrl
" version is meant to subclass an existing static control.
CCustomTabCtrl
derived tab controls are meant to work similar to other common controls such as the list view (SysListView32
) and the tree view (SysTreeView32
). There is already an existing tab control (SysTabControl32
) that is a common control. So why do we need CCustomTabCtrl
? Because there are several customizations that are hard to do with it. SysTabControl32
was originally created to implement the task bar in Windows 95 and later (just like SysListView32
and SysTreeView32
were originally created for Windows Explorer). There are several features that other common controls have that SysTabControl32
is missing, such as custom drawing, insert and delete notifications, position displacement and more.
Custom Tab Items
One of the differences between CCustomTabCtrl
derived tab controls and common controls in Windows are how items are managed. Common controls are meant to work with any client that can handle structures and window programming - from x86 assembly to Visual Basic. The "item" in most common controls is a structure. To get and set items, you fill out a structure with a mask to identify the fields you are interested in. There are several side effects of this design decision. One is that there is often more "memory copying" than really needs to be happening, especially with getting and setting text. Another is that there is no good way to know if a particular field is actually in use. Another effect is that any user data is always put into an "LPARAM
" into one of these structures, cast to and from the real type of data.
CCustomTabCtrl
takes a different approach, and lets you use any C structure or C++ class for the item that provides the needed interface. There are two such classes available out of the box - CCustomTabItem
and CTabViewTabItem
. The type of structure or class is a template parameter on the tab control class. If you want to use the tab control, and have instances of your own class for the tab items, the easiest thing to do is inherit from CCustomTabItem
or CTabViewTabItem
, and extend it to provide the extra functionality you need, then specify this new class as a parameter. To see the interface needed, simply look at CCustomTabItem
.
Using Custom Tab Controls
Tab controls based on CCustomTabCtrl
are meant to be used either as a stand-alone window, or to subclass an existing control on a dialog such as a static control. The parent of the tab control is responsible for creating, destroying, sizing and positioning the tab control window appropriately along side other child windows.
Depending on which custom tab control you use, it will probably depend on some system metrics to figure out which colors and fonts to use. If the user changes these system metrics (for example, by changing items on the "appearance" tab of the display control panel), the tab control can pick up these changes - but only if you propagate WM_SETTINGCHANGE
from the main frame to the tab control. This can be done by handling WM_SETTINGCHANGE
in the main frame, then calling CWindow::SendMessageToDescendants
or the equivalent code. See the included sample applications for an example.
The samples provided with this article demonstrate how to use these tab controls as stand-alone windows used to switch between child "view" windows, where only one child view is visible at a time.
For a simple example of how to use a custom tab control for a tabbed MDI, see the "SimpleTabbedMDIDemo" sample. In this sample, the WTL wizard was run to create a default MDI Application. Instead of having CMainFrame
inherit from CMDIFrameWindowImpl
, change it to inherit from CTabbedMDIFrameWindowImpl
. Instead of CMDICommandBarCtrl
, use CTabbedMDICommandBarCtrl
. Then in each MDI child frame, inherit from CTabbedMDIChildWindowImpl
instead of CMDIChildWindowImpl
.
The "TabDemo" sample uses a tabbed MDI as well, but in addition has a "popup tool window frame" that uses CDotNetTabCtrl
to switch between child views. It also uses CDotNetButtonTabCtrl
for the child frame to switch between an HTML view and an edit view (of the source of the HTML).
The "DockingDemo" sample shows how you might integrate these custom tab controls with Sergey Klimov's WTL Docking Windows. I've included the source for his docking windows with permission. However - be sure to get the latest updates from him! In the file "TabbedDockingWindow.h", there is the class CTabbedDockingWindow
that inherits from CTabbedFrameImpl
and Sergey's CTitleDockingWindowImpl
.
The "TabbedSDISplitter" sample shows the use of a splitter in an SDI application, with the right side window "tabbed" to show multiple views. For another sample showing a slightly different use of these tabs in an SDI application, see the "SDITabbedSample" from Sergey Klimov's WTL Docking Windows and the work by Igor Katrayev.
It should be possible to integrate the custom tab controls in with other docking frameworks, splitters, etc. as well. As time allows, I'll try to get some more sample applications up.
Tabbed Frame
TabbedFrame.h contains classes to make it simple to add the ability to turn a frame window with one "view" into a tabbed frame window with a custom tab control to switch between one or more views. Included are the classes:
CCustomTabOwnerImpl
- MI class that helps implement the parent of the actual custom tab control window. The class doesn't have a message map itself, and is meant to be inherited from along-side a CWindowImpl
derived class. This class handles creation of the tab window as well as adding, removing, switching and renaming tabs based on an HWND
.
CTabbedFrameImpl
- Base template to derive your specialized frame window class from to get a frame window with multiple "view" child windows that you switch between using a custom tab control (such as CDotNetTabCtrl
).
CTabbedPopupFrame
- Simple class deriving from CTabbedFrameImpl
that is suitable for implementing a tabbed "popup frame" tool window, with one or more views. See the "TabDemo" sample for an example of using this class.
CTabbedChildWindow
- Simple class deriving from CTabbedFrameImpl
that is suitable for implementing a tabbed child window, with one or more views. See the "TabbedSDISplitter" sample for an example of using this class.
Tabbed MDI
TabbedMDI.h contains classes to help implement a tabbed MDI using a custom tab control. There are multiple approaches to implementing a tabbed MDI. The approach that is used here is to subclass the out-of-the-box "MDIClient" from the OS, and require each MDI child frame to inherit from a special class CTabbedMDIChildWindowImpl
(instead of the normal CMDIChildWindowImpl
). Included are the classes:
CTabbedMDIFrameWindowImpl
- Instead of having CMainFrame
inherit from CMDIFrameWindowImpl
, you can have it inherit from CTabbedMDIFrameWindowImpl
. For an out-of-the box WTL MDI application, there are three instances of CMDIFrameWindowImpl
to replace with CTabbedMDIFrameWindowImpl
.
CTabbedMDIChildWindowImpl
- If you want your MDI child window to have a corresponding tab in the MDI tab window, inherit from this class instead of from CMDIChildWindowImpl
. This class also provides a couple of nice additional features:
- When the child frame is created, if the previously active MDI child is maximized, the new window is also maximized.
- Your child frame class can specify
WS_MAXIMIZE
so that it is forced to start out life maximized.
- The method
SetTitle
is provided to set the frame title (and possibly the corresponding MDI tab's text).
- The method
SetTabText
lets you set the text for the corresponding MDI tab regardless of what the frame caption (window text) is.
- The method
SetTabToolTip
lets you set the tooltip's text for the corresponding MDI tab.
- Your derived class can handle the message
UWM_MDICHILDSHOWTABCONTEXTMENU
to show a context menu for the corresponding MDI tab. The default context menu is the window's system menu.
CTabbedMDIClient
- The CTabbedMDIFrameWindowImpl
contains CTabbedMDIClient
, which subclasses the "MDI Client" window (from the OS, that manages the MDI child windows). It handles sizing/positioning the tab window, calling the appropriate Display, Remove, UpdateText for the tabs with the HWND
of the active child, etc. You can use CTabbedMDIClient
without using CTabbedMDIFrameWindowImpl
. To do so, simply call SetTabOwnerParent(m_hWnd)
, then SubclassWindow(m_hWndMDIClient)
on a CTabbedMDIClient
member variable after calling CreateMDIClient
in your main frame class.
CMDITabOwner
- The MDITabOwner
is the parent of the actual tab window (such as CDotNetTabCtrl
), and sibling to the "MDI Client" window. The tab owner tells the MDI child when to display a context menu for the tab (the default menu is the window's system menu). The tab owner changes the active MDI child when the active tab changes. It also does the real work of hiding and showing the tabs. It also handles adding, removing, and renaming tabs based on an HWND
.
CTabbedMDICommandBarCtrl
- In your MDI application, instead of using CMDICommandBarCtrl
, use CTabbedMDICommandBarCtrl
. It addresses a couple of bugs in WTL 7.0's CMDICommandBarCtrl
, and allows you to enable or disable whether you want to see the document icon and min/max/close button in the command bar when the child is maximized.
Note to previous users
I originally posted my version of the "DotNetTabCtrl
" code to the WTL mailing list's site on groups.yahoo.com, and to Bjarke Viks�e. If you have used a previous version downloaded from either of these places, there are only a couple of updates to your client code to accommodate updates that I've made:
Custom Tab Control Reference
Requirements
- ATL 3.0, 7.0, or 7.1
- WTL 7.1
Styles
Notifications
These messages are sent to the parent of the tab control window in the form of a WM_NOTIFY
message.
NM_CLICK
- Notifies a tab control's parent window when the left mouse button has been pressed. The lParam
of the message is a pointer to a NMCTCITEM
structure, with iItem
being the index of the item which the cursor is over, or -1 if no item is under the cursor. In the handler, return TRUE
to prevent the default processing to occur, or FALSE
to allow it. The default processing selects the item under the cursor. This notification is not sent when clicking on a scroll or close button.
NM_DBLCLK
- Notifies a tab control's parent window when the left mouse button has been double clicked. The lParam
of the message is a pointer to a NMCTCITEM
structure, with iItem
being the index of the item which the cursor is over, or -1 if no item is under the cursor. In the handler, return TRUE
to prevent the default processing to occur, or FALSE
to allow it.
NM_RCLICK
- Notifies a tab control's parent window when the right mouse button has been pressed. The lParam
of the message is a pointer to a NMCTCITEM
structure, with iItem
being the index of the item which the cursor is over, or -1 if no item is under the cursor. In the handler, return TRUE
to prevent the default processing to occur, or FALSE
to allow it. The default processing selects the item under the cursor.
NM_RDBLCLK
- Notifies a tab control's parent window when the right mouse button has been double clicked The lParam
of the message is a pointer to a NMCTCITEM
structure, with iItem
being the index of the item which the cursor is over, or -1 if no item is under the cursor. In the handler, return TRUE
to prevent the default processing to occur, or FALSE
to allow it.
NM_CUSTOMDRAW
- Notifies a tab control's parent window about drawing operations. The lParam
of the message is a pointer to a NMCTCCUSTOMDRAW
structure. See MSDN for an explanation of how custom drawing works with common controls in general, in the article "Customizing a Control's Appearance". For the most part, the custom tab control is very similar (especially to custom drawing a toolbar control). The one difference is that the NMCTCCUSTOMDRAW
structure lets you set the HFONT
for the inactive and selected item, instead of selecting the item's font into the device context and returning CDRF_NEWFONT
on each CDDS_ITEMPREPAINT
(you can still change the HFONT
on each CDDS_ITEMPREPAINT
, or you can just set it in the CDDS_PREPAINT
notification).
CTCN_FIRST
- Value of first custom tab control notification code.
CTCN_LAST
- Value of last custom tab control notification code. If a derived class wants to define its own message, it can use CTCN_LAST - 1
, CTCN_LAST - 2
, etc.
CTCN_SELCHANGE
- Notifies a tab control's parent window that the currently selected tab has changed. The lParam
of the message is a pointer to a NMCTC2ITEMS
structure, with iItem1
being the old selected item, and iItem2
the new item to select.
CTCN_SELCHANGING
- Notifies a tab control's parent window that the currently selected tab is about to change. The lParam
of the message is a pointer to a NMCTC2ITEMS
structure, with iItem1
being the old selected item, and iItem2
the new item to select. The receiver of the message should return TRUE
to prevent the selection from changing, or FALSE
to allow the selection to change.
CTCN_INSERTITEM
- Notifies a tab control's parent window that an item has been inserted. The lParam
of the message is a pointer to a NMCTCITEM
structure, with iItem
being the index of the inserted item.
CTCN_DELETEITEM
- Notifies a tab control's parent window that an item is about to be deleted. The lParam
of the message is a pointer to a NMCTCITEM
structure, with iItem
being the index of the item to be deleted. The receiver of the message should return TRUE
to prevent the deletion, or FALSE
to allow it.
CTCN_MOVEITEM
- Notifies a tab control's parent window that an item has been moved to another index by a "MoveItem
" call. The lParam
of the message is a pointer to a NMCTC2ITEMS
structure, with iItem1
being the old index, and iItem2
the new index.
CTCN_SWAPITEMPOSITIONS
- Notifies a tab control's parent window that two items have been switched in position by a "SwapItemPositions
" call. The lParam
of the message is a pointer to a NMCTC2ITEMS
structure, with iItem1
being the index of the first item, and iItem2
the index of the second.
CTCN_CLOSE
- Notifies a tab control's parent window that the "close" button has been clicked. The close button is only displayed for tab controls with CTCS_CLOSEBUTTON
set.
CTCN_BEGINITEMDRAG
- Notifies a tab control's parent window that a tab item drag has started. The lParam
of the message is a pointer to a NMCTCITEM
structure, with iItem
being the index of the item being dragged.
CTCN_ACCEPTITEMDRAG
- Notifies a tab control's parent window that a tab item drag has ended and is accepted by the user. The lParam
of the message is a pointer to a NMCTC2ITEMS
structure, with iItem1
being the index of the item in its original place, and iItem2
the new index of the item.
CTCN_CANCELITEMDRAG
- Notifies a tab control's parent window that a tab item drag has ended and was cancelled by the user. The lParam
of the message is a pointer to a NMCTCITEM
structure, with iItem
being the index of the item that was being dragged.
Structures
NMCTCITEM
-
NMHDR hdr;
- Generic Notification Information.
int iItem;
- Index of item involved in action, or -1 if not used.
POINT pt;
- Screen coordinate of point of action.
NMCTC2ITEMS
-
NMHDR hdr;
- Generic Notification Information.
int iItem1;
- Index of first item involved in action.
int iItem2;
- Index of second item involved in action.
POINT pt;
- Screen coordinate of point of action.
CTCHITTESTINFO
-
POINT pt;
- Position to hit test, in client coordinates.
UINT flags;
- Variable that receives the results of a hit test. The tab control sets this member to one of the following values:
CTCHT_NOWHERE
- The position is not over a tab.
CTCHT_ONITEM
- The position is over a tab item.
CTCHT_ONCLOSEBTN
- The position is over the close button.
CTCHT_ONSCROLLRIGHTBTN
- The position is over the right scroll button.
CTCHT_ONSCROLLLEFTBTN
- The position is over the left scroll button.
NMCTCCUSTOMDRAW
-
NMCUSTOMDRAW nmcd;
- General custom draw structure.
HFONT hFontInactive;
- Font for text of inactive tabs.
HFONT hFontSelected;
- Font for text of selected tab.
HBRUSH hBrushBackground;
- HBRUSH
to PatBlt
into background.
COLORREF clrTextInactive;
- Color of text of inactive tab.
COLORREF clrTextSelected;
- Color of test of selected tab.
COLORREF clrSelectedTab;
- Color of the selected tab's background.
COLORREF clrBtnFace;
- Used in drawing 3D shapes. Defaults to COLOR_BTNFACE
.
COLORREF clrBtnShadow;
- Used in drawing 3D shapes. Defaults to COLOR_BTNSHADOW
.
COLORREF clrBtnHighlight;
- Used in drawing 3D shapes. Defaults to COLOR_BTNHIGHLIGHT
.
COLORREF clrBtnText;
- Used in drawing 3D shapes. Defaults to COLOR_BTNTEXT
.
COLORREF clrHighlight;
- Used when a derived tab wants a "highlight" color.
COLORREF clrHighlightHotTrack;
- Used for hot tracking.
COLORREF clrHighlightText;
- Used when a derived tab wants a "highlight text" color.
CTCSETTINGS
-
Constants
FindItem
flags
CTFI_NONE
- 0x0000
CTFI_RECT
- 0x0001
CTFI_IMAGE
- 0x0002
CTFI_TEXT
- 0x0004
CTFI_TOOLTIP
- 0x0008
CTFI_TABVIEW
- 0x0010
CTFI_HIGHLIGHTED
- 0x0020
CTFI_CANCLOSE
- 0x0040
CTFI_LAST
- CTFI_CANCLOSE
CTFI_ALL
- 0xFFFF
#define
the following constants before you #include CustomTabCtrl.h
to redefine them.
- Scroll Repeat (milliseconds).
CTCSR_NONE
- 0
CTCSR_SLOW
- 100
CTCSR_NORMAL
- 25
CTCSR_FAST
- 10
- Drag and Drop Constants
CTCD_SCROLLZONEWIDTH
- 20 (pixels)
Methods
Note: This is one place where custom tab controls are dissimilar to common controls. Instead of sending messages to the window, you call public methods - much like working with the common control wrappers of WTL. If you want corresponding messages to these methods, then let me know.
SubclassWindow
- Call when you have an existing window, such as a static control, that you want to subclass into a custom tab control window.
GetTooltips
- Get the tooltip control window (the WTL tooltip control window wrapper is returned).
Get/SetImageList
- Images for tab items are kept in an image list. The WTL image list wrapper is used.
Get/SetScrollDelta
- The distance in pixels that each atomic scroll operation scrolls the view. Only valid when the CTCS_SCROLL
style is set. Valid values are 0-63.
Get/SetScrollRepeat
- When a scroll button is held down, the scroll repeat determines how quickly the atomic scroll operation is repeated. Only valid when the CTCS_SCROLL
style is set. A Windows timer is used to repeat the scroll. Valid values are: ectcScrollRepeat_None
, ectcScrollRepeat_Slow
, ectcScrollRepeat_Normal
, and ectcScrollRepeat_Fast
.
InsertItem
- Insert a new tab item. There are two versions of this method. The first allows you to pass the parameters for the tab item. The second allows you to call the CreateTabItem
method to create a new tab, set the parameters on that item, then insert the item (the tab control takes ownership of the item created with CreateTabItem
).
MoveItem
- Move an existing tab item to another index, and shift the affected tab item indexes.
SwapItemPositions
- Swap the positions of two tab items.
DeleteItem
- Delete a tab item.
DeleteAllItems
- Delete all the tab items.
GetItem
- Get the pointer to the tab item class. The tab item class will either be CCustomTabItem
, a class derived from CCustomTabItem
, or a class with the same interface as CCustomTabItem
.
Get/SetCurSel
- The currently selected tab item. SetCurSel
will first send a notification that the selected item is about to change (CTCN_SELCHANGING
). If the receiver of the notification doesn't cancel the attempt, the current selection is changed, and another notification is sent to say the selection has changed (CTCN_SELCHANGE
).
GetItemCount
- Returns the number of tab items.
HitTest
- Determines which tab, if any, is at a specified position (in client coordinates).
EnsureVisible
- Ensures that the tab item specified is in view. Only really useful when CTCS_SCROLL
is set.
GetItemRect
- Get the RECT
of an item in client device coordinates.
HighlightItem
- Similar to TCM_HIGHLIGHTITEM
for SysTabControl32
and the MFC and WTL wrappers CTabCtrl::HighlightItem
.
FindItem
- Find the next tab item matching the search criteria The function is meant to mimic how CListViewCtrl::FindItem
and LVM_FINDITEM
work, since there are no comparable messages or functions for a tab control.
Acknowledgements
I'd like to thank Bjarke Viks�e for his original "Cool Tab controls" and for all of the other cool things on his web site that he so generously shares with the world. I'd also like to thank all the many others who have given feedback, made suggestions, and helped this become what it is today.
History
- 4 July, 2002 - updated source and demo.
- 22 November, 2002 - updated source and demo.
- 29 April, 2004 - updated source and demo. See the history of each file for a detailed description of changes.
- 29 June, 2004 - updated source and demo. See the history of each file for a detailed description of changes.
- 15 March, 2005 - updated source and demo. Support for VC 8.0, WTL 7.5, 64-bit, warnings level 4. Various minor bug fixes.
- 08 April, 2005 - updated source and demo. Support for
SetMinTabCountForVisibleTabs
.
- 14 July, 2005 - updated source and demo. HTML View focus enhancement, namespace qualify ATL and WTL use, various other minor bug fixes.