Create A New Project.
The size of your form should be around 700, 400.
On top left of the form add a button. Change text to: Draw
On the right of the previous button add another one, text: Clear.
Double click the Draw button. Before we write anything inside we'll first declare a variable we need for drawing. Outside the button sub add:
Private rr As Graphics
Now inside the sub add:
rr = CreateGraphics()
rr.DrawRectangle(Pens.Black, 10, 10, 30, 30)
rr = CreateGraphics() - means that we just want to use "rr" to paint anywhere within the borders of the main form. The whole client space of the main form is going to be the "canvas" for our drawings.
rr.DrawRectangle(Pens.Black, 10, 10, 30, 30) - we use the DrawRectangle function with our "rr" variable. The arguments inside the parentheses:
Pens.Black - determines the line color of the rectangle
10, 10 - coordinates of "x" and "y" on the main form. This is the starting location of the rectangle.
30, 30 - size of the rectangle: first number is width, second is height.
Double click on the "Clear" button. Inside add:
Refresh()
You can try the buttons out. Change the values of the rectangle to see how it works. Since we are "painting on our screen", you can create a rectangle, then drag and drop the part of the main program form with the rectangle in it outside of your computer screen and then back again. The rectangle will disappear.
Public Class Form1
Private rr As Graphics
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
rr = CreateGraphics()
rr.DrawRectangle(Pens.Black, 10, 10, 30, 30)
End SubPrivate Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click
Refresh()
End SubEnd Class
Let's add the ability to create random values for our rectangle.
Below the "Draw" button add another one called: Random.
Below this button add a label, text: Location.
On the right of the label add a small textbox, size: 30, 20, text: 0
Copy and paste the textbox, put it on the right of the previous one.
On the right of this textbox add another label (should be Label2).
Below the Location label insert another label called: Width.
On the right of this label, copy and paste a textbox with the zero inside.
On the right of the textbox, add another label (Label4).
Below the Width label insert another one called: Height.
On the right of this label, copy and paste another textbox.
On the right of this textbox, add another label (Label6).
Double click on the main field form. The subroutine should be handling the Load event. We'll add another triggering event. Change this part:
Handles MyBase.Load
to: Handles MyBase.Load, MyBase.Resize
Inside the sub add:
Label2.Text = "< " & Size.Width & ", " & Size.Height
Label4.Text = "< " & Size.Width
Label6.Text = "< " & Size.Height"Size.Width" and "Size.Height" are properties of the main form. The labels will be changed when the program is loaded for the first time and it will actively change if a person is resizing the main form.
This labels should alert the user about the maximum values you can have for your rectangle location and size in order for it to appear inside the main form.
Double click the "Random" button, inside the sub add this:
Dim hh As New Random
TextBox1.Text = CInt(hh.Next(Size.Width / 2))
TextBox2.Text = CInt(hh.Next(Size.Height / 2))
TextBox3.Text = CInt(hh.Next(Size.Width / 2))
TextBox4.Text = CInt(hh.Next(Size.Height / 2))
TextBox1.Text = CInt(hh.Next(Size.Width / 2)) - the textbox will receive a random number because of "hh.next" between 0 and half of the main form's width. We divided this by 2 in order to make sure the new rectangle appears inside the main form, the divison by two can be removed, of course.
When dividing odd numbers (like 377) by 2, we would get a value after the decimal point (like 188.5), that's why we use CInt - means "convert to integer". This will give us whole numbers.
Go to the sub of the Draw button. Change this line:
rr.DrawRectangle(Pens.Black, 10, 10, 30, 30)
into:
rr.DrawRectangle(Pens.Black, CInt(TextBox1.Text), CInt(TextBox2.Text), CInt(TextBox3.Text), CInt(TextBox4.Text))
- the Draw button will now receive values from the textboxes. They have to be converted to integers.
Code:
Public Class Form1
Private rr As Graphics
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
rr = CreateGraphics()
rr.DrawRectangle(Pens.Black, CInt(TextBox1.Text), CInt(TextBox2.Text), CInt(TextBox3.Text), CInt(TextBox4.Text))
End Sub
Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click
Refresh()
End Sub
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load, MyBase.Resize
Label2.Text = "< " & Size.Width & ", " & Size.Height
Label4.Text = "< " & Size.Width
Label6.Text = "< " & Size.Height
End Sub
Private Sub Button3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button3.Click
Dim hh As New Random
TextBox1.Text = CInt(hh.Next(Size.Width / 2))
TextBox2.Text = CInt(hh.Next(Size.Height / 2))
TextBox3.Text = CInt(hh.Next(Size.Width / 2))
TextBox4.Text = CInt(hh.Next(Size.Height / 2))
End Sub
End Class
Private rr As Graphics
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
rr = CreateGraphics()
rr.DrawRectangle(Pens.Black, CInt(TextBox1.Text), CInt(TextBox2.Text), CInt(TextBox3.Text), CInt(TextBox4.Text))
End Sub
Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click
Refresh()
End Sub
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load, MyBase.Resize
Label2.Text = "< " & Size.Width & ", " & Size.Height
Label4.Text = "< " & Size.Width
Label6.Text = "< " & Size.Height
End Sub
Private Sub Button3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button3.Click
Dim hh As New Random
TextBox1.Text = CInt(hh.Next(Size.Width / 2))
TextBox2.Text = CInt(hh.Next(Size.Height / 2))
TextBox3.Text = CInt(hh.Next(Size.Width / 2))
TextBox4.Text = CInt(hh.Next(Size.Height / 2))
End Sub
End Class
Start the program. Press the random button and then draw.
Adding tooltips to your controls (objects) is very simple. Go to toolbox -> Find: ToolTip and double click on it to add to your program. As soon as you do that, all of your controls receive the property "ToolTip on ToolTip1" inside the Property window.
In the design page, click on the Draw button -> Properties -> ToolTip on ToolTip1 -> click on the dropdown menu arrow -> insert inside: Press this button to execute the draw operation.
When you start the program and hover over the Draw button, you'll see the tooltip message appear. Tooltips can help new users understand the commands of a program. The default "initial delay" for the message to become visible is 500 milliseconds or half a second.
On the design form, inside the system tray, click on the ToolTip1 control and go to properties. You can change the initial delay here.
AutoPopDelay - how long the message will be displayed
Set the ToolTipIcon to "Info" and the IsBalloon property to True.
Add a checkbox on the right of the Random button. Text: Fill Rectangle.
Go to the sub of the Draw button and change this line:
rr.DrawRectangle(Pens.Black, CInt(TextBox1.Text), CInt(TextBox2.Text), CInt(TextBox3.Text), CInt(TextBox4.Text))
into:
If CheckBox1.Checked Then
rr.FillRectangle(Brushes.ForestGreen, CInt(TextBox1.Text), CInt(TextBox2.Text), CInt(TextBox3.Text), CInt(TextBox4.Text))
Else
rr.DrawRectangle(Pens.Black, CInt(TextBox1.Text), CInt(TextBox2.Text), CInt(TextBox3.Text), CInt(TextBox4.Text))
End IfIf the checkbox is checked, the Draw button will paint a rectangle filled with color. The FillRectangle function has to use brushes instead of pens.
Below the "Height" label add another button, change text to: Custom
Also add a Timer to your program.
Before we continue creating the custom operation we have to declare 3 new integer variables. Below:
Private rr As Graphics
insert:
Private x1 As Integer
Private y1 As Integer
Private c1 As IntegerOn the design form double click on the Custom button. Insert:
AddHandler Click, AddressOf theclicker
- this will add the Click event handling to the sub "theclicker" which we will create right below this sub. Add this:
Sub theclicker(ByVal sender As System.Object, ByVal e As System.EventArgs)
rr = CreateGraphics()
x1 = PointToClient(Cursor.Position).X
y1 = PointToClient(Cursor.Position).Y
TextBox1.Text = x1
TextBox2.Text = y1
Timer1.Start()
c1 = 1
End Sub- Right after we click the Custom button, "theclicker" will be awaiting for the next mouse click.
When we make the next click on our form, "x1" and "y1" receive their values which we will use as the new rectangle location. We also insert this values in the corresponding "Location textboxes". The timer is started.
Go to the design form and double click on the "Timer1" control. Insert this inside the sub:
Refresh()
TextBox3.Text = PointToClient(Cursor.Position).X - x1
TextBox4.Text = PointToClient(Cursor.Position).Y - y1
rr.DrawRectangle(Pens.Black, x1, y1, PointToClient(Cursor.Position).X - x1, PointToClient(Cursor.Position).Y - y1)- on every tick the timer will be drawing a new rectangle with the current size (depending on mouse location). Refresh is needed to only have one rectangle at every moment (the final one), instead of leaving all the ones painted in every tick. The Width and Height of the custom rectangle are also added to the appropriate textboxes.
The "theclicker" sub is still awaiting for a click since the event wasn't yet removed.
Going back to the "theclicker" sub, at the beginning add this:
If c1 = 1 Then
RemoveHandler Click, AddressOf theclicker
Timer1.Stop()
c1 = 0
Button1_Click(sender, e)
Exit Sub
End If- "c1" was turned to 1 after the first click made after pressing the custom button. The second click now removes the handling of the mouse event from this sub. A third click won't do anything anymore.
The timer is stopped giving us the final value for Width and Height in that moment. "c1" is reset to zero.
Button1_Click(sender, e) - calling the Draw button. This will draw the rectangle right after we press the second click. If we remove this line, the textboxes will receive the new custom data but the user will have to press the Draw button himself.
Final code:
Public Class Form1
Private rr As Graphics
Private x1 As Integer
Private y1 As Integer
Private c1 As Integer
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
rr = CreateGraphics()
If CheckBox1.Checked Then
rr.FillRectangle(Brushes.ForestGreen, CInt(TextBox1.Text), CInt(TextBox2.Text), CInt(TextBox3.Text), CInt(TextBox4.Text))
Else
rr.DrawRectangle(Pens.Black, CInt(TextBox1.Text), CInt(TextBox2.Text), CInt(TextBox3.Text), CInt(TextBox4.Text))
End If
End Sub
Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click
Refresh()
End Sub
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load, MyBase.Resize
Label2.Text = "< " & Size.Width & ", " & Size.Height
Label4.Text = "< " & Size.Width
Label6.Text = "< " & Size.Height
End Sub
Private Sub Button3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button3.Click
Dim hh As New Random
TextBox1.Text = CInt(hh.Next(Size.Width / 2))
TextBox2.Text = CInt(hh.Next(Size.Height / 2))
TextBox3.Text = CInt(hh.Next(Size.Width / 2))
TextBox4.Text = CInt(hh.Next(Size.Height / 2))
End Sub
Private Sub Button4_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button4.Click
AddHandler Click, AddressOf theclicker
End Sub
Sub theclicker(ByVal sender As System.Object, ByVal e As System.EventArgs)
If c1 = 1 Then
RemoveHandler Click, AddressOf theclicker
c1 = 0
Timer1.Stop()
Button1_Click(sender, e)
Exit Sub
End If
rr = CreateGraphics()
x1 = PointToClient(Cursor.Position).X
y1 = PointToClient(Cursor.Position).Y
TextBox1.Text = x1
TextBox2.Text = y1
Timer1.Start()
c1 = 1
End Sub
Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick
Refresh()
TextBox3.Text = PointToClient(Cursor.Position).X - x1
TextBox4.Text = PointToClient(Cursor.Position).Y - y1
rr.DrawRectangle(Pens.Black, x1, y1, PointToClient(Cursor.Position).X - x1, PointToClient(Cursor.Position).Y - y1)
End Sub
End Class
Private rr As Graphics
Private x1 As Integer
Private y1 As Integer
Private c1 As Integer
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
rr = CreateGraphics()
If CheckBox1.Checked Then
rr.FillRectangle(Brushes.ForestGreen, CInt(TextBox1.Text), CInt(TextBox2.Text), CInt(TextBox3.Text), CInt(TextBox4.Text))
Else
rr.DrawRectangle(Pens.Black, CInt(TextBox1.Text), CInt(TextBox2.Text), CInt(TextBox3.Text), CInt(TextBox4.Text))
End If
End Sub
Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click
Refresh()
End Sub
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load, MyBase.Resize
Label2.Text = "< " & Size.Width & ", " & Size.Height
Label4.Text = "< " & Size.Width
Label6.Text = "< " & Size.Height
End Sub
Private Sub Button3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button3.Click
Dim hh As New Random
TextBox1.Text = CInt(hh.Next(Size.Width / 2))
TextBox2.Text = CInt(hh.Next(Size.Height / 2))
TextBox3.Text = CInt(hh.Next(Size.Width / 2))
TextBox4.Text = CInt(hh.Next(Size.Height / 2))
End Sub
Private Sub Button4_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button4.Click
AddHandler Click, AddressOf theclicker
End Sub
Sub theclicker(ByVal sender As System.Object, ByVal e As System.EventArgs)
If c1 = 1 Then
RemoveHandler Click, AddressOf theclicker
c1 = 0
Timer1.Stop()
Button1_Click(sender, e)
Exit Sub
End If
rr = CreateGraphics()
x1 = PointToClient(Cursor.Position).X
y1 = PointToClient(Cursor.Position).Y
TextBox1.Text = x1
TextBox2.Text = y1
Timer1.Start()
c1 = 1
End Sub
Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick
Refresh()
TextBox3.Text = PointToClient(Cursor.Position).X - x1
TextBox4.Text = PointToClient(Cursor.Position).Y - y1
rr.DrawRectangle(Pens.Black, x1, y1, PointToClient(Cursor.Position).X - x1, PointToClient(Cursor.Position).Y - y1)
End Sub
End Class
Start program. You can always add more tooltips to your program objects.