Display text on a ProgressBar in C#

[ProgressBar]

It would be nice if you could display a progress message on top of a ProgressBar. Unfortunately you can’t do that. You can’t even put a label above a ProgressBar without covering it so you can’t see the progress.

An easy workaround is to display the progress in a PictureBox. Then you can draw whatever text or other information you like on the PictureBox.

This example uses the following code to keep track of progress.

private int ProgressMinimum = 0;
private int ProgressMaximum = 100;
private int ProgressValue = 0;

private void btnGo_Click(object sender, EventArgs e)
{
    ProgressValue = 0;
    picProgress.Refresh();
    tmrWork.Enabled = true;
}

private void tmrWork_Tick(object sender, EventArgs e)
{
    ProgressValue += 4;
    if (ProgressValue > ProgressMaximum)
    {
        ProgressValue = 0;
        tmrWork.Enabled = false;
    }
    picProgress.Refresh();
}

The variables ProgressMinimum, ProgressMaximum, and ProgressValue give the minimum, maximum, and current value of the progress. This example makes the value range from 0 to 100.

When you click the Go button, the program sets the value to 0 and refreshes the PictureBox to make it draw itself. That’s described shortly. It then enables the tmrWork Timer control.

When the timer ticks, the program adds 4 to the current value. If the value is then greater than the maximum value, the program resets value to 0 and disables the timer. Whether the value is greater than the maximum or not, the program then refreshes the PictureBox, which makes the following code execute.

// Show the progress.
private void picProgress_Paint(object sender, PaintEventArgs e)
{
    // Clear the background.
    e.Graphics.Clear(picProgress.BackColor);

    // Draw the progress bar.
    float fraction =
        (float)(ProgressValue - ProgressMinimum) /
        (ProgressMaximum - ProgressMinimum);
    int wid = (int)(fraction * picProgress.ClientSize.Width);
    e.Graphics.FillRectangle(
        Brushes.LightGreen, 0, 0, wid,
        picProgress.ClientSize.Height);

    // Draw the text.
    e.Graphics.TextRenderingHint =
        TextRenderingHint.AntiAliasGridFit;
    using (StringFormat sf = new StringFormat())
    {
        sf.Alignment = StringAlignment.Center;
        sf.LineAlignment = StringAlignment.Center;
        int percent = (int)(fraction * 100);
        e.Graphics.DrawString(
            percent.ToString() + "%",
            this.Font, Brushes.Black,
            picProgress.ClientRectangle, sf);
    }
}

This code first clears the PictureBox with its background color. It then calculates the fraction of the control that should be colored to indicate the current progress. It uses the fraction to calculate the width that should be colored and then fills that part of the control with light green.

Next the code creates a StringFormat object to center text vertically and horizontally. It converts the progress fraction into a percentage and draws it centered on the control.

If you like you can modify the code to change the way it draws the progress bar. For example, you could use different colors, perhaps to
make a 3D appearance. You can also change the text to show the value, the fraction, or whatever other text is appropriate for your program.


Download Example   Follow me on Twitter   RSS feed   Donate




About RodStephens

Rod Stephens is a software consultant and author who has written more than 30 books and 250 magazine articles covering C#, Visual Basic, Visual Basic for Applications, Delphi, and Java.

This entry was posted in controls, user interface and tagged , , , , , , , , , , , . Bookmark the permalink.

One Response to Display text on a ProgressBar in C#

  1. BAILLET Fran├žois-Xavier says:

    Great idea, instead of using the poor Microsoft’s standard progressbar. I don’t need anything more. Thanks a lot.

Leave a Reply

Your email address will not be published. Required fields are marked *