In this article, you will learn how to make a Nero-style progress bar that has multiple color segments.
If you use Nero Burning Rom to burn CDs and DVDs, you will without a doubt have noticed the "progress" indicator at the bottom of the compilation window. It shows how much of the disc space is currently used, and it is green as long as the files fit the disc. Depending on the settings, it becomes yellow and then red when the compilation files become too large to fit the available disc space.
I needed a bar like that for my current application, but couldn't find any that possessed the features I required. I did, however, find an article called "Vista Style Progress Bar" - author unlisted - that showed me how to make a very nice looking progressbar. It doesn't look like Nero's space indicator at all, but I was only interested in the color functionality anyway, so it doesn't matter a bit that the bar itself is much nicer looking.
The above link is for a "normal" progressbar, and even though it features three different colors, only one of them can be used at a time. And its value span is hardcoded to a value between 0 and 100.
The Work I Did Initially
I used the code which was originally in C# to make a similar control in VB.NET 2005.
First of all, I fixed two bugs in the control (value out of range check was done incorrectly and the control crashed when value was set to
Then I added a lot of stuff:
- A maximum and minimum value
- A 4th color: Yellow (the control can be expanded to support more colors if needed)
- The possibility to choose the number of color segments (1-3, where 1 = Standard progressbar)
- Properties for the colors and thresholds of the segments
- A property for whether or not the thresholds should be shown in the bar (in Nero, they are)
New in Version 1.3
The one thing I was really not content with was the color handling. I adapted the code from the original progressbar control, but it is not optimized to say the least. Every time you want to add a color, you have to add a lot of code. I would rather that the user could choose the colors freely instead of having to depend on the colors that are defined in the control. The problem is that in order to paint a colored segment, the control uses FOUR different shades of that color. Let's say that the user chooses the color "
Red" for Segment 1, then the control would have to calculate the three other shades of Red needed in order to be able to paint that segment.
I had absolutely no idea how to do that, but luckily I got a code sample from "Four13 Designs" in the message forum. It takes a given color and calculates a lighter or darker color using a correction factor on all three color components. Great, I thought - I can just use the colors that are already defined to find the correction factor for the three color shades I needed to calculate.
But it turned out that I couldn't do that. The original colors didn't have the same correction factors for the different shades, and they didn't even have the same correction factor between the three RGB components of the same color.
What was I to do? I wanted the "new and improved" control to look the same as the old one with the fixed color definitions. So I didn't want to dabble around with the correction factors myself and possibly create a control that looked different from the original.
I saw no solution to the problem, but I still wanted the user to be able to select the colors freely, so in the end I said "ah, what the f..." and using the old and beproved trial and error method, I came up with correction factors that worked for me, and - as far as I can see with the naked eye - produced colors very similar to the original colors.
My biggest problem was solved.
Please note: The
Segment2Color properties have changed. They're no longer based on the color
Enum, but are now true
Color objects. That means that if you've already done a project with a previous version, you will probably have to edit the property types in your form designer file.
Some other major changes in the new version are:
In version 1.2, I introduced a progress percentage text property. I show the value of the
NeroBar in percent in the bar. It dawned on me after I published the version that if you use the color segments to indicate a "too large" value like in Nero, then a percentage based on the entire width of the control would not be correct. Let's say you have the
MinValue 0, the
SegmentCount 2 and
Segment2StartThreshold 90 in order to show that up to 90 is acceptable, but over 90 is too much, then the percentage should show 100% when the value of the bar is 90 and 111% when the bar value is at 100 (too much, remember?)
So in this version, I've introduced a new property
PercentageBasedOn to solve that problem.
For the same application I made this control for, I needed some kind of count down indicator. I thought: Why not use the NeroBar for that too. I wanted the bar to start at max and then count down to 0. At a given point, I wanted the bar to change color to indicate that the countdown was almost over.
So I couldn't use the bar right off with different coilor segments. Instead I implemented a mode where the whole bar changes color when a threshold is passed (Property:
ColorChangeMode). That worked fine, but it looked kinda odd I thought. The bar would go from right to left, and to make it an indication of time passing by, I would have preferred the animation to go from left to right. So I even implemented a
RightToLeft property that reverses the bar functionality.
These new properties are demonstrated in the demo application as well. Just click the buttons at the bottom and check out the animation.
A Brief Description
There is really not much to explain: The properties are all shown in the demo application, but for giving information, I'll list the properties you will want to know about here:
Value (of course)
PercentageShow (The percentage text color and font are controlled by the Nerobar's
When you use the demo application, please note that there is no validation of the values, so it will be possible to set the properties to values that the NeroBar will not accept - thus generating an exception. It is merely provided to demonstrate the functionality of the control - not to be a 100% failsafe application.
I'm done now! I really have no more ideas how I can improve this control. If anybody can think of something, please let me know.
The only thing I could wish for is some kind of ruler or scale below or in the bar to help determining the progress. I'm going to have a look at that possibility, but rather than incorporating it into this control, I think I'm going to make it a control of its own. We'll see.
- Version 1.3 (December 12th, 2008)
- Version history in NeroBar.vb
- Enhancement: 100% user defined colors
- Enhancement: When setting "
Value" to a value higher than "
percentagetext will show "
> 100%" (can be more than 100% as well depending on the
- Enhancement: Added alpha channel transparency to user selected
GlowColor to "smoothen" the glow
- Enhancement: Progress percentage text can now be aligned using the
- New Feature: Progress percentage calculation can be based on segments - not just the whole control width
- New Feature:
ColorChangeMode - you can now choose if the whole bar should change color when a threshold is passed - or only the segments as before
- New Feature:
- New properties:
- Custom Visual Studio toobox icon
- Custom icon for demo application
- Bug Fix:
- Control crashed when Value is between 0 and 0.5 (reported by "Hendrikbez")
- Irrelevant inherited base properties hidden from designer property grid
- Updated demo project
- Version 1.2 (December 4th, 2008)
- Animated glow (Code adapted from Xasthom's Article)
- Percentage text
- New properties:
- Updated demo project
- Code restructured with regions for better overview
- Version 1.1 (November 26th, 2008)
- Two new colors
- New property:
- Updated demo project
- Version 1.0 (November 25th, 2008)