This tutorial 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 simple 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 of the progress bar.

Here are a few pictures that demonstrate a possible application of what i have just said:


(Center-Justified percent in 12pt Segoe UI font)


(Center-Justified custom text also in 12pt Segoe UI font)


(Left-Justified custom text in red 10pt Segoe UI font)

Those are actual cropped screenshots from my application.

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 Segoe UI. However, this is probably a better choice for an application because it is getting the default system font, but you can make it whatever you want.

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


5. (Code Below)

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

Now, to make all this easier on you, i have also created a method called SetProgressBarText that does all this automatically, which you can just copy/paste into your class if you like. With this method, i also added an option to be able to left-justify the text as well. Here it is

        /// <summary>
        /// Adds text into a System.Windows.Forms.ProgressBar
        /// </summary>
        /// <param name="Target">The target progress bar to add text into</param>
        /// <param name="Text">The text to add into the progress bar. 
        /// Leave null or empty to automatically add the percent.</param>
        /// <param name="Location">Where the text is to be placed</param>
        /// <param name="TextColor">The color the text should be drawn in</param>
        /// <param name="TextFont">The font the text should be drawn in</param>
        private void SetProgressBarText
            (
            System.Windows.Forms.ProgressBar Target, //The target progress bar
            string Text, //The text to show in the progress bar
            ProgressBarTextLocation Location, //Where the text is to be placed
            System.Drawing.Color TextColor, //The color the text is to be drawn in
            System.Drawing.Font TextFont //The font we use to draw the text
            ) 
        {

            //Make sure we didn't get a null progress bar
            if (Target == null) { throw new ArgumentException("Null Target"); }

            //Now we can get to the real code

            //Check to see if we are to add in the percent
            if (string.IsNullOrEmpty(Text))
            {
                //We are to add in the percent meaning we got a null or empty Text
                //We give text a string value representing the percent
                int percent = (int)(((double)(Target.Value - Target.Minimum) /
                    (double)(Target.Maximum - Target.Minimum)) * 100);
                Text = percent.ToString() + "%";
            }

            //Now we can add in the text

            //gr will be the graphics object we use to draw on Target
            using (Graphics gr = Target.CreateGraphics())
            {
                gr.DrawString(Text,
                    TextFont, //The font we will draw it it (TextFont)
                    new SolidBrush(TextColor), //The brush we will use to draw it

                    //Where we will draw it
                    new PointF(
                    // X location (Center or Left)
                        Location == ProgressBarTextLocation.Left ? 
                        5 : //Left side
                        progressBar1.Width / 2 - (gr.MeasureString(Text, //Centered
                        TextFont).Width / 2.0F),
                    // Y Location (This is the same regardless of Location)
                    progressBar1.Height / 2 - (gr.MeasureString(Text,
                        TextFont).Height / 2.0F)));
            }
        }

        public enum ProgressBarTextLocation
        {
            Left,
            Centered
        }

Conclusion

To actually use that method, you must call it 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 call this method. All it takes is a copy/paste. Enjoy!

History

This is the second version of this tutorial.

Ver. 1 - Demonstrated how to add the percent into the center of a progress bar without taking into account the text's width or height. There were also a few other bugs in v1's code.

Ver. 2 - Demonstrated how to add any text into a a progress bar, left or center justified. Bugs were fixed from v1's code. A method was also included that could be directly copy/pasted into any class.

Hi, thanks for that.

However, I cannot see CreateGraphics() of ToolStripProgressBar control.

Can you show me on how to draw string on it?

toolstrip controls don't draw themselves, thats why it doesn't exist.
you need to use the toolstrip itself to draw on them, i think...

Thanks, works like a charm!