Need tutorial on Tab Controls in Windows API

Just wondering if there is any excellent tutorials on Tab Controls in Windows API?

I tried MSDN, but they don't really explain it well enough for me to learn it. A nice descriptive tutorial on this would be helpful.

If it helps, I'm trying to develop a dialog application that has a tabbed interface. This will officially be my first professional and most of all useful win32 program (if I ever get it working that is :)) I just need reliable resources for my learning experiences as I progress through this code. For now, I need information on tab controls :D

I have a big thing against MFC, I don't like how it works. That's my own personal opinion. So, that's why I like Windows API... :)

Again, thanks!

*bump*

No one wants to help? :(

[Moved thread]

Quote:

Originally Posted by MrDoomMaster

I have a big thing against MFC, I don't like how it works. That's my own personal opinion. So, that's why I like Windows API... :)

I like you ... ;) :D

why not searching the cg articles and/or other developer site articles??
or ask grandfather google ... ;)

I learned from examples, so I will provide you with one:

Code:

#include <windows.h> #include <prsht.h> #include "resource.h" static const TCHAR szIniFile[] = TEXT("C:\\test.ini"); typedef struct SETTINGS { TCHAR szEdit1[MAX_PATH]; TCHAR szEdit2[MAX_PATH]; TCHAR szEdit3[MAX_PATH]; } SETTINGS, *PSETTINGS; BOOL LoadSettings(HWND hwnd, PSETTINGS pSettings) { if (!GetPrivateProfileStruct("Test", TEXT("Data"), pSettings, sizeof(SETTINGS), szIniFile)) { // Could not read INI or it doesn't exist. Use default settings... lstrcpy(pSettings->szEdit1, "Init1"); lstrcpy(pSettings->szEdit2, "Init2"); lstrcpy(pSettings->szEdit3, "Init3"); } return TRUE; } BOOL SaveSettings(HWND hwnd, PSETTINGS pSettings) { return WritePrivateProfileStruct("Test", TEXT("Data"), pSettings, sizeof(SETTINGS), szIniFile); } VOID CenterDialog(HWND hwnd) { RECT rcDialog; GetWindowRect(hwnd, &rcDialog); int cxDialog = rcDialog.right - rcDialog.left; int cyDialog = rcDialog.bottom - rcDialog.top; RECT rcWorkArea; SystemParametersInfo(SPI_GETWORKAREA, NULL, &rcWorkArea, NULL); int cxWorkArea = rcWorkArea.right - rcWorkArea.left; int cyWorkArea = rcWorkArea.bottom - rcWorkArea.top; SetWindowPos(hwnd, NULL, rcWorkArea.left + (cxWorkArea - cxDialog) / 2, rcWorkArea.top + (cyWorkArea - cyDialog) / 2, 0, 0, SWP_NOSIZE | SWP_NOACTIVATE); } BOOL CALLBACK DialogProcOptions(HWND hwnd, UINT message, WPARAM wParam, LPARAM lParam) { static PSETTINGS pSettings; switch (message) { case WM_INITDIALOG: CenterDialog(GetParent(hwnd)); pSettings = (PSETTINGS) ((LPPROPSHEETPAGE) lParam)->lParam; return TRUE; case WM_NOTIFY: switch (((LPNMHDR)lParam)->code) { case PSN_SETACTIVE: switch (PropSheet_HwndToIndex(GetParent(hwnd), hwnd)) { case 0: SetWindowText(GetDlgItem(hwnd, IDC_EDIT1), pSettings->szEdit1); break; case 1: SetWindowText(GetDlgItem(hwnd, IDC_EDIT2), pSettings->szEdit2); break; case 2: SetWindowText(GetDlgItem(hwnd, IDC_EDIT3), pSettings->szEdit3); break; } break; case PSN_APPLY: switch (PropSheet_HwndToIndex(GetParent(hwnd), hwnd)) { case 0: GetWindowText(GetDlgItem(hwnd, IDC_EDIT1), pSettings->szEdit1, sizeof(pSettings->szEdit1) / sizeof(TCHAR)); break; case 1: GetWindowText(GetDlgItem(hwnd, IDC_EDIT2), pSettings->szEdit2, sizeof(pSettings->szEdit2) / sizeof(TCHAR)); break; case 2: GetWindowText(GetDlgItem(hwnd, IDC_EDIT3), pSettings->szEdit3, sizeof(pSettings->szEdit3) / sizeof(TCHAR)); break; } break; } return TRUE; default: return FALSE; } } BOOL CALLBACK PropSheetProc(HWND hwnd, UINT uMsg, LPARAM lParam) { typedef struct DLGTEMPLATEEX { WORD dlgVer; WORD signature; DWORD helpID; DWORD exStyle; DWORD style; WORD cDlgItems; short x; short y; short cx; short cy; } DLGTEMPLATEEX, *LPDLGTEMPLATEEX; switch (uMsg) { case PSCB_INITIALIZED: { LOGFONT lf = {0}; lf.lfCharSet = DEFAULT_CHARSET; lf.lfHeight = 13; lstrcpy(lf.lfFaceName, TEXT("Tahoma")); HFONT hFont = CreateFontIndirect(&lf); SendMessage(PropSheet_GetTabControl(hwnd), WM_SETFONT, (WPARAM) hFont, TRUE); SendMessage(GetDlgItem(hwnd, IDOK), WM_SETFONT, (WPARAM) hFont, TRUE); SendMessage(GetDlgItem(hwnd, IDCANCEL), WM_SETFONT, (WPARAM) hFont, TRUE); return TRUE; } case PSCB_PRECREATE: if (((LPDLGTEMPLATEEX)lParam)->signature == 0xFFFF) ((LPDLGTEMPLATEEX)lParam)->style &= ~DS_CONTEXTHELP; else ((LPDLGTEMPLATE)lParam)->style &= ~DS_CONTEXTHELP; return TRUE; } return 0; } int WINAPI WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, PSTR pCmdLine, int CmdShow) { SETTINGS settings = {0}; LoadSettings(NULL, &settings); // Define the property pages... PROPSHEETPAGE psp[3] = {0}; for (int i = 0; i < 3; i++) { psp[i].dwSize = sizeof(PROPSHEETPAGE); psp[i].hInstance = hInstance; psp[i].pszTemplate = MAKEINTRESOURCE(IDD_PROPPAGE1 + i); psp[i].lParam = (LPARAM) &settings; psp[i].pfnDlgProc = DialogProcOptions; } // Define the property sheet... PROPSHEETHEADER psh = {0}; psh.dwSize = sizeof(PROPSHEETHEADER); psh.dwFlags = PSH_USEICONID |PSH_PROPSHEETPAGE | PSH_USECALLBACK | PSH_NOAPPLYNOW; psh.hwndParent = NULL; psh.hInstance = hInstance; psh.pszIcon = MAKEINTRESOURCE(IDI_ICON1); psh.pszCaption = TEXT("<Application Name> Properties"); psh.nPages = sizeof(psp) / sizeof(PROPSHEETPAGE); psh.ppsp = (LPCPROPSHEETPAGE) &psp; psh.pfnCallback = PropSheetProc; if (PropertySheet(&psh)) SaveSettings(NULL, &settings); return 0; }

The code will load/save a struct from an INI file into the property sheets. It creates three sheets, changes the font to Tahoma, removes the help icon, and centers the dialog.

Look through it and if you have any questions, post them here.

Also, this page frm MSDN will be a huge help:
http://msdn.microsoft.com/library/de.../propsheet.asp

Well, thanks for your responses guys.

Unfortunately, I have already reviewed MSDN's articles on Tab Controls and Property Sheets, yet I don't find them reliable resources to learn on. Perhaps they are adequate for programmers that have had prior experience with tab controls and are very familiar with the functions, structures, and terminology of creating tab controls.

I, however, have not had ANY experience with tab controls except that of which I have learned so far.

As of thus far, I was able to create a dialog in the dialog editor, create a handle for this dialog as my main modeless dialog box. Then, I have create a tab control using CreateWindow(), and I have created my own function for quickly adding a tab to a dialog and returning its index.

Code:

int CreateTab(HWND TabCtrl, LPSTR Description) { TCITEM Tab; Tab.mask = TCIF_TEXT; Tab.pszText = Description; return TabCtrl_InsertItem(TabCtrl, 0, &Tab); }

using this function, I created one tab for my tab control. I have also stored this index of the tab in an int array.

Now, I am working on creating a dialog inside of the dialog editor, which has no border and will be attached to the first page of my tab control. Now that I have this dialog done, I don't know how to attach it, or make sure it's the right size, or any of that stuff.

All I know this far I have learned from talking to knowledgable people. If there are no detailed tutorials that can help me out, maybe one of you would make a good personal resource, in case I have questions? I know it's troublesome having to answer a lot of questions for us tab dialog newbies, but perhaps someone won't mind? :)

If no one knows any dialog tutorials, could you give your AIM/Yahoo IM/MSN/ICQ user name, so I can ask questions if need be? On the fly way of me getting answers instead of posting in the forums and waiting hours for reliable answers :D

In any case, I thank you for your example but it is really cryptic to me at the moment.

Well, let's start out with the basics...

We need to create the property sheet pages (or tabs) for the property sheet dialog. We do this be creating an array of PROPSHEETPAGE structures. In this example, I create 3 pages (tabs) for my property sheet dialog.

Code:

// Define the property pages... PROPSHEETPAGE psp[3] = {0}; for (int i = 0; i < 3; i++) { psp[i].dwSize = sizeof(PROPSHEETPAGE); psp[i].hInstance = hInstance; psp[i].pszTemplate = MAKEINTRESOURCE(IDD_PROPPAGE1 + i); psp[i].pfnDlgProc = DialogProcOptions; }

The params should be pretty self-explanatory. The pszTemplate points to the resource of the property page. In this case, I have already created dialogs with ID's of:
IDD_PROPPAGE1
IDD_PROPPAGE2
IDD_PROPPAGE3

and their values in my resource.h file are consecutive. IDD_PROPPAGE1 has a value of 105, IDD_PROPPAGE2 = 106, and IDD_PROPPAGE3 = 107. So, I can easily set their pszTemplate value by using a loop and just adding i to the value of IDD_PROPPAGE1. Hope that makes sense.

pfnDialogProc is just a pointer to an application-defined procedure that is used for your propery sheet dialog, just like any old dialog box procedure. Mine is named DialogProcOptions.

Now that I have my individual pages created, I just need to add them to the main property sheet dialog. That main property sheet dialog is defined by the PROPSHEETHEADER structure. So, I create the structure and add the array of pages:

Code:

// Define the property sheet... PROPSHEETHEADER psh = {0}; psh.dwSize = sizeof(PROPSHEETHEADER); psh.dwFlags = PSH_USEICONID |PSH_PROPSHEETPAGE | PSH_NOAPPLYNOW; psh.hwndParent = NULL; psh.hInstance = hInstance; psh.pszIcon = MAKEINTRESOURCE(IDI_ICON1); psh.pszCaption = TEXT("<Application Name> Properties"); psh.nPages = sizeof(psp) / sizeof(PROPSHEETPAGE); psh.ppsp = (LPCPROPSHEETPAGE) &psp;

You can check the values of the dwFlags params in MSDN, but the keys here are the nPages variable (# of pages in the property sheet dialog) and the ppsp variable (pointer to the property sheet pages array that we created first).

So, you've created the individual pages (tabs) for your property sheet, and now you've created the property sheet to hold those pages. Now, you can call the function to load the dialog:

Code:

PropertySheet(&psh);

Now that the dialog is loaded, it will call the application-defined callback function that you defined in the beginning FOR EACH PAGE. An example of this call function is as follows:

Code:

BOOL CALLBACK DialogProcOptions(HWND hwnd, UINT message, WPARAM wParam, LPARAM lParam) { switch (message) { case WM_NOTIFY: switch (((LPNMHDR)lParam)->code) { case PSN_SETACTIVE: switch (PropSheet_HwndToIndex(GetParent(hwnd), hwnd)) { case 0: // Tab 1 was clicked. Initialize it. break; case 1: // Tab 2 was clicked. Initialize it. break; case 2: // Tab 3 was clicked. Initialize it. break; } break; case PSN_APPLY: switch (PropSheet_HwndToIndex(GetParent(hwnd), hwnd)) { case 0: // Apply was clicked. Save tab 1 data. break; case 1: // Apply was clicked. Save tab 2 data. break; case 2: // Apply was clicked. Save tab 3 data. break; } break; } return TRUE; default: return FALSE; } }

Not much to it. Trust me, it was a pain figuring out how this all worked, but you can just use my template above as your callback function and it should help immensly.

The procedure will receive notifications (WM_NOTIFY) whenever an event occurs in your property sheet. You determine which event occured by examining the code member of the NMHDR structure that is pointed to by lParam.

I have accounted for the following two notifications:
PSN_SETACTIVE -- A property sheet page is becoming active (tab was clicked, etc.)
PSN_APPLY -- the Apply button was clicked. Save your data on each page.

In this example, each page uses the same callback function. You don't have to design your property sheet that way. Back in the beginning, I created a loop to initialize my three pages and I set the pfnDlgProc member to DialogProcOptions for each page. You could make this different for each page, if you wish, maybe:

DialogProcPage1
DialogProcPage2
...

Then, you'd know exactly which page you're processing. In my example, though, I've decided to use the same callback function for all the pages. If you follow that example, you'll need a way to determine which page is currently being processed. I use the PropSheet_HwndToIndex() function to convert the HWND of the property page to an index.

Well, I hope that's enough to get your started!

Nice explanation Bond :thumb:

I have done lots of property sheets before and usually do all of my initialization in WM_INITDIALOG. I don't see why things have to be re-initted each time you change the tab. There's only been one case where I've ever used PSN_SETACTIVE and that was because the options on that page were dependent on a setting from another page.

Also, you should use PSN_KILLACTIVE (in the same WM_NOTIFY case as PSN_SETACTIVE) for error handling when the Apply button is pressed.

Something like

Code:

... BOOL msgResult = FALSE; case PSN_KILLACTIVE: { if (ThereAreErrors()) msgResult = TRUE; // Do not let the Apply button take effect } ... return msgResult;

Wow bond, very helpful! A few inquiries:

1) Since my dialog app will be an app instead of a configuration dialog, do I need an apply button?

2) I see that your dialog resources are contiguous in numbering, 106, 107, etc. Using the dialog editor, is there a way to set the symbolic ID's to your liking? I realize I could open the resource.h file in the text editor and change it, but perhaps there is another way meant to do it? Keep in mind, I'm using Visual Studio .NET 2003

3) How can I ensure that the dialogs I create in the dialog editor (for my property pages) fit the property sheet? Somehow, I would need to make sure it was that correct size in the dialog editor, so I may better position any controls inside of it.

Thanks for your tutorial, it helped a LOT

Quote:

Originally Posted by MrDoomMaster

1) Since my dialog app will be an app instead of a configuration dialog, do I need an apply button?

I'm not sure what your program is, so I can't answer this. You'll have to determine if an apply button would facilitate the user's experience or not.

Quote:

Originally Posted by MrDoomMaster

2) I see that your dialog resources are contiguous in numbering, 106, 107, etc. Using the dialog editor, is there a way to set the symbolic ID's to your liking? I realize I could open the resource.h file in the text editor and change it, but perhaps there is another way meant to do it? Keep in mind, I'm using Visual Studio .NET 2003

I'm not sure. Maybe someone else could answer this. I just modify my resource.h file. :)

You could just create an array, like so:

Code:

static const UINT uPages[] = { IDD_PROPPAGE1, IDD_PROPPAGE2, IDD_PROPPAGE3 };

Then, use uPages[i] in your loop.

Quote:

Originally Posted by MrDoomMaster

3) How can I ensure that the dialogs I create in the dialog editor (for my property pages) fit the property sheet? Somehow, I would need to make sure it was that correct size in the dialog editor, so I may better position any controls inside of it.

The size of the property sheet will be the size of your largest property page, if I remember correctly.

Quote:

Originally Posted by Drum Bouncer

I have done lots of property sheets before and usually do all of my initialization in WM_INITDIALOG. I don't see why things have to be re-initted each time you change the tab. There's only been one case where I've ever used PSN_SETACTIVE and that was because the options on that page were dependent on a setting from another page.

Also, you should use PSN_KILLACTIVE (in the same WM_NOTIFY case as PSN_SETACTIVE) for error handling when the Apply button is pressed.

You're right. I was just trying to give a clear explanation of what happens when tabs are clicked, pages are loaded, etc.

WM_INITDIALOG is called once for each page, the first time a page is selected. PSN_SETACTIVE is called everytime a page is selected.

You'd probably be better off just using Drum Bouncer's suggestion and doing initialization for all of your pages in WM_INITDIALOG.

You said it sizes the property sheet to the largest dialog, but, what if I want my property sheet to extend to the very edges of my client rectangle in the dialog it is in?

The requirements would be for the property sheet to extend to the edges of the client rectangle, and for the property sheet pages to be big enough to fit the property sheet, which should be just a bit smaller than the client rect of the parent dialog because of the space required for the tabs

I'm not sure if I really understand what it is that you're trying to do, but if you look back to my first post in this thread, I used a CenterDialog function to position the property sheet dialog in the middle of the screen (work area). You could probably do something similar to set the size.

Here is how I understand it:

Create a dialog >> Create the property sheet and center/size it inside of the dialog >> add dialog resources to each of the tab pages?

Quote:

Originally Posted by MrDoomMaster

Here is how I understand it:

Create a dialog >> Create the property sheet and center/size it inside of the dialog >> add dialog resources to each of the tab pages?

No. You just need to create the pages in the dialog resource editor. You don't have to create the dialog that the pages will be housed in. The PropertySheet() function will automatically create a dialog, whose size will depend on the size of your largest page.

Once PropertySheet() has been called, your application-defined callback function will handle its messages. Handle the WM_INITDIALOG message in this procedure and re-size it as necessary.

Mr. Bond,

I tried to follow through your tutorial. When I compile the code, I got one ERROR:
error C2065: 'PropSheet_HwndToIndex' : undeclared identifier

Is 'PropSheet_HwndToIndex' declared somewhere else or what? Please help, I want to learn creating tab control this way.

Quote:

Originally Posted by jbp2004

Mr. Bond,

I tried to follow through your tutorial. When I compile the code, I got one ERROR:
error C2065: 'PropSheet_HwndToIndex' : undeclared identifier

Is 'PropSheet_HwndToIndex' declared somewhere else or what? Please help, I want to learn creating tab control this way.

Yeah, in prsht.h. Be sure to include it:

Code:

Minimum DLL Version comctl32.dll version 5.80 or later Header prsht.h Minimum operating systems Windows 2000, Windows NT 4.0 with Internet Explorer 5, Windows 98, Windows 95 with Internet Explorer 5

I want to use an actual tab control, not property sheets, as the tab control is housed in my main dialog. I think this is what the original poster wanted too. Does anyone know how to use *tab controls*? The MSDN docs for them are messy.

I've created my tab control, added the tabs, and have the dialogs I need to stick in it, but I can't find out how to actually display the dialogs inside the tab control. Any help would be greatly appreciated.

Don_PhrostByte,

I read your problem just this morning. We have the same problem but my problem was solve a few days ago. Now, let me try to help you.

You said, I've created my tab control, added the tabs, and have the dialogs I need to stick in it, but I can't find out how to actually display the dialogs inside the tab control. Any help would be greatly appreciated.

Well, the tutorial I wrote in about a day! starts from scratch (from making dialogs/windows using MSVC++ resource editor) It's up to you if you will go through the tutorial in its entirety or find the portion that will solve your problem.

I have submitted a copy of this tutorial here in CODEGURU but since it is still pending, let me give you the copy that I have uploaded to my website, it's here

Quote:

Originally Posted by jbp2004

I have submitted a copy of this tutorial here in CODEGURU but since it is still pending, let me give you the copy that I have uploaded to my website, it's here

Great work, jbp. I've found a few things in your code that should be updated, though.

For one, there's no need to handle the WM_DESTROY message when using a modal dialog box. EndDialog() in your WM_CLOSE handler takes care of the dialog cleanup. PostQuitMessage() is not needed since you're not creating a message loop (Windows creates it for you).

You should return FALSE (as opposed to false) from your DlgProc.

I'm not sure if you need to use so many global variables. For instance, nTab is declared as global, but is only used in DlgProc. Better to make it a static variable in DlgProc instead. hdc, nmptr, and tci are others. By the way, what is the use for hdc?

Finally, you're destroying the windows you create before you create them. But you're not destroying them when your dialog box closes.

All in all, great job!

Thank you for the corrections Mr. Bond, I can improve more!

I have updated the article based on Mr. Bond's corrections.
If you are looking for a tutorial on how to use tab control
read my article here

Thanks!

Quote:

Originally Posted by jbp2004

Thank you for the corrections Mr. Bond, I can improve more!

I have updated the article based on Mr. Bond's corrections.
If you are looking for a tutorial on how to use tab control
read my article here

Thanks!

looks good, still has some quirks:

TabProc should use a switch.
Only one HWND is used at one time for the tab pages, but there are 3 variables. Make it use one.

thanks though, it was a good refresher.

Re: Need tutorial on Tab Controls in Windows API

Quote:

Originally Posted by jbp2004

Don_PhrostByte,

I have submitted a copy of this tutorial here in CODEGURU but since it is still pending, let me give you the copy that I have uploaded to my website, it's here

The link is dead and I have not succeeded in locating this tutorial in codeguru. Please point me to where this tutorial ended up? Thanks.

Re: Need tutorial on Tab Controls in Windows API

Quote:

Originally Posted by jkoutavas

The link is dead and I have not succeeded in locating this tutorial in codeguru. Please point me to where this tutorial ended up? Thanks.

EasyWin32 Library

Re: Need tutorial on Tab Controls in Windows API

Wow I made a post that earned 3,500+ views :)

Re: Need tutorial on Tab Controls in Windows API

You can see working sample of property sheet embedded in a window in this thread.

Re: Need tutorial on Tab Controls in Windows API

Could someone please post a zip file with the source code for this?

I can get it to compile but when I run it the program exits immediately after briefly flickering a dialog window.

Not sure if some of the code was left as an exercise to the student or what.

I figure getting a response to this is a long shot as this thread is rather old.

I previously used a tabbed dialog box to do this but I understand that using a property sheet should make saving the settings of all pages a snap which was previously very painful.

Thanks

Re: Need tutorial on Tab Controls in Windows API

See MSDN samples instead.

Re: Need tutorial on Tab Controls in Windows API

Quote:

Originally Posted by HwHack

I can get it to compile but when I run it the program exits immediately after briefly flickering a dialog window.

Could you be more specific? What can you get to compile? Did you do a debug build and see what is a reason for an application to exit prematurely?
Are you using Visual Studio? If yes, what version?

Quote:

Originally Posted by fred100

See MSDN samples instead.

Could you please elaborate? What sample?

Re: Need tutorial on Tab Controls in Windows API

Sorry for being vague- I had been working on this so long it became difficult to step back.

I did resolve this issue.

I was trying to get the code example posted early in the thread from Bond to work.

I created a win32 project, copied the code in and added comctl32.lib in the compile options in VC++ 2005.

I had a couple of compile errors first time around due to resources not being defined so I just defined them as constants which didn't work out for me. When I went back and created proper dialog resources everything seemed to work.

I stumbled across this thread looking for a refresher on tabbed dialogs. What caught my eye here was the save functionality. After getting this program to work and understanding it, I am disappointed in the save functionality.

I have 2 questions.

Is there a painless way to save the user inputs to dialog boxes without using MFC? My application will have hundreds if not thousands of inputs when I am through and to manually pull every control item out is not nice and prone to error. Preferably some way that can self discover the control items that need saving and do it autonomously.

Secondly, whats the advantage to using a property sheet over a tabbed dialog? I dont see any distinct advantage unless you needed to create a wizard.

Thanks

Re: Need tutorial on Tab Controls in Windows API

Quote:

Originally Posted by HwHack

Is there a painless way to save the user inputs to dialog boxes without using MFC? My application will have hundreds if not thousands of inputs when I am through and to manually pull every control item out is not nice and prone to error. Preferably some way that can self discover the control items that need saving and do it autonomously.

Newer frameworks have the concept of data binding which allow you to connect a control to a datasource (which usually is a collection of items). Typically this sort of framework has the ability to track changes to each item and mark the item(s) as dirty. The data transfer between the control and the underlying bound item is handled automatically and dirty items can then be saved as needed. It would be quite a bit of work, but you can replicate this functionality.

Quote:

Originally Posted by HwHack

Secondly, whats the advantage to using a property sheet over a tabbed dialog? I dont see any distinct advantage unless you needed to create a wizard.

The advantage is layout. For all but the simplest design it will be easier to keep track of the controls for each page (assuming you use the resource editor) rather than putting all the controls on a dialog and hiding/showing the controls based on the selected tab.