Two-Way Progress Bar

• Download source files - 128.26 KB
• Download demo project - 99 KB

Latest Update

The original control was not written to include thread-safety compliance. That has been corrected and is available in the new download(s).
Thanks to everyone for all the very kind words!

Introduction

As an application developer, it is not uncommon to run into a specific UI requirement that you cannot fulfill by using a purchased control. Often times you'll find 3^rd party controls that come close but don't quite get you to your goal. Your options are to alter the UI Design for this particular requirement, or write your own control.

Background

That's the origin of this control. My application was performing a rather lengthy database update that involved a large group of parent objects and with each parent object, a large number of child-objects needed to be updated as well. The entire process would take 30 seconds to several minutes and I didn't want my users staring at an hourglass for that period of time wondering if they'd locked up.

I started out with a standard Progress Bar which was fine until I noticed several 'ticks' were so lengthy that again my concern went back to the users and not wanting to force them to sit staring at a screen that was dead for a more than a few seconds.

To solve this problem, I could have just stacked two progress bars on top of each other and updated them individually — but being a programmer, I could find no valid reason not to over-engineer this task into a single, self-contained control!

Using the Control in your Project

While in Visual Studio, right-click on the Toolbox in the Tab you wish to add the Control. Click 'Choose Items...' and navigate to where you saved the SplitProgressBar.dll. Select the DLL and click 'OK'.

This will add the control to your toolbox and you're now ready to drag it onto your forms for use.

Properties

• BarBackColor is the background color of the panel behind the ProgressBar Cells.
• BorderColor is color used in the lines surrounding the ProgressBar.
• TextBackColor is the background color of the panel behind the Label.
• TextColor is the Label's forecolor.
• BarBottomColor and BarTopColor are the colors to use for the ProgressBar Cells.
• BarBottom.BarMax is the upper limit that .BarValue can reach.
• BarBottom.BarMin is the lower limit that .BarValue can reach.
• BarBottom.BarStep tells the progress bar how to increment .BarValue every time .PerformBottomStep is pushed.
• BarBottom.BarValue is the actual value of our ProgressBar.
• BarTop is identical to BarBottom.
• GradientBars if true, the control will attempt to fill in the cells using a gradient pattern.
• SyncTopAndBottom if true, the control will ignore the BarBottom values and draw one, large solid cell using the BarTop values.
• PanelText.TextLabel is the Text displayed in the Label Panel.
• PanelText.TextPanelAlignment Left, Center or Right horizontal alignment used for the Label.
• PanelText.TextPanelAutosize if true, the width of the Label Panel will be calculated based on the text.
• PanelText.TextPanelWidth use this to adjust the size of your Label.
  *Only valid if TextPanelAutosize = False*.

Sample Usage

Private Sub ProcessSomething()
    ' Setup our progress bar to use ONE large cell and to paint the cells as

        gradients
    With ProgBar
        .SyncTopAndBottom = True
        .GradientBars = True
        .BarTop.BarMax = ElementsToProcess.Count
        .BarTop.BarStep = 50
        .BarTop.BarValue = 0
    End With
    Dim CurrentElement As Integer
    For Each Element As SomeElement In ElementsToProcess
        '

        ' Your code here

        '

        ' Increment our counter

        CurrentElement += 1
        ' If we're ready to update the progress bar - go do it.

        If CurrentElement Mod ProgBar.BarTop.BarStep = 0 Then
            ProgBar.PerformTopStep()
        End If
    Next
End Sub

Using both the top and bottom bars at the same time is very simple: just set .SyncTopAndBottom=False and setup your .BarBottom properties the same way you setup the .BarTop properties.

*Note*: If your control height results in cells that are smaller than 6 pixels, a solid color will be used to fill in the cells regardless of your .GradientBars value.

Cool ComponentModel Properties

Have you ever had one property alter the value of another property during design time? To get the properties window for the control to refresh the values, use the RefreshProperties to force the update like this:

<refreshproperties(refreshproperties.all)> _
Public Property BarMin() As Integer
    Get
        Return _Min
    End Get
    Set(ByVal value As Integer)
        If _Min <> value Then
            _Min = value
            If _Min > _Max Then Me.BarMax = _Min
            RaiseEvent BarClassChanged()
        End If
    End Set
End Property</refreshproperties(refreshproperties.all)>

Ever want to "hide" unused properties? Not all of them are "hidable" but for those that are, try this:

<Browsable(False)> _
Public Overrides Property Autosize() As Boolean
    Get
        Return MyBase.AutoSize
    End Get
    Set(ByVal value As Boolean)
        MyBase.AutoSize = value
    End Set
End Property

Points of Interest

This is the first control I wrote that uses expandable properties (like Size, Padding, Location, etc.) While very nice to have, figuring out how to set the properties up like this caused me a number of heartaches not the least of which is there's almost no documentation on how to create, configure or use expandable properties (that I was able to find!)

A weirdness that happens quite frequently and I have yet to figure out why: When the control is first placed on your form, click on the control and scroll the properties window down to BarBottom and look at the value displayed: "0,0,0,0" which are the default startup settings.

If you modify the Converter and rebuild the SplitProgressBar class — instead of seeing the Sub-Property values, you'll see the NAME of the class like this, "SplitProgressBar.BarClass"

At this point, you have to remove SplitProgressBar from the main project's reference list — and re-add it. Restarting Visual Studio will resolve this issue as well but since I was never intending the developer to change the sub-properties as a single line of comma-delimited text by filling in the parent property, I'm actually OK when this happens.

In fact, that's one improvement I'd like to make for the control: I would like NO text be displayed next to the parent property when collapsed. If anyone knows how to pull this off, PLEASE let me know!