Expanding and collapsing Dialogs

• Download demo project - 12.4 Kb
• Download source files - 1.5 Kb

Dialog in collapsed state

Dialog in expanded state

Sometimes it may be useful to show only the important part in a dialog and have a button usually labeled "More" that expands the dialog when the user clicks on it. Once the dialog is expanded, the "More" button displays "Less" and as soon as the user clicks on the "Less" button, the dialog will shrink to its initial size.

The CExpandDialog class performs this for you. All you have to to is add the DialogExpander.cpp file to your project and make some minor changes in your dialog class and template.

Modify the header file of your dialog class like this:

/////////////////////////////////////////////////////////////////////////////
// CExpandDialogDlg dialog

#include "DialogExpander.h"    //<<<< add here

...
class CExpandDialogDlg : public CDialog
{
...
protected:
...
    CExpandDialog m_ExpandDialog ;    //<<<< add here
...
}

Modify the OnInitDialog function dialog class like this:

BOOL CExpandDialogDlg::OnInitDialog()
{
    CDialog::OnInitDialog();


    m_ExpandDialog.Initialize(this, FALSE, IDC_MOREBUTTON, 
                    IDC_SHRINKMARK, IDC_EXPANDEDMARK,
                    IDC_LESSTEXT) ; //<<<< add here

    ...
}

With the class wizard, add a handler for the "More" button (e.g. OnMore()) and modify it like this:

void CExpandDialogDlg::OnMore() 
{
    m_ExpandDialog.OnExpandButton() ;
}

The dialog template must include two special static controls. One that indicates the position of the bottom of the dialog when it is in the collapsed state (1 on the legend below) and one that contains the string that should appear on the "More/Less" button when the dialog is in the expanded state (2 on the legend below). These two controls will not be shown because the CExpandDialog class will hide them automatically.

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)