Hybrid Edit Control that Combines Prompt Text and Edit Control

CodeGuru content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

This article was contributed by
Tom Archer.

Introduction

If you’ve ever used Intuit’s Quicken or Peachtree’s Accounting for Windows, you
may have noticed something called a “grey edit control” on some of the dialogs and views.
As you can see in the figure above, a grey edit control is one in which the text is
grey and italicized until the control has focus or until data has been entered into the
control. Where this little control becomes useful is in situations where there is simply
no room on the dialog (or view) for a static control telling the user what information
is required. An example might be the address portion of a form where
the controls are “nestled” so closely together that any attempt at placing static controls
near the edit controls would look awful. Another great example of where this control is
useful is when you want your dialog (or view)
to (as closely as possible) represent an actual paper document such as an invoice or
purchase order.

Rules for Display

Using the grey edit control, the programmer can have the control’s prompt be
displayed in the edit control itself. As you can see above, the rules that are used for displaying the data are very
simple. The grey and italicized font lets the user know that
what they are looking at is a prompt and not the data itself. After the control receives
focus, the grey text disappears so that the
user is not distracted. When the control loses focus, whether or not the grey
text returns depends on whether the user typed
any information into the control.

Using the CGreyEdit Control

To use the CGreyEdit control, all you need to do is instantiate it and call its
Init method function.

BOOL CGreyEdit::Init(UINT uiControlId,
                     CWnd *pParent,
                     const char*lpszDefaultText,
                     COLORREF lBackgroundColor,
                     UINT uiAlignment)

where

• uiControlId – Resource ID of the edit control you want to subclass
• pParent – Parent window of the control
• lpszDefaultText – Default, or prompt text, to be displayed until control has focus or user has entered data into the control
• lBackgroundColor – This value defaults to COLOR_WINDOWTEXT and represents the controls background color
• uiAlignment – Valid values include TA_CENTER, TA_LEFT or TA_RIGHT. Defaults to TA_LEFT

To use the control, smply create a member variable of type CGreyEdit
in your dialog or view class. Then call the object’s Init function. Here’s an
example of doing this:

BOOL CGreyEditTestDlg::OnInitDialog()
{
 //...
 m_editName.Init(IDC_EDT_NAME,
                 this,
                 _T("Last Name, First Name"),
                 RGB(255,0,0));
 //...
}

Downloads

Download demo project – 15 Kb

Download source – 3 Kb