Hot Combo Box Control

By making minor changed to the way that your application looks you can produce great looking applications which still feel the same to the user.

Everybody loves the new gadgets in Windows that look flat normally but become three dimensional when the mouse cursor moves over them. Unfortunately there doesn't seem to be any documentation on how to create these kinds of controls so I decided to make my own. I started with an edit control, this seemed to be the most simple. This article however deals with the HotComboBox control.

This is what the control looks like normally:

...and when the border is three dimensional, it looks like this:

The HotComboBox control also takes into account the different styles that can be applied to it so that when the border is three dimensional it looks just like a regular Windows control would. So you can still design your dialog boxes as you would normally but with the added benefit of the 'hot' control.


void CHotComboBox::DrawBorder(bool fHot)
{
 CDC *pDC = GetDC();
 CRect rcItem;
 DWORD dwExStyle = GetExStyle();

 GetWindowRect(&rcItem);
 ScreenToClient(&rcItem);

 if (!IsWindowEnabled()) {
  fHot = true;
 }

 // make sure that rcItem start at the smallest point
 if (dwExStyle & (WS_EX_STATICEDGE | WS_EX_DLGMODALFRAME)) {
  if (dwExStyle & WS_EX_STATICEDGE) {
   rcItem.DeflateRect(1, 1, 0, 0);
  }
  if (dwExStyle & WS_EX_DLGMODALFRAME) {
   rcItem.DeflateRect(1, 1, 0, 0);
  }
  rcItem.DeflateRect(1, 1, 0, 0);
  } else {
  rcItem.DeflateRect(1, 1);
 }

 if (fHot) {
  pDC->Draw3dRect(rcItem, m_clr3DDkShadow, m_clr3DLight);
  rcItem.InflateRect(1, 1);
  pDC->Draw3dRect(rcItem, m_clr3DShadow, m_clr3DHilight);

  if (dwExStyle & WS_EX_DLGMODALFRAME) {
   pDC->Draw3dRect(rcItem, m_clr3DShadow, m_clr3DFace);
   rcItem.InflateRect(1, 1, 0, 0);
   if (dwExStyle & WS_EX_STATICEDGE) {
    rcItem.DeflateRect(0, 0, 2, 2);
   } else {
    rcItem.DeflateRect(0, 0, 1, 1);
   }
   pDC->Draw3dRect(rcItem, m_clr3DDkShadow, m_clr3DDkShadow);
  }

  if (dwExStyle & WS_EX_STATICEDGE) {
   if (dwExStyle & WS_EX_DLGMODALFRAME) {
    rcItem.InflateRect(1, 1);
   } else {
    rcItem.InflateRect(1, 1, 0, 0);
   }
   pDC->Draw3dRect(rcItem, m_clr3DShadow, m_clr3DHilight);
  }
 } else {
  pDC->Draw3dRect(rcItem, m_clr3DFace, m_clr3DFace);
  rcItem.InflateRect(1, 1);
  pDC->Draw3dRect(rcItem, m_clr3DFace, m_clr3DFace);

  if (dwExStyle & WS_EX_DLGMODALFRAME) {
   rcItem.InflateRect(1, 1, 0, 0);
   if (dwExStyle & WS_EX_STATICEDGE) {
    rcItem.InflateRect(0, 0, 1, 1);
    pDC->Draw3dRect(rcItem, m_clr3DFace, m_clr3DFace);
    rcItem.DeflateRect(0, 0, 3, 3);
   } else {
    rcItem.DeflateRect(0, 0, 1, 1);
   }
   pDC->Draw3dRect(rcItem, m_clr3DFace, m_clr3DFace);
  }

  if (dwExStyle & WS_EX_STATICEDGE) {
   if (dwExStyle & WS_EX_DLGMODALFRAME) {
    rcItem.InflateRect(1, 1);
   } else {
    rcItem.InflateRect(1, 1, 0, 0);
   }
   pDC->Draw3dRect(rcItem, m_clr3DFace, m_clr3DFace);
  }
 }

 ReleaseDC(pDC);
}
Various message handlers are overridden in order to set various internal flags which dictate whether the control is hot or not. These flags affect whether the controls border is displayed or not.

In order to check whether the control is hot or not, a timer is started whenever mouse movement is detected. By overriding the OnMouseMove and OnNcMouseMove message handlers we are able to detect when the mouse cursor is over the control.


void CHotComboBox::OnNcMouseMove(UINT nHitTest, CPoint point) 
{
 if (!m_fTimerSet) {
  DrawBorder();
  SetTimer(1, 10, NULL);
  m_fTimerSet = true;
 }

 CComboBox::OnNcMouseMove(nHitTest, point);
}

You will notice that an internal flag is set when the timer is set to avoid setting the timer if the timer has already been set. The timer is set to an interval of 10 milliseconds, you can change this to be faster or slower if you feel you need to.

Now, every 10 milliseconds we receive a notification that the timer has been triggered. This will allow us to check whether the mouse cursor is still over the control. While the mouse cursor is over the control, the three-dimensional border is displayed.


void CHotComboBox::OnTimer(UINT nIDEvent) 
{
 POINT pt;
 GetCursorPos(&pt);
 CRect rcItem;
 GetWindowRect(&rcItem);

 // if the mouse cursor within the control?
 if(!rcItem.PtInRect(pt)) {
  KillTimer(1);

  m_fTimerSet = false;

  if (!m_fGotFocus) {
   DrawBorder(false);
  }
  return;
 }

 CComboBox::OnTimer(nIDEvent);
}
As soon as the mouse is no longer over the control the timer is killed and the border is made flat again.

It is also worth noting at this point that the border is permanently displayed as three-dimensional when the control has focus. Overriding the OnSetFocus and OnKillFocus message handlers allows us to set another internal flag which records whether the control has focus or not.

Download demo project - 34 KB

Download source - 3 KB

Date Last Updated: February 4, 1999



Comments

  • Non-actual

    Posted by Legacy on 02/01/2001 12:00am

    Originally posted by: Sergey Zolotorev

    For this effect see Cool Controls Manager (real cool manager) by Bogdan Ledwing... :-(

    Reply
  • How do you make the dropdown button flat?

    Posted by Legacy on 07/12/1999 12:00am

    Originally posted by: Isaac

    The code looks great, but how do you make the dropdown button flat when the mouse is not over the combobox, and then 3-D when it is?

    Reply
Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Live Event Date: August 27, 2015 @ 2:00 p.m. ET / 11:00 a.m. PT With the cloud enabling companies to spin up servers and stand up data stores more quickly, mobile apps can be created faster, reducing the time-to-value. But three major obstacles stand in the way for many organizations: The backlog of app project requests confronting every enterprise regardless of their internal app development capabilities Finding and employing better, faster tools to speed and simplify the process of developing those apps. …

  • Lenovo recommends Windows 8 Pro. "I dropped my laptop getting out of the taxi." This probably sounds familiar to most IT professionals. If your employees are traveling, you know their devices are in for a rough go. Whether it's a trip to the conference room or a convention out of town, any time equipment leaves a user's desk it is at risk of being put into harm's way. Stay connected at all times, whether at the office or on the go, with agile, durable, and flexible devices like the Lenovo® …

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date