Click here to Skip to main content
Click here to Skip to main content

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

, 11 Dec 2008
Rate this:
Please Sign up or sign in to vote.
Very quick and easy

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. percent.ToString() + "%"

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

  2. 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. 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. 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

    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

    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! 

License

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

About the Author

jacobjordan

United States United States
My real name is Jacob Jordan (no, really). I am currently 14 and have been programming in .NET for 3 years now. I am extremely skilled in both C# and VB.NET, and am learning other languages (C++, Java, and VB). I am also learning HTML and CSS, but those aren't my top priorities right now. I am NOT a nerd for the sole reason that nerds aren't cool.

Comments and Discussions

 
QuestionNot display PinmemberNguyenTrungK4a12-Apr-14 23:53 
GeneralRepainting problem [modified] PinmemberMebur27-Mar-09 3:26 
Questionon the web? PinmemberMSU_Tech20-Jan-09 4:03 
GeneralGood job PinmemberDonsw13-Dec-08 7:13 
GeneralCalculation of percentage PinmemberTobiasP9-Dec-08 0:36 
GeneralMinor tweak PinmemberJefis1-Dec-08 18:53 
GeneralA Few Tweaks PinmemberReuben20051-Dec-08 14:35 
GeneralRe: A Few Tweaks Pinmemberjacobjordan1-Dec-08 15:34 
GeneralMeasureString PinmemberMember 36753581-Dec-08 14:19 
GeneralRe: MeasureString Pinmemberjacobjordan1-Dec-08 15:49 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140721.1 | Last Updated 11 Dec 2008
Article Copyright 2008 by jacobjordan
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid