Simple Steps in VB.NET. Part 1 - TheButton
Article source code: ssteps1_thebutton.zip
When the absolute beginner
searches the web to find something he or she can do with VB.NET, it is usually
too advanced and/or too complicated to start with. If it isn't, it is certainly
something which focuses on one function, which in turn is very useful, but a
bit boring. I believe that the very beginner should learn useful things, but
puh-leeze, leave those complicated things for later. Programming is already
serious enough, so why not have some fun with it? Of course, a fun application
is not necessarily a useful program. On the other hand, it teaches useful
functions in the easiest way possible; functions you will need when writing
something really complicated. Besides, it shows the absolute beginner that
success is not only for the advanced.
What you will learn here is
exactly what I mentioned above: an easy, less useful fun program with some
useful functions. You don't need even the slightest idea about programming to
complete this successfully. Now you might be wondering: what the heck is that
guy talking about? Okay, let's first look at what you will do.
You will create a simple form
with four buttons, each of which has a different function: make a button
visible/invisible, close the form, and one which will display a message. In
addition, you will also insert tool tips – those little yellow boxes with
detailed information that pop up when the mouse rests over a button. Got
curious? Then, let's start.
Before you start, make sure you
have a bottle of French champagne in the freezer to pop when you're done – I
mean, with the program.
First, click Start, point to All
programs, then point to Microsoft Visual Studio.NET, and finally click the
program icon for Microsoft Visual Studio.NET. Relax; it may take a few seconds
to open. If this is the first time you open the program, you will see the
following window:
(Figure 1)

You may decide to change some
settings here. If you have nothing but Visual Basic.NET installed, it may be a
good idea to change the setting Visual Studio Developer to Visual Basic
Developer.
Click Get Started, in the upper
left. You should see the following:
(Figure 2)

In this window, you can also see
your recent projects. Of course, only if you have some. If you do, there will
be a link you can click to open the project. However, only four links will be
displayed here. If you have more than four recent projects, you can click Open
Project and choose the project you want to open. You can also adjust this
number to display up to 24 recent projects – not quite the thing for beginners.
To change this number, click Tools, then Options and adjust the number
accordingly. If you ever want to open your projects outside the development
environment, go to this folder: C:\Documents and Settings\yourusername\My
Files\Visual Studio Projects.
To start a new project, click New
Project (sounds obvious, doesn't it?). A new window will open. In the left
pane, click Visual Basic Projects. In the right pane, click Windows
Application. Double-click the name (WindowsApplication1) and type the name you
would like to give your application. I called mine TheButton
. Click OK and wait
until the project is created and opened.
(Figure 3)

What you will see next should look like this:
(Figure 4)

If you have left the settings
(see Figure 1) at default, the toolbox (on the left) will be hidden. In this
case, move your mouse to the toolbox
(Figure 5)

It's probably a good idea to
leave the toolbox permanently open. To do so, click the Auto Hide button. If
you later prefer the toolbox closed, click Auto Hide again.
(Figure 6)

You know already that the Toolbox
is on the left. In the upper right is the Solution Explorer, and below it the
Properties. Go to the Properties window and look where it says Form1.vb. You
can change this name to anything you'd like, but always be sure it ends with
.vb and that there are no spaces. For now, you don't need to change it.
The title of your form is Form1,
which isn't the best title for it. Let's change this first. Click the form
once, go back to the Properties and look for the item Text. Form1 should appear
there. Double-click Form1 and type The Button, or anything you'd like. Click on
the form to confirm and activate the changes. You see, now your form has
changed the title (Figure 7). At this point, you could also change the name,
but leave it as it is for now. Whenever you change the name, make sure it ends
with .vb.
(Figure 7)

Now the time has come to insert the buttons. Go to the
Toolbox. Under Windows Forms, look for Button (Figure 8).
(Figure 8)

You can either drag and drop a button on the form, or you
can simply double-click to insert a button. Insert four buttons. Your form will
look like this:
(Figure 9)

Move your mouse over each button and drag them to an
appropriate place.
(Figure 10)

Your form could look something like this:
(Figure 11)

The first thing you can see is
that the buttons aren't exactly centralized. One way to centralize the buttons
is to count the dots on each side. Aw, c'mon – I'm just kidding! Click the left
button of your mouse and hold it while you're dragging over all the buttons
(Figure 12).
(Figure 12)

Release the button (from the mouse, of course), and see that
all buttons were chosen (Figure 13).
(Figure 13)

Now click on Center Horizontally. Observe the dark spot with
the tool tip (Figure 14). Next to it on the right, there is a button to Center
Vertically. Feel free to use this, too.
(Figure 14)

Click on the form once. Click once on Button1 and go to
Properties. Change Text from Button1 to Close, and change Name from Button1 to
btnClose. Click on each button once and change those items for the other
buttons as follows:
Original Text | Changed | Original Name | Changed |
Button1 | Close | Button1 | btnClose |
Button2 | Message | Button2 | btnMsgBox |
Button3 | Show | Button3 | btnShow |
Button4 | Hide | Button4 | btnHide |
|
Your form should now look like this:
(Figure 15)

Now, let's start with the code. Double-click the button
Close and edit the code so that it looks like the following (note that
everything in green is not essential, it's just an explanation):
Private Sub btnClose_Click(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles btnClose.Click
'This will close the program.
Me.Close()
End Sub
To see your form again, click on Form1.vb [Design]* (Figure
16)
(Figure 16)

Go ahead and edit the code for the other buttons.
Message:
Private Sub btnMsgBox_Click(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles btnMsgBox.Click
'This will show a message box.
'Hey, Visual Basic.NET works is the message.
'Hi Folks is the titel.
MessageBox.Show("Hey, Visual Basic.NET works", "Hi Folks")
End Sub
Show:
Private Sub btnShow_Click(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles btnShow.Click
'This will show the Close button.
btnClose.Visible = True
End Sub
Hide:
Private Sub btnHide_Click(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles btnHide.Click
'This will hide the Close button.
btnClose.Visible = False
End Sub
Okay, ready to run the thing? In
the menu, click Build, and then click Build TheButton. Then press F5 to run the
program. You can also directly press F5, but it's a good habit checking for
errors first. If an error occurred, go through the codes once more. Click the
buttons and see what happens.
Remember that French champagne.
By now, it would be a good idea to take that French champagne out of the
freezer. It's quite nasty when the bottle explodes. We're not done yet.
First of all, the form comes up
at Windows' default location. I personally prefer a program to open in the
center of the screen. To change this, close the running program first. When
you're in design view again, click the form once and go to Properties. Look for
the item StartPosition. Click where it says WindowsDefaultLocation. From the
Dropdown box, choose CenterScreen. Press F5 to run the program again. Voilá!
It's almost time for some champagne, but before that, we have to insert some
tool tips, so that people like me know what to do with the program.
Go back into design view. In the
Toolbox, under Windows Forms, double-click the item ToolTip. Go to Properties
and change the name from ToolTip1 to btnTooltip and click on any empty space.
Now double-click the form and
edit the code so that it looks like the following:
Private Sub Form1_Load(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MyBase.Load
'The tool tips will appear in yellow boxes
'when a user moves the mouse over the indicated items.
btntooltip.SetToolTip(btnClose, _
"This closes the program - if you can see the button - hehe!")
btntooltip.SetToolTip(btnMsgBox, "This will display a message")
btntooltip.SetToolTip(btnShow, _
"This will show the button to close this program")
btntooltip.SetToolTip(btnHide, _
"This will hide the button to close the program")
End Sub
Now, build the program again and
run it. Move your mouse over the buttons to see the tool tips. You can now
change from Debug mode into Release mode and build the program a last time.
(Figure 17)
(Figure 17)

Open C:\Documents and
Settings\yourusername\My Files\Visual Studio Projects\TheButton\obj\Release.
Click on the blue .exe file. Ta-dah! It works! You can now copy the .exe
file to any place you want, including other computers with the .NET Framework
installed. It will be fully functional.
Call your family, friends, or
whoever, open the bottle of champagne and party. You have completed your first
VB.NET program – CONGRATULATIONS! And don't forget to drink the one or the
other glass of champagne for me.
Related devCity.NET articles: