Custom Progress Bars

by smiapps in Circuits > Software

2484 Views, 6 Favorites, 0 Comments

Custom Progress Bars

1.PNG

Hello, My name is Skrillit VS Programming, You can check out my channel on YouTube, where you will find videos of this tutorial and more.

You can also give me a tweet via @KieranTriggsSMI

In this Tutorial we will be learning about how you can make your own Custom Progress bar.

I will guide you step by step, so even beginners who are new to the world of programming can learn more easily.

For this Tutorial you will need:



• Visual Studio: This now comes in 3 versions if you are using Windows 7, 8, 8.1 or even windows 10, these versions are VS Community Edition 2015, VS Professional Edition 2015 and VS Enterprise Edition 2015

Let's Get This Set Up...

2.PNG

First open Visual Studio which can be found in All Programs -> Visual Studio 15 -> Visual Studio 2015 RC.exe

Then you will need to create a new project by clicking "New Project"

Next choose Visual Basic

Then Choose Windows Application Form

Now all you need to do is name it CustomProgressBar.vb

That's all there is to it, you are now set up, and you are ready to begin this tutorial.

Designing and Coding the Form...

3.PNG
4.PNG
5.PNG
6.PNG
7.PNG
8.PNG
9.PNG
10.PNG
11.PNG
12.PNG

  • šResize the windows form to an appropriate size
  • šGo to the properties panel and set the background color to “Dodger Blue” which can be found under the “Web” Tab
  • šNext, change the text so that it says “Custom Progress Bar”
  • šThen, change the form name to frmCustomProgress

  • šMake 2 picture boxes
  • šChange one of those picture boxes to have a width of 280 and a height of 20
  • šAlign the top left corner of the second picture box with the top left corner of the first picture box and set the width to 10 and the height to 20
  • šChange the background color of the second picture box to white

  • šOpen Your Toolbox
  • šSearch for “Timer”
  • šDouble click “Timer” to add it to your form
  • šIn the properties panel set the interval to 1
  • šDouble click on the Timer to jump into the code view for the form
  • šThis will generate some code for the timer
  • šAdd the following code to the generated timer code:

PictureBox2.Visible = True
btnReset.Enabled = False                                                                         PictureBox2.Width = PictureBox2.Width + 1                                                        If PictureBox2.Width = 286 Then                                                                  Timer1.Stop()                                                                                    btnStart.Enabled = False                                                                         btnReset.Enabled = True                                                                          PictureBox2.BackColor = Color.White                                                              End If

šMake a button

šChange the flat style to “flat” in the properties panel

šChange the font to Segoe UI Light and the font size to 16

šSet the foreground color to white

šChange the Text so that it says &Start…

šAnd change the name of the button to btnStart

šThen copy and paste the button so that all properties are copied with it

šThen rename the second button as btnReset and change the text to say &Reset…

šAdd the following code to the first button:

Timer1.Start()

šAdd the following code to the second button:

šPictureBox2.Width = 0
btnStart.Enabled = True                                                                          PictureBox2.BackColor = Color.White

Congrats you have finished this tutorial, I have plenty more of these tutorials coming soon which I hope you will enjoy and also learn something from it

I would also like to thank the people over at Autodesk and Instructables for reaching out to me about being able to reach out to a wider community via my email link on my YouTube Channel page