HotEdit control that becomes 3D on "mouse over"

All Windows application look the same which is all well and good from the users perspective but how do you make your applications stand out without alienating the user?

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 deals with HotEdit, an edit control which becomes 'hot' when the mouse cursor passes over it. This is what the HotEdit control looks like normally:

Then, when the mouse cursor moves over the control it looks like this:

The HotEdit control is actually very simple to create with great results. Create a new class which is derived from CEdit, override a few message handlers and you have a HotEdit control.

The guts of the control is the DrawBorder function which is responsible for redrawing the border of the control.


void CHotEdit::DrawBorder(bool fHot)
{
 CRect rcItem; 
 DWORD dwExStyle = GetExStyle();
 CDC* pDC = GetDC();
 COLORREF clrBlack;
 int nBorderWidth = 0;
 int nLoop;
 
 GetWindowRect(&rcItem);
 ScreenToClient(&rcItem);

 clrBlack = RGB(0, 0, 0);

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

 if (dwExStyle & WS_EX_DLGMODALFRAME) {
  nBorderWidth += 3;
 }

 if (dwExStyle & WS_EX_CLIENTEDGE) {
  nBorderWidth += 2;
 }

 if (dwExStyle & WS_EX_STATICEDGE && !(dwExStyle & WS_EX_DLGMODALFRAME)) {
  nBorderWidth ++;
 }

// blank the border
 for (nLoop = 0; nLoop < nBorderWidth; nLoop++) {
  pDC->Draw3dRect(rcItem, m_clr3DFace, m_clr3DFace);
  rcItem.DeflateRect(1, 1);
 }
 rcItem.InflateRect(1, 1);

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

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

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

 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 CHotEdit::OnNcMouseMove(UINT nHitTest, CPoint point) 
{
 if (!m_fTimerSet) {
  DrawBorder();
  SetTimer(1, 10, NULL);
  m_fTimerSet = true;
 }
 CEdit::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 CHotEdit::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;
 }
 
 CEdit::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.

The HotEdit control also takes into account the various styles that can be applied to it and varies the size and style of the border according to the styles applied in the dialog editor.

Download demo project - 32 KB

Download source - 3 KB

Date Last Updated: February 2, 1999



Comments

  • Finally i wrote my own Activex Control...

    Posted by Legacy on 04/03/2003 12:00am

    Originally posted by: MohammadReza ZarrinPour

    finally i used this class in an activex,You can download my activex control from :
    http://www.codeproject.com/useritems/TextBoxEX.asp

    Reply
  • ExEditors Library

    Posted by Legacy on 03/19/2002 12:00am

    Originally posted by: Mike Philips

    A complete collection of editors in a single file:
    
    

    http://www.exontrol.com/sg.jsp?content=products/exeditors

    Regards,
    Mike

    Reply
  • Use TrackMouseEvent instead of timer

    Posted by Legacy on 08/03/2001 12:00am

    Originally posted by: Dinesh

    You can use _TrackMouseEvent instead of timer method. You can register for WM_MOUSELEAVE message that tells when the mouse is out of control.

    Reply
  • one problem

    Posted by Legacy on 06/28/1999 12:00am

    Originally posted by: sheik

    when you press enter within the box, it does not automatically press the OK button.

    Reply
  • Buddying a SpinButton

    Posted by Legacy on 02/10/1999 12:00am

    Originally posted by: Jeremy Davis

    How about a spin button buddy that becomes 3D at the same time as the CHotEdit control??

    I've done my own flat spin button that works separately to the CHotEdit. The code is pretty naff, but I can email you it if you like...

    Regards

    Jeremy

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

Top White Papers and Webcasts

  • On-demand Event Event Date: September 10, 2014 Modern mobile applications connect systems-of-engagement (mobile apps) with systems-of-record (traditional IT) to deliver new and innovative business value. But the lifecycle for development of mobile apps is also new and different. Emerging trends in mobile development call for faster delivery of incremental features, coupled with feedback from the users of the app "in the wild." This loop of continuous delivery and continuous feedback is how the best mobile …

  • Live Event Date: September 17, 2014 @ 12:00 p.m. ET / 9:00 a.m. PT Another day, another end-of-support deadline. You've heard enough about the hazards of not migrating to Windows Server 2008 or 2012. What you may not know is that there's plenty in it for you and your business, like increased automation and performance, time-saving technical features, and a lower total cost of ownership. Check out this upcoming eSeminar and join Rich Holmes, Pomeroy's practice director of virtualization, as he discusses the …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds