Dialog box as a tab page has different background color from a tab control it belongs

Question

I am creating a dialog with a tab control. Each tab should show different set of controls, so I have created child dialog boxes in resource editor to behave like pages.

I have used instructions from this post to do this.

In resource editor I made dialog boxes without border, set their styles to Child, removed system menu, and I have set flags Control and Control Parent to true.

In my child dialog box procedures I have handled WM_INITDIALOG by adding EnableThemeDialgTexture(handleOfmyDialog, ETDT_ENABLETAB); and returning TRUE. No WM_ERASEBKGND, WM_PAINT or WM_CTLCOLORDLG have been overridden.

In main dialog box that contains tab control, I have created "child dialogs" with CreateDialog function, and have used MoveWindow to properly position them.

I did not use EndDialog to destroy "child dialogs" on IDCANCEL or WM_CLOSE, I think that they will get destroyed automatically.

I have used Visual Studio 2013 on Windows 8.1 to do all this.

There seems to be no problem on Windows 7 and Windows 8.1, but maybe my eyes are playing tricks with me, since the background color of the tab control is similar to the default background color of the dialog box. The problem is best seen on Windows XP, as shown on the picture below:

How can I make background color of "child dialogs" ( and their child controls like checkbox/trackbar/radio button/static control ) to be transparent ( match the background color of tab control )?

Thank you.

Answer 1

This is a pretty straight-forward problem. You can't see the mistake on later Windows version because they no longer use a gradient for the "texture". EnableThemeDialogTexture() worked just fine, your dialog certainly has the same texture as your tabcontrol. The brush origin starts at the upper-left corner of the dialog. Like it does for the tabcontrol. But the dialog is not positioned correctly, now the gradients are mis-aligned and the dialog no longer blends.

You need to move the dialog so it is located correctly inside the tab page area. The relevant line of code from the MSDN article:

// Size the dialog box. 
SetWindowPos(hwndDlg, NULL, 
    0, 0,                                                           // <=== here!
    rcTab.right + cyMargin + (2 * GetSystemMetrics(SM_CXDLGFRAME)), 
    rcTab.bottom + rcButton.bottom + (2 * cyMargin)
    + (2 * GetSystemMetrics(SM_CYDLGFRAME)) 
    + GetSystemMetrics(SM_CYCAPTION), 
    SWP_NOMOVE | SWP_NOZORDER); 

Positioned at (0, 0) in the client area of the tabcontrol, now the gradients align.

Answer 2

Hans’ observation is right, but with the wrong conclusions.

Indeed, EnableThemeDialogTexture() worked: There clearly is a gradient on the background of the Slider control. And indeed it does not line up with the tab control’s background.

However, this is not an alignment problem. The gradient you see on the Slider control is the correct gradient according to EnableThemeDialogTexture(). The gradient on the background is actually the wrong one. You can clearly see it with enhanced contrast – the background gradient is blocky and coarse, while the Slider’s gradient is perfectly fine.

I observed this exact behavior when the main window had the WS_CLIPCHILDREN style set while the Z order was wrong (tab above child). Move the child dialog boxes to the top of the Z order via SetWindowPos(child, HWND_TOP, 0, 0, 0, 0, SWP_NOACTIVATE | SWP_NOMOVE | SWP_NOSIZE) and it should align perfectly and not be blocky any more.