[WIP] Customizable ProgressBar

[NickThissen]

Hey,

[This is still a Work In Progress, so not finished yet!]


I noticed a few requests on how to draw your own ProgressBar, so I decided to make one myself. Instead of simply providing one drawing style and having you edit the control to suit your needs, I decided to make it customizable instead.

The ProgressBarEx control provides you with PaintBackground and PaintProcess events.

The PaintBackground event fires when the background is painted and passes the Graphics and ClipRectangle objects you need to draw the background manually. You could draw a gradient, a picture, a solid color, whatever you like, instead of the default BackColor.

The PaintProcess event fires when the process part of the ProgressBar is painted (the bar that shows how far the progress is). It also provides you with the Graphics object, and the Bounds object that represents the 'process rectangle'. So, you do not need to calculate the size and location of that rectangle manually, it is given to you in this event. You simply need to create your desired brush, and draw it.

Since there is also a Blocks style, like the normal ProgressBar, the PaintProcess event also provides you with a Blocks Rectangle array. Each Rectangle in that array represents one block. You can loop through the blocks and paint each block the same, or you could paint each block with a random color, or you could have a gradient going smoothly from left to right. Again, the rectangles you need for the drawing are all given to you, no calculation required.

For the Blocks style, there are also the BlockWidth and BlockSeparation property, which are straightforward; they set the width and separation of the blocks.

The ProgressBar also shows the relative value (49%) in the middle. You can turn that off with the ShowValue property.

If you don't require or want to do fancy custom drawing, you can simply set the BackColor (for the background) and Color (for the process bar color) properties, and you will have either a continuous, or block, ProgressBar in that color.

I am also working on a Marquee style with animation, and an Orientation property which allows you to have a vertical ProgressBar, but those are not functional yet.


The ProgressBar looks like this by default, in the Continuous style:

Pretty simple. But the custom drawing can now begin!


Here are a few examples on custom drawing the ProgressBar.

Example 1 - A horizontal gradient in a continuous bar.
Using the PaintProcess event and the EventArguments it passes, we can simply draw a gradient on the process bar, leaving the background simply the BackColor.

Private Sub ProgressBarEx1_PaintProcess(ByVal sender As System.Object, ByVal e As ProgressBarEx.ProgressBarEx.ProgressBarProcessPaintEventArgs) Handles ProgressBarEx1.PaintProcess
        Using b As New Drawing2D.LinearGradientBrush(e.Bounds, _
                                                     Color.DarkBlue, _
                                                     Color.LightBlue, _
                                                     Drawing2D.LinearGradientMode.Horizontal)
            e.Graphics.FillRectangle(b, e.Bounds)
        End Using
    End Sub

Result:


That was easy, wasn't it?


Example 2 - Drawing red and blue blocks interchangebly.
Next, we will use the Blocks style and draw the first block red, then blue, red, blue, etc. We use a simple For loop for this, and use the Mod operator to check if the loop iterator is even (i Mod 2 = 0) or odd. If it's even, we draw red, otherwise blue.

Private Sub ProgressBarEx1_PaintProcess(ByVal sender As System.Object, ByVal e As ProgressBarEx.ProgressBarEx.ProgressBarProcessPaintEventArgs) Handles ProgressBarEx1.PaintProcess
        Dim brush As New SolidBrush(Color.Red)
        For i As Integer = 0 To e.Blocks.Length - 1
            If (i Mod 2 = 0) Then  'i is even
                brush = New SolidBrush(Color.Red)
            Else
                brush = New SolidBrush(Color.Blue)
            End If
 
            e.Graphics.FillRectangle(brush, e.Blocks(i))
        Next
        brush.Dispose()
    End Sub

Result:

Ok, not very pretty, but the concept is clear.


Finally, let's try something a bit more complicated
Example 3 - Horizontal gradient with horizontal white accents
Here, I draw a horizontal gradient from red to darkred, across the entire process area, smoothly between each block. I also use a second white gradient to highlight each block separately. Finally, I also draw a black border around each block.

Private Sub ProgressBarEx1_PaintProcess(ByVal sender As System.Object, ByVal e As ProgressBarEx.ProgressBarEx.ProgressBarProcessPaintEventArgs) Handles ProgressBarEx1.PaintProcess
        For Each b As Rectangle In e.Blocks
            Using totalBrush As New Drawing2D.LinearGradientBrush(e.Bounds, _
                                                    Color.Red, _
                                                    Color.DarkRed, _
                                                    Drawing2D.LinearGradientMode.Horizontal)
                e.Graphics.FillRectangle(totalBrush, b)
            End Using
            Using whiteBrush As New Drawing2D.LinearGradientBrush(b, _
                                                                  Color.White, _
                                                                  Color.Transparent, _
                                                                  Drawing2D.LinearGradientMode.Horizontal)
                e.Graphics.FillRectangle(whiteBrush, b)
            End Using
            b = New Rectangle(b.X, b.Y, b.Width, b.Height - 1)
            e.Graphics.DrawRectangle(Pens.Black, b)
        Next
    End Sub

Result:



As you can see, the code is still very easy, but the result is becoming more and more complicated. Since you don't have to worry about calculating the correct width of the rectangles you have to draw, you can concentrate on just drawing them. You could also draw rounded rectangles or circles instead of blocks if you want. You can draw whatever you want!


You can also just use this as an example of how to draw your own ProgressBar.


The code for the ProgressBarEx class is in the next post, as this one got too long!


Good luck!