Click here to Skip to main content
13,089,504 members (58,959 online)
Click here to Skip to main content
Add your own
alternative version


65 bookmarked
Posted 24 Apr 2008

XGradientZoneBar - an MFC color gradient indicator bar

, 19 May 2008
Rate this:
Please Sign up or sign in to vote.
XGradientZoneBar displays an indicator bar that allows you to specify multiple zones that are filled with a color gradient, and includes APIs to set the bar orientation, font, and tick marks.
<TABLE style="MARGIN-LEFT: 20px" width=100%>
Winner April 2008
Monthly Competition


Let me start by saying that XGradientZoneBar is not a progress control. It is an indicator control, like those used in real-time displays of levels, etc.:


The basic idea is that of a bar control with multiple zones, each of which can be colored with gradient fill. Optionally, you can display text and tick marks (the image above shows example of four-zone XGradientZoneBar with box tick marks).

XGradientZoneBar Features and Behaviors

Except for tooltips, there is no user interaction with XGradientZoneBar control. The demo app reveals most of the XGradientZoneBar features:


The Color Schemes shown in screenshot are for demo purposes only, and are not built into XGradientZoneBar. To try demo, first select either the Horizontal or the Vertical bar, and then change the settings. You can always get back to the original demo settings with Reset button.

To get an idea of what XGradientZoneBar can be used for, click on Demo button:


XGradientZoneBar API

COLORREF GetBackgroundColor() Retrieves background color
CXGradientZoneBar& SetBackgroundColor(COLORREF cr, BOOL bRedraw = TRUE) Sets background color
void GetBarInfo(XGRADIENT_ZONE_BAR_INFO *pXZBI); Retrieves XGRADIENT_ZONE_BAR_INFO struct for bar
CXGradientZoneBar& SetBarInfo(XGRADIENT_ZONE_BAR_INFO *pXZBI); Sets bar options via XGRADIENT_ZONE_BAR_INFO struct
ORIENTATION GetBarOrientation() Retrieves bar orientation (HORIZONTAL or VERTICAL)
CXGradientZoneBar& SetBarOrientation(ORIENTATION eOrientation, BOOL bRedraw = TRUE) Sets bar orientation (HORIZONTAL or VERTICAL)
BOOL GetBold(); Retrieves bold setting
CXGradientZoneBar& SetBold(BOOL bBold, BOOL bRedraw = TRUE); Sets bold font
CString GetFontFaceName(); Retrieves font face name
int GetFontPointSize(); Retrieves font point size
CXGradientZoneBar& SetFont(LPCTSTR lpszFaceName, int nPointSize, BOOL bRedraw = TRUE); Sets font face name and point size
BOOL GetFont(LOGFONT *pLF); Retrieves LOGFONT struct for font
CXGradientZoneBar& SetFont(LOGFONT * pLogFont, BOOL bRedraw = TRUE); Sets font via LOGFONT struct
CFont* GetFont() Retrieves pointer to CFont member variable
CXGradientZoneBar& SetFont(CFont *pFont, BOOL bRedraw = TRUE); Sets font via CFont object
int GetMaxPercent() Retrieves max percent fill
CXGradientZoneBar& SetMaxPercent(int nMaxPercent, BOOL bRedraw = TRUE) Set percent of gradient fill to show; remainder will be filled with background color
CString GetText() Retrieves bar text
CXGradientZoneBar& SetText(LPCTSTR lpszText, BOOL bRedraw = TRUE) Sets bar text
TEXTALIGNHORIZONTAL GetTextAlignHorizontal() Retrieves bar text horizontal alignment (LEFT, RIGHT, CENTER)
CXGradientZoneBar& SetTextAlignHorizontal(TEXTALIGNHORIZONTAL eAlign, BOOL bRedraw = TRUE) Sets bar text horizontal alignment (LEFT, RIGHT, CENTER)
TEXTALIGNVERTICAL GetTextAlignVertical() Retrieves bar text vertical alignment (TOP, BOTTOM, VCENTER)
CXGradientZoneBar& SetTextAlignVertical(TEXTALIGNVERTICAL eAlign, BOOL bRedraw = TRUE) Sets bar text vertical alignment (TOP, BOTTOM, VCENTER)
COLORREF GetTextColor() Retrieves text color
CXGradientZoneBar& SetTextColor(COLORREF cr, BOOL bRedraw = TRUE) Set text color
UINT GetTextOrientation() Retrieves text orientation (0, 90 or 270)
CXGradientZoneBar& SetTextOrientation(UINT nTextOrientation, BOOL bRedraw = TRUE); Sets text orientation (0, 90 or 270)
COLORREF GetTickColor() Retrieves tick color
CXGradientZoneBar& SetTickColor(COLORREF cr, BOOL bRedraw = TRUE) Sets tick color
UINT GetTicksPerZone() Retrives number of ticks per zone
CXGradientZoneBar& SetTicksPerZone(UINT nTicksPerZone, BOOL bRedraw = TRUE) Sets number of ticks per zone
void GetTickSizes(UINT& nUnitTick, UINT& n10thTick) Retrieves tick sizes
CXGradientZoneBar& SetTickSizes(UINT nUnitTick, UINT n10thTick, BOOL bRedraw = TRUE) Sets tick sizes
CXGradientZoneBar& SetTickType(TICKMARKTYPE eTickMarkType, BOOL bRedraw = TRUE) Sets tick type (NOTICKMARKS, TOP_LEFT, BOTTOM_RIGHT, BOTH, BOX)
CString GetToolTipText() Retrieves tooltip text
CXGradientZoneBar& SetToolTipText(LPCTSTR lpszText, BOOL bRedraw = TRUE) Sets tooltip text
CXGradientZoneBar& SetZones(UINT nZones, XGRADIENT_ZONE *pZones, BOOL bRedraw = TRUE); Sets gradient bar zones

Tooltip Formats

There are five options for XGradientZoneBar tooltip format (including no tooltip):

Text + Percent
Percent + Text

How to use

The following steps assume you want to add XGradientZoneBar to a dialog. Steps would be similar for CFormView or CPropertyPage.

Step 1 - Add Files

To integrate CXGradientZoneBar into your app, you first need to add following files to your project:

  • XGradientZoneBar.cpp
  • XGradientZoneBar.h

Step 2 - Add Placeholder Rect to Dialog Resource

Next add a STATIC or other control to dialog resource, where you want the XGradientZoneBar to be displayed. The dialog for demo app looks like this:


Note that this step is not required, if you have some other way to specify where XGradientZoneBar should be displayed.

Step 3 - Create the Control

You need to do two things here: first, add #include statement to dialog class header file:
#include <span class="code-string">"XGradientZoneBar.h"</span>
and insert variable that looks like:
CXGradientZoneBar  m_GradientZoneBar;
Second, add code to OnInitDialog() function:
CRect rect;
VERIFY(m_GradientZoneBar.Create(AfxGetInstanceHandle(), 0,
    WS_CHILD | WS_VISIBLE, rect, this, IDC_BAR1));

Step 4 - Set XGradientZoneBar Options

According to your app's requirements, you will probably want to set one or more XGradientZoneBar options. Here are options set for Bar1 in demo app:
m_Bar1.SetBarOrientation(CXGradientZoneBar::VERTICAL, FALSE)
      .SetText(_T("Bar1"), FALSE)
      .SetFont(_T("Times New Roman"), 18, FALSE)
      .SetTextOrientation(90, FALSE)
      .SetZones(_countof(GreenToRed), GreenToRed, FALSE)
      .SetTickType(CXGradientZoneBar::TOP_LEFT, FALSE)
      .SetToolTipText(_T("This is Bar1"), FALSE)
      .SetToolTipType(CXGradientZoneBar::TEXT_TOOLTIP, FALSE)


Here are links to my articles on CodeProject, which I have used in demo app:

Revision History

Version 1.0 - 2008 April 24

  • Initial public release


This software is released into the public domain. You are free to use it in any way you like, except that you may not sell this source code. If you modify it or extend it, please to consider posting new code here for everyone to share. This software is provided "as is" with no expressed or implied warranty. I accept no liability for any damage or loss of business that this software may cause.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Hans Dietrich
Software Developer (Senior) Hans Dietrich Software
United States United States
I attended St. Michael's College of the University of Toronto, with the intention of becoming a priest. A friend in the University's Computer Science Department got me interested in programming, and I have been hooked ever since.

Recently, I have moved to Los Angeles where I am doing consulting and development work.

For consulting and custom software development, please see

You may also be interested in...

Comments and Discussions

GeneralWish~ Pin
dnest13-Apr-09 19:05
memberdnest13-Apr-09 19:05 
GeneralGood work as usual Pin
Hatem Mostafa4-May-08 20:31
memberHatem Mostafa4-May-08 20:31 
GeneralVS6 Compilation problem Pin
Ivan Krasko29-Apr-08 7:32
memberIvan Krasko29-Apr-08 7:32 
GeneralRe: VS6 Compilation problem Pin
Hans Dietrich29-Apr-08 8:43
mvpHans Dietrich29-Apr-08 8:43 
GeneralRe: VS6 Compilation problem Pin
Ivan Krasko29-Apr-08 10:17
memberIvan Krasko29-Apr-08 10:17 
GeneralExcellent! Pin
John Schroedl29-Apr-08 4:44
memberJohn Schroedl29-Apr-08 4:44 
GeneralEase up on the other Authors Pin
Jeffrey Walton25-Apr-08 23:41
mvpJeffrey Walton25-Apr-08 23:41 
GeneralRe: Ease up on the other Authors Pin
Hans Dietrich26-Apr-08 4:03
mvpHans Dietrich26-Apr-08 4:03 
GeneralRe: Ease up on the other Authors [modified] Pin
Darren Sessions30-Jun-08 8:04
memberDarren Sessions30-Jun-08 8:04 
GeneralPage not found Pin
SergioPDT24-Apr-08 23:11
memberSergioPDT24-Apr-08 23:11 
GeneralRe: Page not found Pin
John C25-Apr-08 6:56
memberJohn C25-Apr-08 6:56 
GeneralRe: Page not found Pin
SergioPDT25-Apr-08 7:08
memberSergioPDT25-Apr-08 7:08 
GeneralRe: Page not found Pin
John C25-Apr-08 7:25
memberJohn C25-Apr-08 7:25 
GeneralWow that is so cool! Pin
Reynolds Glisner24-Apr-08 18:34
memberReynolds Glisner24-Apr-08 18:34 
GeneralAgreed! 5! Pin
Marc Clifton24-Apr-08 9:23
protectorMarc Clifton24-Apr-08 9:23 
GeneralRe: Agreed! 5! Pin
Johnny J.19-May-08 21:05
memberJohnny J.19-May-08 21:05 
General5 Pin
John Simmons / outlaw programmer24-Apr-08 7:35
mvpJohn Simmons / outlaw programmer24-Apr-08 7:35 

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
Web02 | 2.8.170813.1 | Last Updated 20 May 2008
Article Copyright 2008 by Hans Dietrich
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid