Click here to Skip to main content
11,925,896 members (59,842 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


98 bookmarked

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

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


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


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! 


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


About the Author

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.

You may also be interested in...

Comments and Discussions

QuestionNot display Pin
NguyenTrungK4a13-Apr-14 0:53
memberNguyenTrungK4a13-Apr-14 0:53 
GeneralRepainting problem [modified] Pin
Mebur27-Mar-09 4:26
memberMebur27-Mar-09 4:26 
Questionon the web? Pin
MSU_Tech20-Jan-09 5:03
memberMSU_Tech20-Jan-09 5:03 
GeneralGood job Pin
Donsw13-Dec-08 8:13
memberDonsw13-Dec-08 8:13 
GeneralCalculation of percentage Pin
TobiasP9-Dec-08 1:36
memberTobiasP9-Dec-08 1:36 
GeneralRe: Calculation of percentage Pin
igumen2-Sep-14 9:38
memberigumen2-Sep-14 9:38 
GeneralMinor tweak Pin
Jefis1-Dec-08 19:53
memberJefis1-Dec-08 19:53 
GeneralA Few Tweaks Pin
Reuben20051-Dec-08 15:35
memberReuben20051-Dec-08 15:35 
GeneralRe: A Few Tweaks Pin
jacobjordan1-Dec-08 16:34
memberjacobjordan1-Dec-08 16:34 
GeneralMeasureString Pin
Member 36753581-Dec-08 15:19
memberMember 36753581-Dec-08 15:19 
GeneralRe: MeasureString Pin
jacobjordan1-Dec-08 16:49
memberjacobjordan1-Dec-08 16:49 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    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 | Terms of Use | Mobile
Web02 | 2.8.151126.1 | Last Updated 11 Dec 2008
Article Copyright 2008 by jacobjordan
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid