• (2 Pages)
  • +
  • 1
  • 2

Add the percent into a progress bar

#1 jacobjordan  Icon User is offline

  • class Me : Perfection
  • member icon

Reputation: 113
  • View blog
  • Posts: 1,499
  • Joined: 11-June 08

Posted 07 September 2008 - 11:34 AM

This tutorial discusses how to add text, like the percent, into the middle of a progress bar. Instead of paying for some overpriced .NET control, you can accomplish this yourself very simply. 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 it's 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 it's 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 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.
http://www.dreamincode.net/forums/index.php?act=Attach&type=post&id=8218
That wasn't Photoshoped, it's a cropped screenshot from my actual application. That uses size 8.25 Arial font. Believe it or not, that only took 2 lines of code after i changed the progress bar's value.

And... here it is
int percent = (int)(((double)progressBar1.Value / (double)progressBar1.Maximum) * 100);
progressBar1.CreateGraphics().DrawString(percent.ToString() + "%", new Font("Arial", (float)8.25, FontStyle.Regular), Brushes.Black, new PointF(progressBar1.Width / 2 - 10, progressBar1.Height / 2 - 7));


Let's analyze that. The percent variable is the calculated percent of the the progress bar's value. Now, the next line is a bit more complicated. First, it is using the DrawString() method of the Systm.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. new Font("Arial", (float)8.25, FontStyle.Regular)
That is the font that is displayed.

3. Brushes.Black
That is the color of the text. That 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 a TextureBrush. A Texture Brush has a texture defined by an image to assign it.

4. new PointF(progressBar1.Width / 2 - 10, progressBar1.Height / 2 - 7)
That is where the text will be drawn. It defines the upper-left corner. This is the most important part and needs the most explaining. Let's take a look at how i arrived at those equations to center the text:

----- X Position: progressBar1.Width / 2 - 10
The "progressBar1.Width / 2" part will return the center point (in pixels) of the progress bar horizontally. Now, the "- 10" part is used to offset the text so it will be centered horizontally. If it wasn't there, the text would start at the center of the progress bar, and would be offset to the right. I know of no equation that, given the font's em-size and height, can calculate exactly the offset needed to accomplish this, but i find with size-8.25 Arial and 3 chars, 10 works fine.

----- Y Position: progressBar1.Height / 2 - 7
Like with the X point, "progressBar1.Height / 2" calculates the center point of the progress bar vertically. Also like the X point, the "- 7" part is used to offset the text so it will be centered vertically. Again, i know of no equation that will do this, but for size-8.25 Arial, 7 works fine for a vertical offset.

Those exact lines of code above is what i used to draw the picture at the top. All you have to do is, after you change the progress bar's value, put that code right after it. There is no need to refresh the progress bar, because changing the value does this for you. Of course, my progress bar was called "progressBar1", but that can be easily changed. All it takes is a copy/paste. Enjoy!

Attached image(s)

  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: Add the percent into a progress bar

#2 gbertoli3  Icon User is offline

  • DIC at Heart + Code
  • member icon

Reputation: 40
  • View blog
  • Posts: 1,162
  • Joined: 23-June 08

Posted 11 September 2008 - 07:17 AM

Nice! :^:
Was This Post Helpful? 0
  • +
  • -

#3 born2c0de  Icon User is offline

  • printf("I'm a %XR",195936478);
  • member icon

Reputation: 180
  • View blog
  • Posts: 4,667
  • Joined: 26-November 04

Posted 14 September 2008 - 04:33 AM

Extremely Useful.
Nicely done.
Was This Post Helpful? 0
  • +
  • -

#4 jasarien  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 16-September 08

Posted 16 September 2008 - 01:13 PM

I'm not sure if it's because of something I did, or a problem with the code or the system, but I had an issue with this.
The premise is that I had a form with a progress bar and a trackbar. When the trackbar's value is changed (by moving the slider), the method "update" is called.
The update method set's the progress bar's value to equal the value of the trackbar. Both bars are set with maximum values of 100 and start at 0.

Now when I add this code to add the percentage within the progress bar, I notice that when I change the value of the trackbar in increments of 1, sometimes the previous value is overlayed on top of the current value. Eg. when I change from 45% to 46% the 5 and 6 appear 'merged'.

Posted Image

Is this a problem with the code or with the way I'm updating the progress bar's value?
Was This Post Helpful? 0
  • +
  • -

#5 jacobjordan  Icon User is offline

  • class Me : Perfection
  • member icon

Reputation: 113
  • View blog
  • Posts: 1,499
  • Joined: 11-June 08

Posted 16 September 2008 - 05:51 PM

