Custom ProgressBar with images and coloring
From Visual WebGui Wiki
 |
This article will have a few sections added to it soon, based on the following article type skeleton: NewCodeSampleTemplate |
Contents |
Overview
This article demonstrates ideas on how a ProgressBar control can be customized. Two custom ProgressBar controls are created, with different customizations each. The first one makes it possible to dynamically override the images that are used to draw the ProgressBar at runtime, and the second one uses customized coloring to change the color of the bar of the ProgressBar depending on the value of the control.
This sample requires version 6.4.0 Release or later.
The application
The application itself is simple enough. Just run it and click the Button, and it will start a timer that will simulate a progress. For the middle control, the one with customized images, you can click any of the RadioBoxes to switch images that are used to render the control. 3 sets of images are used in the sample, extracted from equally many out-of-the-box themes, for this demonstration.
Details
The rendering of the out-of-the-box ProgressBar uses 4 images that actually make up the control at runtime. There is an image for the left and right edges, there is one for the main background and there is one for the bar itself. The background and bar images are repeated as necessary to represent the value of the control at any time. Changing any of those images is easily done with a theme, but in that case it will be a static change that will be effective while that theme is in use.
The first customization of this sample, the ImageProgressBar control, implements those images as public properties that can be changed at runtime. Using those properties, you can dynamically change the looks of the ProgressBar by supplying different images, as demonstrated in the application.
The second customization uses a different approach, as it is based on the out-of-the-box ProgressBar looks for everything, except the bar itself. The bar can change color depending on the current value of the ProgressBar. For that purpose, I chose to implement it with two Color type properties. The BarStartColor is the color the bar will have when the Value is at minimum. Another Color type property, BarColorIncrement, is used as the "increment" value for each percentage the value of ProgressBar increases. In fact, the BarColorIncrement is in a way a "decremental" value, which is best explained with the following: BarStarColor = 220;255;220 and BarColorIncrement=2;0;2 would start the color at 220;255;220 and when ProgressBar.Value reaches 1, the color would be 218;255;218.
Different logic for color changes can easily be implemented, and for that purpose you can take a look at the CalculatedColorValue() method, which should return as a string, the 6 hex digit representation of the calculated color.
Requirements
- This application works only on Visual WebGui v6.4.0 Release or later versions.
References
See also
