August 26, 2015

[ MFC ] - Changing progressbar colour of CProgressCtrl

1. Introduction

A “Progress Bar Control” can be used to show the progress of a long running operation. In MFC, “CProgressCtrl” class is associated the progress bar control. In this article, we will see how to set the progress bar background as well as the progress colour. The background colour can be set using the class member function directly. But, for setting the bar colour we need to send the message to progress bar from the containing parent.

This article is applicable to Visual Studio 2005 or earlier. If you use, 2005 later versions, you can set the bar colour using ”SetBarColor” member function of the CProgressCtrl.

2. About the Example

Have a look at the below screenshot:

MFC Progress Bar Colour
Fig 1. MFC Progress Control with Different bar colour

The Start Progress button will start progress in default Gray background and blue bar colour (Depends on your windows Theme). The bar animation is simulated with an introduction of small delay while progressing. The Reset Progress button will reset the progress to the start of the progress. The Set Red button of the sample changes the background colour to white and foreground colour to Red.

3. Create the Application

Create a dialog-based application and name it as PrgrsClr. After the project is created, drag and drop a “Progress Control” from the toolbox to the dialog. In our example, the progress control ID is set to IDC_PROG_BAR. Similarly, add the other buttons as shown in the previous section. Handle the “BN_CLICKED” event for the buttons Start Progress, Reset Progress, Set Red. The below screen shot shows handling the BN_CLICKED for the Start Progress button.

Button Click Handler
Fig 2. Button Click Handler

Add a control variable for the Progress bar as shown in the below screenshot:

Adding CProgressCtrl control variable
Fig 3. Adding CProgressCtrl Control variable

1) Invoke Add Variable dialog from the Context menu by right clicking the class name from the class view tab (Marked as 1)
2) In the Add Member variable dialog, select the progress bar control id (Marked as 2)
3) Make sure the Category is set to Control (Marked as 3)
4) Provide the control variable name as m_ctrl_progress (Marked as 4) and click the finish button (Marked as 5)

4. Initialize Progress Bar

1) First, declare a function the header file, which we can use for initializing the progress bar. The code is below:

//Sample 01: Initialize Progress Bar
void InitProgress();

2) In the CPP file, the function InitProgress is implemented. The “CProgressCtrl::SetRange” function sets the progress bar range from number x -> y. In our case, we set the range for out progress control from 0 to 100. That means, when the progress control value is at 5, the bar appears at the initial stage and when the value is at 90 the bar approaches towards the end. In our case, each progress unit represents 1%. Next, the position is set at 0 using “CProgressCtrl::SetPos”. The progress control’s current position at zero indicates that the progress is not yet started.

//Sample 02: Initialize Progress Control
void CPrgrsClrDlg::InitProgress()

3) In the OnInitDialog of the class CPrgrsClrDlg, make a call to the InitProgress so that when the dialog appears, the progress control initialized to 0-100 Range and control start position is at zero.  Below is the code:

// Set the icon for this dialog.  The framework does this automatically
//  when the application's main window is not a dialog
SetIcon(m_hIcon, TRUE);                  // Set big icon
SetIcon(m_hIcon, FALSE);          // Set small icon

//Sample 03: Make a call to Progress Control


5.  Capturing the Progress - Simulated

1) In the Start Progress button click handler increment the progress bar position one by one with a delay of 100 milliseconds. Here a loop that runs for 100 times is used to increment the progress position. To set the delay of 100 milliseconds “Sleep” function is used. Below is the code:

void CPrgrsClrDlg::OnBnClickedButtonStart()
       //Sample 04: Start Progressing with a Delay
       for (int i = 0; i<=100; i++)

2) Make a call to the InitProgress in the Reset Progress button click handler. Below is the code:

void CPrgrsClrDlg::OnBnClickedButtonReset()
       //Sample 05: Reset the Progress Status

6. Changing the progress bar color

In the Set Red button click handler, the progress bar’s background color, as well as the Bar's color, is changed. The background color is set to white whereas the Bar color is set to Red. In VS2005 and earlier versions, the bar color can be set by sending the PBM_SETBARCOLOR” message to the progress bar. Below is the code:

void CPrgrsClrDlg::OnBnClickedButtonRed()
       //Sample 06: Change Background to white and Bar color to Red
       m_ctrl_progress.SetBkColor(RGB(255, 255, 255));
       m_ctrl_progress.SendMessage(PBM_SETBARCOLOR,0,RGB(255, 0, 0));


Video : Watch the running Example here

Source Code : Download

No comments:

Post a Comment

Leave your comment(s) here.

Like this site? Tell it to your Friend :)