Custom Control for Text Over a Progress Bar

• Download DLL - 3.21 KB
• Download source - 12.49 KB

Introduction

This is a very simple custom control implementation of a progress bar that allows text to be written over it.

Background

Over the years, Microsoft has made a few Progress Bar controls, but all of them have been lacking in some useful feature or another. One of these features is the ability to write text centered over the control. In December 2008, Jacob Jordan posed some code to do this:

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)));
}

This was a great solution, but it had to be done manually to each progress bar. I thought it might be easier to just drag and drop a premade custom control from the Form Designer, so I built one that wrapped a progress bar and handled the drawing of text and/or automatically drawing a percentage.

Using the Code

To use this control, just drag and drop CustomControls.dll into your VS toolbox, and then drop the control into your form just like you would a normal progress bar.

I haven't exposed all of the properties of the progress bar. The ones that I did are:

• int Minimum
• int Maximum
• int Value
• int Step
• ProgressBarStyle Style
• Color BarColor (which maps to ProgressBar.ForeColor)

If you need to access something else, just change the access modifier of the ProgressBar control member and recompile.

Two new properties have been added to handle the text:

• bool ShowPercentage
• string CenterText

If ShowPercentage is true, then the percent complete is automatically calculated and displayed, otherwise the value of CenterText is displayed. Some slight modification to the original code was needed to accomplish this:

private void UpdateText()
{
    string s;
    if (ShowPercentage)
    {
        int percent = (int)(((double)(Value - Minimum) / 
			(double)(Maximum - Minimum)) * 100);
        s = percent.ToString() + "%";
    }
    else
    {
        if (string.IsNullOrEmpty(CenterText))
        {
            //Don't draw anything
            return;
        }
        else
        {
            s = CenterText;
        }
    }

    using (Graphics gr = thePB.CreateGraphics())
    {
        gr.DrawString(s, Font, new SolidBrush(ForeColor),
            new PointF(Width / 2 - (gr.MeasureString(s, Font).Width / 2.0F),
            Height / 2 - (gr.MeasureString(s, Font).Height / 2.0F)));
    }
}

This is a very simple implementation and has a lot of room for improvement, but for most uses it is a drop-in solution.

History

• 14^th January, 2009: Initial post