Dialog Box with gradient background and Color changing progress bar

• Download source files - 68.9 Kb
• Download demo project - 63.7 Kb

Introduction

This article describes a very small dialog based application allowing to change the color of the progress bar; using PBM_SETBARCOLOR to change the color of the bars, and PBM_SETBKCOLOR to change the backcolor of the the progress bar. The dialog box is filled with gradient colored background. The application can be used to create some good looking setup application with gradient background, and colored progress bar showing the progress of the setup.

Have a look at the following code...

BOOL CProgDlgDlg::OnEraseBkgnd(CDC* pDC)
{
      CPen myPen[60] ;
      int i ;
      CRect rect ;
      for (i = 0 ; i <= 60 ; i++) 
      myPen[i].CreatePen(PS_SOLID, 1, RGB ((i * 4),0,0));
      CPen *oldPen = pDC->SelectObject(&myPen[0]) ;
      GetClientRect(&rect);
      for(i = 0 ; i <= rect.bottom;)
      {
           pDC->MoveTo(0, i);
           pDC->LineTo(rect.right, i);
           i++;
           pDC->SelectObject (&myPen[i * 64 / rect.bottom]);
       }
       pDC->SelectObject(oldPen) ;
       return TRUE ; 
}

As you can see, there is no magical trick here, it's simple drawing lines from top to bottom of the dialog box using a color. Here, first we created an array of CPen. I made my code to go through a for loop to create a solid brush with a particular color. (You can use all the three colors to create the gradient effect). Using GetClientRect(), area of dialog box has been taken. Using the CDC pointer, we are drawing lines from top to bottom. As we move downwards in the loop, the intensity of the color increases giving a gradient effect.

To change the color of the progress bar:

void CProgDlgDlg::OnBtnColor() 
{
     CColorDialog dlg;
     if(dlg.DoModal() == IDOK)
     {
          color = dlg.GetColor();
          m_myProgress.SendMessage(PBM_SETBARCOLOR, 0, color);
     }
}

Call standard color dialog box using CColorDialog's object. Check whether the user has pressed OK or Cancel button. Extract the color using GetColor() in a COLORREF object. Simply send the message to the progress bar using SendMessage with the message as the first parameter and selected color as the last parameter.

That's it, you are ready with a gradient colored dialog box, and color changing progress bar.