Click here to Skip to main content
13,357,363 members (67,834 online)
Click here to Skip to main content
Add your own
alternative version


50 bookmarked
Posted 2 Aug 2004

Dialog Box with gradient background and Color changing progress bar

, 2 Aug 2004
Rate this:
Please Sign up or sign in to vote.
A small dialog based application that allows the user to change the color of progress bar.

Sample Image - ProgDlg.jpg


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]) ;
      for(i = 0 ; i <= rect.bottom;)
           pDC->MoveTo(0, i);
           pDC->LineTo(rect.right, 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.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Vikram Kashyap
Technical Lead
India India
Hi I am Vikram, did my computers from NIIT with excellent score. Passion for VC++/MFC and developing my own utilities. Loves to do a lot of R&D on registry. Working in VC++/MFC from the last 6 years with SQL and MS-Access database. Currently working as a Project Lead with an MNC in Gurgaon.

Got my articles posted on
1. Open Six Sites in one Browser
2. Customized icon in Message Box

Articles On CodeProject
1. Lock WorkStation the MFC Way
2. Gradient Dialog with a Colored ProgressBar
3. Move Start Button

You may also be interested in...


Comments and Discussions

Generaloutside array error Pin
Jan van Gelder11-Mar-11 1:22
memberJan van Gelder11-Mar-11 1:22 
GeneralMy vote of 1 Pin
joerg-schumann22-Jun-10 0:54
memberjoerg-schumann22-Jun-10 0:54 
GeneralOnEraseBkgnd(CDC* pDC) Pin
kmjackson6-May-09 7:18
memberkmjackson6-May-09 7:18 
Questionhow to make different cell with different colors. Pin
pramod19796-Jul-07 0:20
memberpramod19796-Jul-07 0:20 
QuestionHow to change color Pin
Shah Satish1-Feb-07 7:04
memberShah Satish1-Feb-07 7:04 
QuestionBackGround colour is overwrite on button Pin
laymark30-Sep-06 19:32
memberlaymark30-Sep-06 19:32 
Generalmanifest problem Pin
rollocool5-Feb-05 4:50
memberrollocool5-Feb-05 4:50 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.180111.1 | Last Updated 3 Aug 2004
Article Copyright 2004 by Vikram Kashyap
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid