Click here to Skip to main content
12,831,625 members (30,913 online)
Click here to Skip to main content
Add your own
alternative version


52 bookmarked
Posted 23 Nov 2007

Label with ProgressBar [in a StatusStrip]

, 23 Nov 2007
Rate this:
Please Sign up or sign in to vote.
An article showing how to create a very simple text label with a meter/progress bar.
Screenshot - StatusBarLabelWithBar.png


Recently I needed a very simple meter embedded into a StatusStrip like the one shown in the image above. The ToolStripProgressBar included in Visual Studio 2005 can almost cut it, but it does not have the capability to overlay text onto the bar. In this tutorial, I walk you through creating a simple progress bar with text by inheriting from the Label control and overriding the OnPaint method. I will then extend this to a StatusStripLabel for addition to a StatusStrip container. I did this using Visual Basic, but I'm sure it can easily be translated to C#.

Using the Code

Start by creating a new class within your project that inherits the label class:

Public Class LabelWithBar
    Inherits Label 
End Class

By inheriting from the Label control we get all the standard Label methods and properties; for example Text, TextAlign, ForeColor, BackColor, Font. After you build your project, you should see LabelWithBar appear in your Toolbox. This can be dragged and dropped onto your form and manipulated just like a Label control.

Now add three properties: Value, BarColor, and BarHeight:

Public Property Value() As Integer
        Return mVal
    End Get 
    Set(ByVal Value As Integer) 
        ' Make sure that the value does not stray outside the valid range.
        Select Case Value
            Case Is < 0
                mVal = 0
            Case Is > 100
                mVal = 100
            Case Else
                mVal = Value
        End Select 
        ' Invalidate the control to get a repaint.
    End Set
End Property
Public Property BarColor() As Color
        Return mbarColor
    End Get
    Set(ByVal Value As Color)
        mbarColor = Value 
        ' Invalidate the control to get a repaint.
    End Set
End Property
Public Property BarHeight() As Integer
        Return mbarHeight
    End Get
    Set(ByVal value As Integer)
        Select Case value
            Case Is > Me.Size.Height, Is < 0
                mbarHeight = Me.Size.Height
            Case Else
                mbarHeight = value
        End Select
        ' Invalidate the control to get a repaint.
    End Set
End Property

The Value property controls the length of the bar similar to the Value property of a ProgressBar . In my example I've limited the value to be an integer between 0 and 100 representing the percent filled. It is easy enough to extend this to use Maximum and Minimum properties like the ProgressBar but this will do for now. The BarColor property controls the bar's color while the BarHeight property controls the bar height or thickness. The BarHeight is forced to be some value less than the height of the label.

Now we can draw the bar by overriding the OnPaint method:

Protected Overrides Sub OnPaint(ByVal e As PaintEventArgs) 
    Dim g As Graphics = e.Graphics 
    Dim percent As Decimal = mVal / 100
    Dim brush As SolidBrush = New SolidBrush(BarColor)
    Dim rect As Rectangle = e.ClipRectangle
    Dim height As Integer = mbarHeight 
    rect.Width = rect.Width * percent
    If height = 0 Then height = rect.Height 
    rect.Y = (rect.Height - height) / 2
    rect.Height = height 
    ' Draw bar
    g.FillRectangle(brush, rect)
End Sub

This function first draws a bar with the specified color, height, and width. It then calls the Label's native OnPaint method to draw the text. Note that if BarHeight is set to 0 the bar defaults to the Label's height.

That is really all you need to be on your way. You can now edit the controls Value, BarColor, and BarHeight properties at design time in Visual Studio's properties window or at runtime in your code.

To improve the custom control, it is desirable to tell Visual Studio what the default values are for each property. Do this by adding the default values to each class using the DefaultValue attribute. For the Value and BarHeight properties, this means adding <DefaultValue(0)> _ on the line just preceding the property declaration. For the BarColor property we need to do a little casting with <DefaultValue(GetType(Color), "Blue")> _ . You many need to import System.ComponentModel if your project doesn't do so already.

Now the final step is creating a version capable of being added to the StatusStrip control. All you have to do is repeat the steps above but instead of inheriting from the Label class, you inherit from the ToolStripStatusLabel class:

<System.ComponentModel.DesignerCategory("code")> _
    (ToolStripItemDesignerAvailability.StatusStrip)> _
Public Class ToolStripStatusLabelWithBar
    Inherits ToolStripStatusLabel 
End Class

The attributes preceding the class instruct Visual Studio that this class can be embedded in a StatusStrip . Now copy and paste all the code from the LabelWithBar class to this class, rebuild, and you can now add a ToolStripStatusLabelWithBar control to your StatusStrip control.

The complete code can be downloaded from the link at the top of this article.

Points of Interest

While I have created a few custom controls in the past this was my first time delving deeply into the design time attributes. Overall this project would have taken less than a day if it wasn't for the following false starts.

In my first attempt at creating the LabelWithBar class, I tried to inherit from the ProgressBar control and paint the text on top. I soon found that handling the text alignment, fonts, etc. was more difficult than adding a simple bar. In the end, it turned out much easier to inherit from the Label control and paint a simple rectangle.

In my first attempt at creating the ToolStripStatusLabelWithBar class, I tried to inherit from the ToolStripControlHost and add the previously created LabelWithBar class as the embedded control. This proved to be much more difficult than necessary. I struggled for nearly a day trying to get the control to keep the Size and TextAlign properties that were being set at design time. I could never get it to work properly. I suspect that behind the scenes, ToolStripControlHost was trying to manage the Size and TextAlign between itself and the LabelWithBar interfering with my efforts to do so. In the end, it was much easier to simply cut and paste the properties from the LabelWithBar class into the ToolStripStatusLabelWithBar as shown above.


  • 23rd November, 2007: Original article posted


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

United States United States
Professional Engineer
Hobbyist Software/Web Developer
(FORTRAN at work, VB at home)

You may also be interested in...

Comments and Discussions

QuestionWhy my test result is still beside instead overlay Pin
Member 795890117-Jan-16 16:40
memberMember 795890117-Jan-16 16:40 
GeneralVery nice but... Pin
jonmach1-Jan-08 9:30
memberjonmach1-Jan-08 9:30 
GeneralRe: Very nice but... Pin
Alex Cooke14-May-08 2:49
memberAlex Cooke14-May-08 2:49 
GeneralRe: Very nice but... Pin
Alex Cooke14-May-08 2:52
memberAlex Cooke14-May-08 2:52 
GeneralLabel with ProgressBar Pin
SurajLU29-Nov-07 0:39
memberSurajLU29-Nov-07 0:39 
GeneralJust transalated it to C# Pin
Joe Sonderegger27-Nov-07 3:13
memberJoe Sonderegger27-Nov-07 3:13 
GeneralRe: Just transalated it to C# Pin
scslmd28-Nov-07 15:49
memberscslmd28-Nov-07 15:49 
GeneralRe: Just transalated it to C# Pin
Joe Sonderegger28-Nov-07 21:17
memberJoe Sonderegger28-Nov-07 21:17 
GeneralExcellent Pin
Luc Pattyn23-Nov-07 15:28
memberLuc Pattyn23-Nov-07 15:28 
GeneralRe: Excellent Pin
Hypercubed23-Nov-07 20:09
memberHypercubed23-Nov-07 20:09 
GeneralRe: Excellent Pin
Michael Davey 124-Nov-07 21:16
memberMichael Davey 124-Nov-07 21:16 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170326.1 | Last Updated 23 Nov 2007
Article Copyright 2007 by Hypercubed
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid