 |
Desktop Development »
Progress Controls »
General
Intermediate
License: The Code Project Open License (CPOL)
NeroBarBy Johnny J.A Nero style "progress" bar with multiple color segments |
VB (VB 8.0, VB 9.0).NET 2.0, WinXP, Vista, .NET 3.0, .NET 3.5, GDI, GDI+, Dev
|
|
Advanced Search Add to IE Search |
|
|
||||||||||||||||||
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.
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 0).
Then I added a lot of stuff:
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 Segment1Color, Segment2Color and 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 MaxValue 100, 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 an 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.
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) MinValue MaxValue SegmentCount Segment2StartThreshold Segment3StartThreshold Segment1Color Segment2Color Segment3Color DrawThresholds ColorThresholds GlowMode GlowSpeed GlowPause GlowColor PercentageShow (The percentage text color and font are controlled by the Nerobar's ForeColor, Font and TextAlign properties) PercentageBasedOn RightToLeft ColorChangeMode 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 it's own. We'll see.
PercentageBasedOn setting) TextAlign property ColorChangeMode - you can now choose if the whole bar should change color when a threshold is passed - or only the segments as before PercentageBasedOn, RightToLeft, ColorChangeMode, TextAlign GlowMode, GlowSpeed, GlowPause, GlowColor, PercentageShow NeroBarToolStripMenuItem control ColorThresholds 
General 
News 
Question 
Answer 
Joke 
Rant 
Admin
|
PermaLink |
Privacy |
Terms of Use
Last Updated: 12 Dec 2008 Editor: Chris Maunder |
Copyright 2008 by Johnny J. Everything else Copyright © CodeProject, 1999-2009 Web21 | Advertise on the Code Project |
