Introduction: Custom Progress Bars
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
Step 1: Let's Get This Set Up...
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.
Step 2: Designing and Coding the Form...
- 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:
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