Dividing a CDialog in two areas with different backgrounds (picture of the objective inside)

Question

I need to build a window designed to look exactly like this (it has controls inside the white area, but that's not relevant for now):

http://dl.dropbox.com/u/3432167/example.png
My problem is defining those two separate "areas" with different backgrounds.
The closest I've got to the expected look was representing the white area with an empty ListBox, but the result is not the same (and it is a lousy hack).

Any ideas on how achieve this?

Answer 1

After some digging, I've discovered that a good way to do this is overriding the OnPaint function.
Below is an example used for the dialog pictured on the question above. The rectangle dimensions are hard-coded because this particular dialog is not resizeable.

Don't forget to add ON_WM_PAINT() to the message map.

void CTestDlg::OnPaint()
{
    if (IsIconic())
    {
        (...)
    }
    else
    {
        CPaintDC dc(this); // device context for painting
        dc.FillSolidRect(0,0,612,376, RGB(255,255,255));
        dc.FillSolidRect(0,376,612,60, ::GetSysColor(COLOR_3DFACE));
        CDialog::OnPaint();
    }
}

The solution ended up being quite simple, but I guess useful to share anyway.

Answer 2

If the dialog does not need to be resizable, the easiest way would be to create a bmp with the desired background (quite easy if you can use CDialogEx instead of CDialog - just need to call SetBackgroundImage).

If you can not use a bitmap then you will have to create your own control to draw this background.