Change background image
  1. What's up? I see you're viewing as a Guest. How about registering, it only takes like 2 minutes. This will enable you to do more on our forum and stay updated.

Visual Studio - Custom Progress Bar

Discussion in 'Developer General' started by Cojoe, Aug 17, 2011.

Thread Status:
This thread is more than 180 days old.
  1. Cojoe

    Cojoe GM Member

    In This Tutorial I Will Guide You Through How To Create You're Own Progress Bar.

    For This Tutorial You Will Need Visual Basic/Studio.


    » Creating The Forms «

    To start of this guide/tutorial you will need to create a new Windows Form. I'm assuming that you already know how to do this, and will skip this step.

    The next step to take is create a User Control. I'm also assuming you know how to do this because its the same way you create a Windows Form.


    » Coding Time «

    Now that we have all the forms needed for this guide we will move onto the coding for the custom progress bar.

    But before we do coding we will need to change the look of the User Control. What we are going to do is change the Background Color to White, Click Here To See How. We will also need 2 create a label, You should already know how to do this. You may change the name of the label to what ever you wish, but to make it easy on you leave it as Label1. Now change the text to "0%" not including the quotes. and leave the for color to Black.

    Now that we got everything designed how we want we will move onto the coding.

    The first thing you will need to do is view the coding, you should know how to do this.

    Now we will start of by adding
    Code:
    Imports System.Drawing.Drawing2D
    above the Public Class.

    Now we will need to create a Public Sub New, To see how to Click Here. Now Under The
    Code:
    InitializeComponent()
    We will need to write the following. (or copy and paste for those who don't want to learn).

    Code:
    Label1.ForeColor = Color.Black
    Me.ForeColor = Color.DarkTurquoise
    This will add Color to the progress bar and will make the label stay black. Please not you may change the colors if you wish.


    Now we will need to also TYPE the following under the End Sub for our New Declaration.

    Code:
    Protected percent As Double = 0.0
    That will allow the % sign stay as the 0 counts upwards.

    Now we will add Get Declaration. And we will type the following.

    Code:
    Public Property Value As Double
            Get
                Return percent
            End Get
            Set(ByVal value As Double)
                If value < 0 Then value = 0 Else If value > 100 Then value = 100
                percent = value
                Label1.Text = ToString() + "%"
                Me.Invalidate()
    
            End Set
        End Property
    This is our counter for the Progress bar.


    » Making The Color «

    Now that we got all the coding needed for the progress bar to move, we will make it colorful.

    Type the following.

    Code:
    MyBase.OnPaint(e)
            'The background color for the Pbar
            Dim b As Brush = New SolidBrush(Me.ForeColor)
            'The LinearGradient that will give it the glossy effect
            Dim lb As New LinearGradientBrush(New Rectangle(0, 0, Me.Width, Me.Height), Color.FromArgb(255, Color.White), Color.FromArgb(50, Color.White), LinearGradientMode.ForwardDiagonal)
            'Calculate how much has the Pbar to be filled for "x" percent
            Dim width As Integer = CInt(percent / 100 * Me.Width)
            e.Graphics.FillRectangle(b, 0, 0, width, Me.Height)
            e.Graphics.FillRectangle(lb, 0, 0, width, Me.Height)
            b.Dispose() : lb.Dispose()
        End Sub
    All The ' lines provides information about what it does.

    Our next line of coding is:

    Code:
    Private Sub Pbar_SizeChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.SizeChanged
            'Keep the label in the center of the Pbar
            Label1.Location = New Point(Me.Width / 2 - Label1.Width / 2, Me.Height / 2 - Label1.Height / 2)
        End Sub




    (click blue words to go to download location)





















    » Advertisement «

    [​IMG]

    Letter Bomb
    (click image to go to post)​
    2 people like this.
  2. Sh0tGuN2197

    Sh0tGuN2197 *Shotty* Super-Mod

    Why not just use the provided progress bar? I just skimmed through this and didn't catch why I would make my own... But either way, nice job
  3. Cojoe

    Cojoe GM Member

    Its just something for looks
  4. dns

    dns Active Member Admin

    This is actually very similar to how we used to make progress bars on VB3. Unless you had a custom OCX for progress bars you had to make your own using a label, some math, and some drawing api. :P Nice post cojoe, and thx.
  5. Cojoe

    Cojoe GM Member

    Your Welcome dns. :D
  6. Sh0tGuN2197

    Sh0tGuN2197 *Shotty* Super-Mod

    I guess I will check it out sooner or later.
Thread Status:
This thread is more than 180 days old.

Share This Page