VB.NET: Creating Your Own Versions of Controls

hey guess Brenda reproductions here and first of all I'd like to apologize for my theme that I'm using it's going to make the application that we're developing look a little funky if you're using the default theme and trying to compare what our applications look like but you should be able to manage alright so this tutorial is going to be about how to create your own versions of already existing controls in visual basic.net 2008 and 2010 for this video I'm going to be using Microsoft Visual Studio and I'm using the.net framework 2.0 in this tutorial project so what we're going to be doing here is saying that we have this form and what we want is we want to build our let's just say our own stopwatch so that is you press a button and once you press that button you want the star ball to start incrementing from from zero so this is actually really easy to do but the thing is we want our stopwatch to display as a label and this this is just basic functionality of a vb.net and so let's go ahead and get started so since we want our stopwatch to display as a label the first thing we're gonna need to do is go up here to this add new item button and press add new item and then we're gonna go ahead and choose a class file now a class file is just when you're in using object-oriented programming like we're using now a class is essentially just an object so we're going to name this class stopwatch since we're going to be making a stopwatch and as you can see we jump right into the coding here there is actually no physical designer for this class but that's okay because we don't need one so like we said what we want our class to do is actually function as a label so all we do is we make it a subclass of a label by typing inherits label so now our stopwatch is actually a label so now the the next thing we need to do is we actually need to add the stopwatch of functionality to it but before we do that I just want to demonstrate the things you can do with this so if we go back to form one here and we actually save all of the project and then we actually rebuild the project we can actually go into our tool box and in our toolbox we have this new panel called inherits tutorial components so this is our project components and all we've got here is the stopwatch so if we actually drag this on door form it says stopwatch 1 but if we look over at the properties here everything is just like a label so we can actually change the text to label one and you wouldn't even be able to tell the difference that's because it is a label so we're just gonna go ahead and delete this and jump right back into our stopwatch here so the first thing we need to do is we actually need to think about how we're going to design this stopwatch obviously if we're going to design a stopwatch what we need to do is we need to add a timer to our stopwatch so we're going to create a new private variable and we're gonna call it private timer as well actually yeah private timer as timer and then we also are going to mess with a constructor now a constructor is every all the code that is executed when a new instance of this object is created so when we actually add the stopwatch from the toolbox onto the form this method is called so what we want to do is this timer is actually nothing at the moment so we actually want to set it to something equals a new timer when the project starts so since we're gonna have a stopwatch we're gonna need to keep track of milliseconds seconds minutes and hours so the next thing we actually need to do is say timer interval equals 1 so that's setting the timer interval equal to one millisecond which means every millisecond we are actually going to be incrementing or every millisecond we're going to be calling whatever the timer has to do so the next thing we need to do is we need to actually access the the information or we actually need to access the method that is called every time this timer takes so if you are unfamiliar a timer is actually an object that ticks every specified interval and every time it takes you can call a certain amount of code so what we're going to be doing is we're gonna make a new method called timer underscore tic and this method will hold all of the commands that we need that will take place every time the timer ticks but for now this timer tick will never be called so we actually need to tell Visual Basic to every time this timer ticks call this method so we're going to need to add a handler so we're adding the handler of every time the timer that we created tick and we're going to send it to the address of timer tick so now every time this timer ticks we're going to execute what's in here so now there's gonna be a few other methods that we're going to need to create here we're also we're going to need to create a start stopwatch method that's going to essentially start the stopwatch we're also going to make a stop stopwatch method and okay let's just do that for now no in order forget to give this time to work so let's just say we start the stopwatch now so what it needs to do is it needs to take the current system time and actually subtract it from the the system time or the time as soon as we press the start button and that's how we're going to get our current value so we're also going to need to create a new variable private start time as date and this variable is going to be initialized every time we start the timer so when we start the stopwatch we're going to say start time equals now and then we're going to say timer not enabled equals true and timer does start so what this is essentially doing is its setting the start time equal to now and then it's starting the timer so this method can be called every millisecond that is so with the stop stopwatch what we want to do is we just want to say timer dot enabled equals false and then timer dot stop okay so what we're going to do here on the timer tick is we're just simply going to create a new time span and this time span is actually going to keep track of how much time has elapsed since the start time so we're going to say dim time span as timespan equal to now dot subtract start time so we're essentially taking the time now and subtracting this the start time and then we are displaying or then we're getting how much time that actually is as a timespan variable so then what we need to do is we actually need to display it in a stopwatch format so we're gonna save me dot text because remember we are still accessing a label so we're just sitting the text of the label we're going to say equals so on a stopwatch the first thing you see is hours so timespan hours and then we're going to add in a colon which can be done with the ampersand and then adding in a colon and then we are going to add in timespan dot minutes and then we are going to add an ampersand and a colon again and then timespan dot seconds ampersand colon and time span milliseconds so essentially what we just did is we created our own version of the label and this version actually functions as a stopwatch so we can actually go back to our regular form here and what we're going to do is we're now going to add two buttons to our form button one and button to button one is going to act as the start stopwatch and button 2 is going to act as the stop stopwatch and then we're just going to go ahead and rebuild our project and then we're going to go in our toolbox and drag in the latest version of our stopwatch class that we just created onto the form so as you notice it automatically gives it the name of stopwatch 1 so we're going to access that in the code for the buttons so when this start button is clicked we're going to say stopwatch 1 let's start stopwatch so as you remember start stopwatch is actually the method that we created inside of the stopwatch class so now if we go back to our form and click on the or double click the stop button we can actually say stopwatch want that stop stop so now if we actually run the project we can see that it looks like we have a label and two buttons a label with the text of stopwatch one and two buttons with the texts of start and stop however if we actually press the start button you could see that it immediately starts acting as a timer or a stopwatch rather so all we're doing is we're constantly just getting the current system time and comparing it to when we press the start button so it has been a 16 17 seconds since we have actually pressed the start button now we can actually press the stop button and it freezes the timer so that is basically how to actually create your own version of a control so we just created our own version of a label and we asked it to function as a stopwatch now there are several other applications of this you don't always have to make your own version of a label you can make your own version of a picture box and a member on BP forms named VIN wares is actually trying to create his own little space game and in order to actually make each enemy drawable onto the screen he's going to need to make a enemy class that inherits a picture box so the picture box can actually be added on to the screen but in order to actually do that no actually you know what let's do that now so we're just going to go ahead and delete the stopwatch the start and the stop button from the form and then we're going to add a new class so what we're going to do with this class is we're just going to make something that inherits a picture box in order to show the BP format remember VIN wears exactly what to do so we're just gonna call this let's just say mmm let's call it something fancy not really that fancy but let's call it plant so this is the plant class and that's giving us a few hours because our stopwatch code is still there so this is the plant class and what the plant class is going to be is it's actually going to be something on the screen that it's just going to be a picture box but it's going to have a custom picture by default so the first thing we actually need to set it to do is inherit from a picture box class so we're just gonna say inherits picture box so the next thing we're going to do is we're actually going to say public sub new so once again this is the constructor and it's actually going to be called every time the picture box is placed on the screen so this time we're actually going to be do something different now this new method is called every time the plant is actually put on the screen but what we need to do is we also need to tell it to call what it's supposed to do or tell it to do what it's supposed to do when a new picture box is placed on the screen so we can do this by typing in my base and that is actually accessing the class that we're inheriting so we're gonna say my base dot new so that is basically just calling the constructor of the picture box okay so now that that's complete when a new when a new plant is created what we wanted to do is we always want it to be the picture a picture of a plant so I'm actually going to go on the internet right now and grab a random picture of a plant plant haven't I'm just gonna press Images and let's see here what do we got what's a good plant this is a nice plant don't you think yeah so we're just gonna go ahead and get this plant image here it's actually from Ikea so no copyright infringement intended we're just going to save the image to my B Drive here and I'm just going to call it plant and it is a JPEG image so then we're going to go ahead and go back to the actual class here and we're going to add the plant as a resource so we're just going to go to the properties here go to the resource tab and click add resource and add existing file then we simply need to get navigate to my B Drive where I saved it to and add in the plant file so we now have a new resource that all of our classes can access called plant so every time a new plant is created we want to change the picture boxes image to a plant so we can do this by saying me damage equals my dot resources dot plant so this is accessing the image property of the picture box now we also want to make it an appropriate size and appropriate width and height so it fix or it fits the plant image so we're just going to say me dot width or me dot size equals new system draw drawing size and then we need to specify width and height so we're going to need to get the width and height of the plant picture so we're gonna say my resources don't plant dot width and my dot resources dot plant dot height so now we're just as soon as we create a new one we are setting the image to a plant image and we're setting the size to a plant size now one of the neat things about actually creating your own version of controls is you can still access the methods that are called within the subclass or the superclass rather so in our picture box method or in our plant method we can actually get all of the events that can occur with the picture box so for example if the mouse clicks on the picture box we can actually have something happen so if you click on the picture box we're going to have it let's just say shrink cut the size in half so what we're going to do is we're going to say if me dot width is equal to my daughter sources dot plant dot with so if the widths are equal then we need to shrink the image so we're going to say meet up with size equals news system drawing dot size my dot resources that plant dot with I divided by two and my dot resources don't plant dot with my herb this is height actually height divided by two so we are essentially just cutting the image or cutting the picture box in half however if the width is not equal to the picture with so that means it's these are the widths and heights of the picture box we're just gonna say well actually all we need to do is set it here so we're just going to copy and paste that code snippet now we can go ahead and actually jump back to our form here press file save all and then rebuild our project and now we can actually drag the plant onto the actual form itself now as you can see as soon as we drag it on it automatically sets our image to the plant image and that's because we created a new instance of the plant object and therefore it called the new method so if we run this program we can actually see that it all it looks like is a program with a plant image but if we actually click on the picture box and actually changes its size just like we told it to so essentially we just created our own picture box class and we can use this several times so for example if you wanted just a bunch of these picture boxes you could say let's just go into the plant class here and when you click on the no wait yes so now we can actually access the plant class inside of the actual form itself so when the form loads say we want to add five plants onto the form so we can do that by it's creating a simple for loop so we're going to say for I as whoa for I as integer equal to one and if we want it to do it five times we're going to need to do one two three four five so it's going to go from one to five and we're going to increment I by one each time so this is going to execute this code inside of here five times and now we're just gonna say me dot controls add and then we're going to create a new plant so that's very simple so now if we click on start debugging it looks like we simply have one plant object here but we actually have five so if we shrink one plant object or by clicking on it yes so we actually have five plant objects to deal with so ioud it click the plants object five times in order to actually get the shrinking available however we can do this by specifying the location of the plant before we actually place it so we can say dim plant as new plant so this is creating the new picturebox plant class we've created and then what we want to do is we want to get a new new place so we want to set each one up so it's at its directly next to the previous one so we're actually gonna change our loop to go from zero to four which still executes five times but you'll see why we need this in a second so we're actually going to say dim X as integer equal to mine resources dot plant dot width times I so what we're doing here is say we're starting off at zero so this is going to give us an x value is zero starting off a one it's going to give us an x value of the plant with so it's just gonna nail a whole bunch of plant images horizontally next to each other now then we're going to say plant dot location equals a new system drawing dot point now we're going to send an X as the X integer and then plant dot y or location dot Y is the y coordinate and then all we need to do is say me dog controls da add plant so we can definitely edit the plant straight from the form even though it's our own custom class so we're gonna go ahead and run this and as you can see we've got lots of plants to deal with here five of them in fact and each one is a separate plant object so if we click on each one you can see that it shrinks when we actually click on them so I've just alternated shrinking and we can shrink them all we can double size the ones that we want and so this is perfect if you want to have multiple things that do the same thing in a business application or if you want to create a game and you actually need multiple enemies or multiple bullets to be on the screen at once you can do this by creating your own separate class so this was just a basic overview of how you can use polymorphism in order to it's a big word but it just basically means the inherit statement that we used so of how you can use the inherit statement to create your own versions of existing classes in this tutorial we created a stopwatch from a label and a plant image from a picture box so thanks for watching this tutorial I hope you enjoyed it be sure to check out the newly upgraded beepy forms I'm sure there'll be plenty of discussion on this video there and thanks for watching this tutorial please remember to rate comment and subscribe and have a fantastic day see yes

Channel: BrandonioProductions

Views: 30,043

Keywords: 2008, stopwatch, plant, 2010, tutorial, picturebox, bpforums, inherits, vb.net, brandonsoft, free, statement, label, brandonioproductions, programming

Id: rY3nDOaD878

Length: 20min 23sec (1223 seconds)

Published: Sat Jul 21 2012