In this tutorial, we will go over how to code and draw graphics inside of a Windows Application form using Visual Basic. In some cases, you may need to use some kind of visual presentation. As some graphics editing programs can be nice to help generate GIF objects within a form, sometimes you may want crisp and clean graphics that are generated by the computer for better presentation. We will go over and demonstrate three examples of drawing graphics within your form.
Setting Up Your Project
Before we can start drawing, we need to set up our project with all of the necessary files. If you have Visual Studios you can simply open the application and Start A New Project. Select Visual Basic in the left hand projects panel and then choose Windows Forms Application. Click OK and Visual Studios will compile all of the necessary files you need to code and test your project. We will be using a Windows Form as our canvas and placing a button that will command the computer to draw out the graphic for us.
Once the Project is setup, We will need to add a button to our Form1.vb document. In the design view of this document you will see a pre-made form. Open up your Toolbox Panel to drag and drop a Button into the form area. Now that the button has been created, we can modify it s function by double clicking it to open the code view of the button.
Draw a Line
In our first example, we will be drawing a simple line and break down the code. If you d like, you can change the button text to inform the user of it s actions. Simply open up the Form1.Designer.vb and look for the line Me.Button1.Text = . Inside of the quotations you can place whatever text you d like and it will be displayed in the form button. Go back to your button s code view to insert the code below.
If there is a previous Private Sub section from before just replace it with this new line of code. Going through the code you will see that it is separated basically into three parts: creating some variables, Create a brush to draw the object and then place the coordinates to draw the graphic. The myPen variable is used to define the color of the line and the width (which is ten in this example). The last line will use a method to draw the line using the myPen values and the ending coordinates of the line. The syntax for placing coordinates follows a x1, y1, x2, y2 grouping. Press the Start button to compile and run the code and test out your form. It should look similar to the image below.
Draw a Rectangle
Next we will insert some code that will allow us to draw a rectangle instead of a solid line. Following the same process, Double-Click on the button tool, then copy and paste the below code into the Buttons Control file.
Our setup in this example is very similar to the previous one from before. This time, we made some slight modifications in order to change the results. The myPen variable now uses a Drawing object instead of a brush which will help us Draw the shape instead of just utilizing a stroke. We then must use the DrawRectangle method to specify we want to draw a rectangle. It is still necessary to state the coordinates of the rectangle by following the parameter syntax (myPen, X, Y, width, height). Press the Start button to compile and run the code and test out your form. It should look similar to the image below.
Draw a Dotted Rectangle
Our last example, we will create another rectangle, but this time we will have a dotted line stroke around it instead of the solid line. The code is very similar to the previous example but we must create an extra object and combine it with the myPen variable.