How to create a smooth ProgressBar in Visual Basic .NET or in Visual Basic 2005

Article translations Article translations
Article ID: 323088 - View products that this article applies to.
This article was previously published under Q323088
Expand all | Collapse all

On This Page

SUMMARY

This article demonstrates how to create a simple, custom UserControl to create a smooth, scrolling ProgressBar control.

In earlier versions of the ProgressBar control, such as the version that is provided with the Microsoft Windows Common Controls ActiveX control, you can view the progress in two different views. To control these views, you use the Scrolling property, which includes standard and smooth settings. Smooth scrolling produces a solid block of color that represents the progress, and standard scrolling appears segmented and is made up of a series of small blocks or rectangles.

The ProgressBar control that is included with Visual Basic .NET or Visual Basic 2005 supports only the standard setting.

The sample code in this article illustrates how to create a control that supports the following properties:
  • Minimum. This property obtains or sets the lower value for the range of valid values for progress. The default value of this property is zero (0); you cannot set this property to a negative value.
  • Maximum. This property obtains or sets the upper value for the range of valid values for progress. The default value of this property is 100.
  • Value. This property obtains or sets the current level of progress. The value must be in the range that the Minimum and the Maximum properties define.
  • ProgressBarColor. This property obtains or sets the color of the progress bar.

Create a Custom ProgressBar Control

  1. Follow these steps to create a new Windows Control Library project in Visual Basic .NET or in Visual Basic 2005:
    1. Start Microsoft Visual Studio .NET or Microsoft Visual Studio 2005.
    2. On the File menu, point to New, and then click Project.
    3. In the New Project dialog box, click Visual Basic Projects under Project Types, and then click Windows Control Library under Templates.

      Note In Visual Studio 2005, click Visual Basic under Project Types.
    4. In the Name box, type SmoothProgressBar, and then click OK.
    5. In Project Explorer, rename the default class module from UserControl1.vb to SmoothProgressBar.vb.
    6. In the Properties window for the UserControl object, change the Name property from UserControl1 to SmoothProgressBar.
  2. At this point, you typically inherit from the class of that control and then add the additional functionality to extend an existing control. However, the ProgressBar class is sealed and cannot be inherited. Therefore, you must build the control from the beginning.

    Add the following code to the class module of the UserControl, just after the "Windows Form Designer generated code" section:
    Private min As Integer = 0               ' Minimum value for progress range
    Private max As Integer = 100             ' Maximum value for progress range
    Private val As Integer = 0               ' Current progress
    Private barColor As Color = Color.Blue   ' Color of progress meter
    
    Protected Overrides Sub OnResize(ByVal e As EventArgs)
        ' Invalidate the control to get a repaint.
        Me.Invalidate()
    End Sub
    
    Protected Overrides Sub OnPaint(ByVal e As PaintEventArgs)
        Dim g As Graphics = e.Graphics
        Dim brush As SolidBrush = New SolidBrush(barColor)
        Dim percent As Decimal = (val - min) / (max - min)
        Dim rect As Rectangle = Me.ClientRectangle
    
        ' Calculate area for drawing the progress.
        rect.Width = rect.Width * percent
    
        ' Draw the progress meter.
        g.FillRectangle(brush, rect)
    
        ' Draw a three-dimensional border around the control.
        Draw3DBorder(g)
    
        ' Clean up.
        brush.Dispose()
        g.Dispose()
    End Sub
    
    Public Property Minimum() As Integer
        Get
            Return min
        End Get
    
        Set(ByVal Value As Integer)
            ' Prevent a negative value.
            If (Value < 0) Then
                min = 0
            End If
    
            ' Make sure that the minimum value is never set higher than the maximum value.
            If (Value > max) Then
                min = Value
                min = Value
            End If
    
            ' Make sure that the value is still in range.
            If (val < min) Then
                val = min
            End If
    
    
    
            ' Invalidate the control to get a repaint.
            Me.Invalidate()
        End Set
    End Property
    
    Public Property Maximum() As Integer
        Get
            Return max
        End Get
    
        Set(ByVal Value As Integer)
            ' Make sure that the maximum value is never set lower than the minimum value.
            If (Value < min) Then
                min = Value
            End If
    
            max = Value
    
            ' Make sure that the value is still in range.
            If (val > max) Then
                val = max
            End If
    
            ' Invalidate the control to get a repaint.
            Me.Invalidate()
        End Set
    End Property
    
    Public Property Value() As Integer
        Get
            Return val
        End Get
    
        Set(ByVal Value As Integer)
            Dim oldValue As Integer = val
    
            ' Make sure that the value does not stray outside the valid range.
            If (Value < min) Then
                val = min
            ElseIf (Value > max) Then
                val = max
            Else
                val = Value
            End If
    
            ' Invalidate only the changed area.
            Dim percent As Decimal
    
            Dim newValueRect As Rectangle = Me.ClientRectangle
            Dim oldValueRect As Rectangle = Me.ClientRectangle
    
            ' Use a new value to calculate the rectangle for progress.
            percent = (val - min) / (max - min)
            newValueRect.Width = newValueRect.Width * percent
    
            ' Use an old value to calculate the rectangle for progress.
            percent = (oldValue - min) / (max - min)
            oldValueRect.Width = oldValueRect.Width * percent
    
            Dim updateRect As Rectangle = New Rectangle()
    
            ' Find only the part of the screen that must be updated.
            If (newValueRect.Width > oldValueRect.Width) Then
                updateRect.X = oldValueRect.Size.Width
                updateRect.Width = newValueRect.Width - oldValueRect.Width
            Else
                updateRect.X = newValueRect.Size.Width
                updateRect.Width = oldValueRect.Width - newValueRect.Width
            End If
    
            updateRect.Height = Me.Height
            ' Invalidate only the intersection region.
            Me.Invalidate(updateRect)
        End Set
    End Property
    
    Public Property ProgressBarColor() As Color
        Get
            Return barColor
        End Get
    
        Set(ByVal Value As Color)
            barColor = Value
    
            ' Invalidate the control to get a repaint.
            Me.Invalidate()
        End Set
    End Property
    
    Private Sub Draw3DBorder(ByVal g As Graphics)
        Dim PenWidth As Integer = Pens.White.Width
    
        g.DrawLine(Pens.DarkGray, _
            New Point(Me.ClientRectangle.Left, Me.ClientRectangle.Top), _
            New Point(Me.ClientRectangle.Width - PenWidth, Me.ClientRectangle.Top))
        g.DrawLine(Pens.DarkGray, _
            New Point(Me.ClientRectangle.Left, Me.ClientRectangle.Top), _
            New Point(Me.ClientRectangle.Left, Me.ClientRectangle.Height - PenWidth))
        g.DrawLine(Pens.White, _
            New Point(Me.ClientRectangle.Left, Me.ClientRectangle.Height - PenWidth), _
            New Point(Me.ClientRectangle.Width - PenWidth, Me.ClientRectangle.Height - PenWidth))
        g.DrawLine(Pens.White, _
            New Point(Me.ClientRectangle.Width - PenWidth, Me.ClientRectangle.Top), _
            New Point(Me.ClientRectangle.Width - PenWidth, Me.ClientRectangle.Height - PenWidth))
    End Sub
    					
  3. On the Build menu, click Build Solution to compile the project.

Create a Sample Client Application

  1. On the File menu, point to New, and then click Project.
  2. In the Add New Project dialog box, click Visual Basic Projects under Project Types, click Windows Application under Templates, and then click OK.
  3. Follow these steps to add two instances of the SmoothProgressBar control to the form:
    1. On the Tools menu, click Customize Toolbox.
    2. Click the .NET Framework Components tab.
    3. Click Browse, and then locate the SmoothProgressBar.dll file, which you created in the "Create a Custom ProgressBar Control" section.
    4. Click OK. Notice that the SmoothProgressBar control is added to the toolbox.
    5. Drag two instances of the SmoothProgressBar control from the toolbox to the default form of the Windows Application project.
  4. Drag a Timer control from the toolbox to the form.
  5. Add the following code to the Tick event of the Timer control:
    If (Me.SmoothProgressBar1.Value > 0) Then
        Me.SmoothProgressBar1.Value -= 1
        Me.SmoothProgressBar2.Value += 1
    Else
        Me.Timer1.Enabled = False
    End If
    					
  6. Drag a Button control from the toolbox to the form.
  7. Add the following code to the Click event of the Button control:
    Me.SmoothProgressBar1.Value = 100
    Me.SmoothProgressBar2.Value = 0
    
    Me.Timer1.Interval = 1
    Me.Timer1.Enabled = True
    					
  8. On the Debug menu, click Start to run the sample project.
  9. Click the button. Notice that the two progress indicators display the text "progress". One progress indicator displays the progress in an increasing manner, and the other progress indicator displays the progress in a decreasing or a countdown manner.

Properties

Article ID: 323088 - Last Review: December 6, 2006 - Revision: 3.3
APPLIES TO
  • Microsoft Visual Basic .NET 2002 Standard Edition
  • Microsoft Visual Basic .NET 2003 Standard Edition
  • Microsoft Visual Basic 2005
Keywords: 
kbvs2005swept kbvs2005applies kbhowtomaster KB323088

Give Feedback

 

Contact us for more help

Contact us for more help
Connect with Answer Desk for expert help.
Get more support from smallbusiness.support.microsoft.com