Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / Languages / VB

Customizable Multi-directional Picture/Colour Progressbar Control

4.00/5 (2 votes)
23 Sep 2011CPOL3 min read 21.9K   630  
Customizable multi-directional picture/colour progressbar control.

Introduction

This is a User Control made to have a customizable multi-direction progressbar control. It is heaps more fun to use than the standard progressbar control that comes with .NET. You can choose between a solid colour fill or use your own pictures as the background and the bar colour.

Background

While making a little program for myself, I wanted to have a progressbar that went up and down. And then I figured, why not use some pictures. So I set about writing myself this little bit of code to have a progressbar of my very own. And I thought that since my XML code was a great help to people, I would post this too.

Using the Code

First you need to start a clean UserControl form. Simply put a PictureBox on it, anywhere. Make sure to the keep name as PictureBox1. Next, you need to add a Label, and make sure you keep its name as label1. Copy and paste the complete code into the user control.

Now, here is how to use the code. It's nice and simple too =P.

For the hardcore coders out there, you can simply autoresize the control when you autoresize your form and the progresabar control will adjust itself automaticly.

Note: .use is the only function to use with this control.

VB.NET Example

  • Once you have the control on the form:
  • C#
    DC_Progressbar1.use(Picture/Colour,Fill_Colour,Diection of progress, 
             progress text location,text colour,show text,Max Value,
             Current Value,Optional Back_Pic,Optional Bar_Pic)
  • Picture/Colour - Choose between a pictured progressbar or a colour filled one
  • Fill_Colour - Choose from the System.Color collection (dead value if you are using a picture)
  • Direction of Progress - Choose between Vertical or Horizontal.
  • Progress text location
    • Centre_Bar - Centers the text in the progressbar so it moves when the value changes.
    • Centre_Control - Stationary in the middle of the control.
  • Text colour - Choose from the System.Color collection. Sets the colour for the text label in the progressbar.
  • Show text - Ture/False. Specify if the the progressbar text shows or not. It will show a number in this format: 34.03% or 99.99% etc... based on the max and current value.
  • Max value - The number we are counting towards.
  • Current value - The number we are up to.
  • Back_Pic - Required if set to picture. This is the picture used on the canvas/background of the control.
  • Bar_Pic - Required if set to picture. This is the picture that does the filling.

You want to use your own picture:

VB
dim backpic as string = "c:\somepic.bmp"
dim barpic as string = "c:\someotherpic.bmp"
dim max as integer = 589
dim non as integer = 89

DC_Progressbar1.use(DC_Progressbar.Bar_Style.PICTURE, Color.Brown, _
   DC_Progressbar.Which_Way.HORIZONTAL, DC_Progressbar.txt_loc.CENTRE_BAR, _
   Color.BLACK, True, max,non,backpic,barpic)

You want to use a colour:

VB
dim max as integer = 589
dim non as integer = 89

DC_Progressbar1.use(DC_Progressbar.Bar_Style.COLOUR, Color.Brown, _
   DC_Progressbar.Which_Way.HORIZONTAL, DC_Progressbar.txt_loc.CENTRE_BAR, _
   Color.BLACK, True, max,non)

Have fun working out different ways to have a progressbar.

VB.NET code

VB
''' <summary>
''' Dool Cookies Progressbar
''' (F) 2011
''' Free to you and modify under the terms of the CODEPROJECT OPEN LICENSE
''' ======================================================================
'''
''' High configurable user controlled progressbar.
'''
''' Can use your own image files to make the progressbar.
''' or
''' Can you just a standed flat colour design.
''' 
''' can change direction in mid count. So if you reach
''' a number you can set it to change in a different direction.
'''
''' 22/09/2011-
'''            First release of code.
'''            Please leave a comment if there is anything that needs fixing.
''' </summary>''' <remarks></remarks>
Public Class DC_Progressbar
    Dim maxval As Integer = 100
    Dim curval As Integer = 0
    Sub across(ByVal colour As Color, ByVal txt_loc As txt_loc, _
               ByVal show_txt As Boolean, ByVal max_dool As Integer, _
               ByVal cur_dool As Integer)
        PictureBox1.Visible = True
        If show_txt = True Then Label1.Visible = True
        PictureBox1.Height = Me.Height
        PictureBox1.Width = (Me.Width / maxval) * curval
        Dim x, y, x1, y1, sx, sy As Integer
        Dim m, c As Long
        x = 0
        y = 0
        x1 = 0
        y1 = 0
        sx = 0
        sy = 0
        If txt_loc = DC_Progressbar.txt_loc.CENTRE_BAR = True Then 
            x = (PictureBox1.Width / 2)
            y = (PictureBox1.Height / 2)
            x1 = (Label1.Width / 2)
            y1 = (Label1.Height / 2)
            sx = x - x1
            sy = y - y1
            Label1.Location = New Point(sx, sy)
            Label1.Parent = PictureBox1
            Label1.BackColor = Color.Transparent
            Label1.ForeColor = colour
            m = max_dool
            c = cur_dool
            Label1.Text = dool_percentage(m, c)
        End If
        If txt_loc = DC_Progressbar.txt_loc.CENTRE_CONTROL = True Then
            x = (Me.Width / 2)
            y = (Me.Height / 2)
            x1 = (Label1.Width / 2)
            y1 = (Label1.Height / 2)
            sx = x - x1
            sy = y - y1
            Label1.Location = New Point(sx, sy)
            Label1.Parent = Me
            Label1.BackColor = Color.Transparent
            Label1.ForeColor = colour
            m = max_dool
            c = cur_dool
            Label1.Text = dool_percentage(m, c)
        End If
        If show_txt = True Then Label1.Visible = True
        PictureBox1.Visible = True
    End Sub
    Sub up(ByVal colour As Color, ByVal txt_loc As txt_loc, _
           ByVal show_txt As Boolean, ByVal max_dool As Integer, _
           ByVal cur_dool As Integer)
        ' Vertical
        PictureBox1.Visible = True
        If show_txt = True Then Label1.Visible = True
        PictureBox1.Height = (Me.Height / maxval) * curval
        PictureBox1.Width = Me.Width
        Dim x, y, x1, y1, sx, sy As Integer
        Dim m, c As Long
        x = 0
        y = 0
        x1 = 0
        y1 = 0
        sx = 0
        sy = 0
        If txt_loc = DC_Progressbar.txt_loc.CENTRE_BAR = True Then
            x = (PictureBox1.Width / 2)
            y = (PictureBox1.Height / 2)
            x1 = (Label1.Width / 2)
            y1 = (Label1.Height / 2)
            sx = x - x1
            sy = y - y1
            Label1.Location = New Point(sx, sy)
            Label1.Parent = PictureBox1
            Label1.BackColor = Color.Transparent
            Label1.ForeColor = colour
            m = max_dool
            c = cur_dool
            Label1.Text = dool_percentage(m, c)
        End If
        If txt_loc = DC_Progressbar.txt_loc.CENTRE_CONTROL = True Then
            x = (Me.Width / 2)
            y = (Me.Height / 2)
            x1 = (Label1.Width / 2)
            y1 = (Label1.Height / 2)
            sx = x - x1
            sy = y - y1
            Label1.Location = New Point(sx, sy)
            Label1.Parent = Me
            Label1.BackColor = Color.Transparent
            Label1.ForeColor = colour
            m = max_dool
            c = cur_dool
            Label1.Text = dool_percentage(m, c)
        End If
        PictureBox1.Visible = True
        If show_txt = True Then Label1.Visible = True
    End Sub
    ''' <summary>
    ''' Use a Picture from file or a set Colour
    ''' </summary>
    ''' <remarks></remarks>
    Public Enum Bar_Style
        PICTURE
        COLOUR
    End Enum
    ''' <summary>
    ''' Which Direction should we go
    ''' </summary>
    ''' <remarks></remarks>
    Public Enum Which_Way
        HORIZONTAL
        VERTICAL
    End Enum
    ''' <summary>
    ''' How should the txt lable be positioned.
    ''' </summary>
    ''' <remarks></remarks>
    Public Enum txt_loc
        CENTRE_BAR
        CENTRE_CONTROL
    End Enum
    ''' <summary>
    ''' Dool Cookies Progressbar Control.
    ''' </summary>
    ''' <param name="Style">User Pictures or Solid Colour</param>
    ''' <param name="Fill_Colour">Must specify, but only used when Style is set to Colour</param>
    ''' <param name="Direction">Vertical or Horizontal, which ever way you wish to go.</param>
    ''' <param name="txt_stye">Have text follow progressbar
    ''' or have it stationary in the middle of the control</param>
    ''' <param name="txxt_colour">What colour should the txt be</param>
    ''' <param name="Show_Text">Show the txt or not</param>
    ''' <param name="max">Max Number we are counting towards</param>
    ''' <param name="current">Current number we are up too</param>
    ''' <param name="Back_Image_Filename">The full path and filename
    ''' of the bmp/jpg you wish to use as the back image.</param>
    ''' <param name="Bar_Image_Filename">The full path and filename
    ''' of the bmp/jpg you wish to use as the BAR Fill image.</param>
    ''' <remarks>Not to shabby for something that took
    ''' me an 2 hours to knock together =P</remarks>
    Public Sub use(ByVal Style As Bar_Style, ByVal Fill_Colour As Color, _
           ByVal Direction As Which_Way, ByVal txt_stye As txt_loc, _
           ByVal txxt_colour As Color, ByVal Show_Text As Boolean, _
           ByVal max As Integer, ByVal current As Integer, _
           Optional ByVal Back_Image_Filename As String = "", _
           Optional ByVal Bar_Image_Filename As String = "")
        If current < 0 Then
            Throw New ArgumentException("Current value can not be less then 0")
        End If
        If max < current Then
            Throw New ArgumentException("Number miss match. " & _
                  "Max can not be smaller then current")
        End If
        If max < 1 Then
            Throw New ArgumentException("MAX can not be small then 1")
        End If
        If Style = Bar_Style.PICTURE Then
            If System.IO.File.Exists(Back_Image_Filename) = False Then
                Throw New ArgumentException("Unable to locate Back Image File")
                Exit Sub
            End If
        End If
        If Style = Bar_Style.PICTURE Then
            If System.IO.File.Exists(Bar_Image_Filename) = False Then
                Throw New ArgumentException("Unable to locate BAR Image File")
                Exit Sub
            End If
        End If
        If Show_Text = False Then Label1.Visible = False
        If Show_Text = True Then Label1.Visible = True
        If Style = Bar_Style.PICTURE Then
            Me.BorderStyle = Windows.Forms.BorderStyle.None
            PictureBox1.BackColor = Color.Transparent
            PictureBox1.ImageLocation = Bar_Image_Filename
            PictureBox1.SizeMode = PictureBoxSizeMode.StretchImage
            PictureBox1.Load()
            Me.BackgroundImage = Image.FromFile(Back_Image_Filename)
        End If
        If Style = Bar_Style.COLOUR Then
            PictureBox1.Image = Nothing
            PictureBox1.BackColor = Fill_Colour
            Me.BackgroundImage = Nothing
            Me.BackColor = Color.Transparent
            Me.BorderStyle = Windows.Forms.BorderStyle.FixedSingle
        End If
        If Direction = Which_Way.HORIZONTAL Then
            value = current
            maximum = max
            across(txxt_colour, txt_stye, True, max, current)
        End If
        If Direction = Which_Way.VERTICAL Then
            value = current
            maximum = max
            up(txxt_colour, txt_stye, True, max, current)
        End If
    End Sub
    Property value As Integer
        Get
            Return curval
        End Get
        Set(ByVal value As Integer)
            curval = value
        End Set
    End Property
    Property maximum As Integer
        Get
            Return maxval
        End Get
        Set(ByVal value As Integer)
            maxval = value
        End Set
    End Property
    Private Sub DC_Progressbar_ControlAdded(ByVal sender As Object, _
            ByVal e As System.Windows.Forms.ControlEventArgs) _
            Handles Me.ControlAdded
        PictureBox1.Visible = False
        Label1.Visible = False
    End Sub
    Private Sub DC_Progressbar_Resize(ByVal sender As Object, _
            ByVal e As System.EventArgs) Handles Me.Resize
        PictureBox1.Visible = False
        Label1.Visible = False
    End Sub
    Private Function dool_percentage(ByVal max_value As Long, _
            ByVal min_value As Long) As String
        Dim max, min As Long
        Dim hee, result As Decimal
        Dim end_result As String
        max = max_value
        min = min_value
        hee = Decimal.Divide(min, max) * 100
        result = Decimal.Round(hee, 2)
        end_result = result & "%"
        Return end_result
    End Function

End Class

Points of Interest

You can use any picture as long as the .NET Framework can handle it natively. Well, it was much fun to make and even more fun to use when I was testing to make sure it didn't crash every five minutes like Windows 95 =).

History

The C# .NET code was made using an online converter. This is the first release of the code. If there is anything amiss or the code fails somewhere, please let me know. I tried hard to crash it before I posted it. But one can never really factor in the human element as much as one tries.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)