View Postjasarien, on 16 Sep, 2008 - 03:13 PM, said:

I'm not sure if it's because of something I did, or a problem with the code or the system, but I had an issue with this.
The premise is that I had a form with a progress bar and a trackbar. When the trackbar's value is changed (by moving the slider), the method "update" is called.
The update method set's the progress bar's value to equal the value of the trackbar. Both bars are set with maximum values of 100 and start at 0.

Now when I add this code to add the percentage within the progress bar, I notice that when I change the value of the trackbar in increments of 1, sometimes the previous value is overlayed on top of the current value. Eg. when I change from 45% to 46% the 5 and 6 appear 'merged'.

Posted Image

Is this a problem with the code or with the way I'm updating the progress bar's value?

This may happen in some cases. Simply put progressBar1.Refresh(); on the line before you draw the text. So basically, use this code:
 
progressBar1.Refresh();
int percent = (int)(((double)progressBar1.Value / (double)progressBar1.Maximum) * 100);
progressBar1.CreateGraphics().DrawString(percent.ToString() + "%", new Font("Arial", (float)8.25, FontStyle.Regular), Brushes.Black, new PointF(progressBar1.Width / 2 - 10, progressBar1.Height / 2 - 7));


That should take care of it.
Was This Post Helpful? 1
  • +
  • -

#6 gbertoli3  Icon User is offline

  • DIC at Heart + Code
  • member icon

Reputation: 40
  • View blog
  • Posts: 1,162
  • Joined: 23-June 08

Posted 07 October 2008 - 03:46 PM

Every time it updates it hides the text then shows after it has updated. I tried using the Refresh() but it does nothing.

My code is the exact same as yours.

Also, I am putting this code in a timer, it will update every second.
Was This Post Helpful? 0
  • +
  • -

#7 jacobjordan  Icon User is offline

  • class Me : Perfection
  • member icon

Reputation: 113
  • View blog
  • Posts: 1,499
  • Joined: 11-June 08

Posted 12 October 2008 - 05:05 PM

View Postgbertoli3, on 7 Oct, 2008 - 05:46 PM, said:

Every time it updates it hides the text then shows after it has updated. I tried using the Refresh() but it does nothing.

My code is the exact same as yours.

Also, I am putting this code in a timer, it will update every second.

Why use a timer? You only need to use this code after a line when you update the progress bar's value.
Was This Post Helpful? 0
  • +
  • -

#8 gbertoli3  Icon User is offline

  • DIC at Heart + Code
  • member icon

Reputation: 40
  • View blog
  • Posts: 1,162
  • Joined: 23-June 08

Posted 12 October 2008 - 05:15 PM

I don't need it anymore.

I was using a timer for my System Manager Project under the Performance Tab.

The progress bar was updating every second.
Was This Post Helpful? 0
  • +
  • -

#9 PsychoCoder  Icon User is offline

  • Google.Sucks.Init(true);
  • member icon

Reputation: 1637
  • View blog
  • Posts: 19,853
  • Joined: 26-July 07

Posted 10 November 2008 - 12:38 PM

Great tutorial, came in real handy. Thanks :)
Was This Post Helpful? 0
  • +
  • -

#10 rahatalionline  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 15-December 08

Posted 17 March 2009 - 03:57 AM

Perfect

Rahat
Was This Post Helpful? 0
  • +
  • -

#11 Mashego  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 20-March 09

Posted 20 March 2009 - 01:34 AM

Hi who to shurtdown the PC using C# source code.
Was This Post Helpful? 0
  • +
  • -

#12 jacobjordan  Icon User is offline

  • class Me : Perfection
  • member icon

Reputation: 113
  • View blog
  • Posts: 1,499
  • Joined: 11-June 08

Posted 20 March 2009 - 03:52 PM

View PostMashego, on 20 Mar, 2009 - 02:34 AM, said:

Hi who to shurtdown the PC using C# source code.

wtf?

If you are asking how to shut down a PC in C#, which is all i can get out of that mess, then try asking here.
Was This Post Helpful? 0
  • +
  • -

#13 ann06  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 02-February 10

Posted 02 February 2010 - 04:57 AM

Thank you great work. guess what i only copied the the second line without modification to the code as i used the same variables also :D. as if i it was just for me. only copy paste and then worked with no modification of anything!!!
Was This Post Helpful? 0
  • +
  • -

#14 Guest_Edward*


Reputation:

Posted 04 March 2010 - 03:45 PM

Wonderful Solution!
Was This Post Helpful? 0

#15 suheb308  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 15-April 10

Posted 15 April 2010 - 01:17 AM

very very good post
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2