Add the Percent (or Any Text) into a Standard Progress Bar Control

Introduction

This very short article discusses how to add text (like the percent as mentioned in the title, but you could add anything you please) into the middle of a progress bar. Instead of paying for some overpriced .NET control, you can accomplish this yourself in a very manner. I tried to accomplish this about a year ago when I wasn't a very good programmer at all, and failed. My attempt there was to have a label in the center of the progress bar and set its background color to transparent. However, that does not work because when the background color of a control is transparent, it will show what is behind it in its container. Since the label is contained in the form itself and not in the progress bar, that would result in you seeing through the label and the progress bar straight into the form's background color or background image. So, a label in the progress bar is out, what's next? The solution that I came up with is to use the progress bar's graphics to draw a string into the center.

Here is a picture of a progress bar I made that shows the percent in the middle.

That is an actual cropped screenshot from my application. It uses size 8.25 Arial font.

Using the Code

The original code I used to do this only took 2 lines of code. However, it had some bugs in it, and this is exactly what I use now:

int percent = (int)(((double)(progressBar1.Value - progressBar1.Minimum) /
(double)(progressBar1.Maximum - progressBar1.Minimum)) * 100);
using (Graphics gr = progressBar1.CreateGraphics())
{
    gr.DrawString(percent.ToString() + "%",
        SystemFonts.DefaultFont,
        Brushes.Black,
        new PointF(progressBar1.Width / 2 - (gr.MeasureString(percent.ToString() + "%",
            SystemFonts.DefaultFont).Width / 2.0F),
        progressBar1.Height / 2 - (gr.MeasureString(percent.ToString() + "%",
            SystemFonts.DefaultFont).Height / 2.0F)));
}

Let's analyze that. The percent variable is the calculated percent of the progress bar's value. Now, the next line is a bit more complicated. First, it is using the DrawString() method of the System.Drawing.Graphics class to draw text in the progress bar. Let's analyze each argument:

1. C#

   percent.ToString() + "%"

   That's really self-explanatory. It says what text will be displayed.

2. C#

   SystemFonts.DefaultFont   

   That is the font that is displayed. In my example screenshot, I used Arial. However, this is probably a better choice for an application because it is getting the default system font.

3. C#

   Brushes.Black

   That is the color of the text which can be easily changed. It can be a SolidBrush, which is a brush of a solid color. Or, if you want to get fancy, it can be another type of brush (for example, a TextureBrush, which has a texture defined by an image to assign it).

4. C#

   new PointF(progressBar1.Width / 2 - (gr.MeasureString(percent.ToString()  + "%",
   SystemFonts.DefaultFont).Width / 2.0F),
   progressBar1.Height / 2 - (gr.MeasureString(percent.ToString()  + "%",
   SystemFonts.DefaultFont).Height / 2.0F))   

   That is where the text will be drawn in relation to the progress bar's upper-left corner. It defines the upper-left corner of where the text will be drawn. This is the most important part and needs the most explanation. Let's take a look at how I arrived at those equations to center the text:

   X Position

   C#

   progressBar1.Width / 2 - (gr.MeasureString(percent.ToString()  + "%", 
   		SystemFonts.DefaultFont).Width / 2.0F)

   The progressBar1.Width / 2 part will return the center point (in pixels) of the progress bar horizontally. Now, the part using the MeasureString is calculates the width (in pixels) of the string to be drawn (percent.ToString()   + "%"). It then halves that value and subtracts it from progressBar1.Width / 2, so that the final X position will position the text's center point exactly in the progress bar's center point. 

   Y Position

   C#

   progressBar1.Height / 2 - (gr.MeasureString(percent.ToString()  + "%", 
   		SystemFonts.DefaultFont).Height / 2.0F) 

   As with the X point, progressBar1.Height / 2 calculates the center point of the progress bar vertically. Also like the X point, the MeasureString method is used to calculate the height of the text. It is then being halved, and subtracted from "progressBar1.Height / 2", to perfectly center the text vertically.

Conclusion

To actually use this code, you must place it right after you change the progress bar's value. If for some reason, the changing of the progress bar's value doesn't refresh it and clear the previously drawn text, simply call the Refresh method of the progress bar before you use this code. Of course, my progress bar was called progressBar1, but that can be easily changed. All it takes is a copy/paste. Enjoy!