Getting Started with Visual Basic .NET
Launch your Visual Basic .NET or Visual Studio software. When the software first loads, you'll see a screen something like this one, if you have the 2008 version:
Or this one, for VB NET 2010 users:
If you have VB NET 2012, your opening screen will look like this:
For Express 2013, Microsoft seems to have gone back to the design of the 2010 edition. It looks like this:
There's a lot happening on the start page. But basically, this is where you can start a new project, or open an existing one. The first Tab, Projects, is selected. At the moment, the area labelled "Open an Existing Project" is blank. This is what you'll see when you run the software for the first time (because you haven't created a project yet). When you create a project, the Name you gave it will be displayed on this page, as a hyperlink. Clicking the link will open the project.
At the bottom of the screen, there are two buttons: "New Project" and "Open Project". To get started, click the "New Project" button. When you do, you'll see this dialogue box appear in the version 2008:
Or this one for version 2010:
In the 2012 and 2013 version, you'll see this:
As a beginner, you'll normally want the option selected: "Windows Application", in the "Visual Basic Projects" folder. This means that you're going to be designing a programme to run on a computer running the Microsoft Windows operating system.
If you look in the Name textbox at the bottom, you'll see it says "WindowsApplication1". This is the default name for your projects. It's not a good idea to keep this name. After all, you don't want all of your projects to be called "WindowsApplication1", "WindowsApplication2", etc. So click inside this textbox and change this Name to the following:
My First Project
Keep the Location the same as the default. This is a folder inside of your "My Documents" folder called "Visual Studio Projects". A new folder will then be created for you, and its name will be the one you typed in the "Name" textbox. All of your files for your first project are then saved in this folder.
Click the OK button, and the Visual Basic NET design time environment will open. It will look like the following (version 2008):
Or this, in version 2010 and 2013:
The Design environment in VB NET 2012 is this:
That's a very daunting piece of software, hey? Well, don't worry. We'll break it down bit by bit in the next few sections, and pretty soon you'll be zipping your way around it like a pro!
Visual Basic .NET Forms
The Default Form
In the Visual Basic NET design time environment, the first thing to concentrate on is that strange, big square in the top left. That's called a form. It's actually the pretty bit of your programme, the part that others will see when they launch your masterpiece. Granted, it doesn't look too attractive at the moment, but you'll soon discover ways to lick it into shape.
To run the form, try this:
- From the menu bar, click Debug
- From the drop down menu, click Start
- Alternatively, press the F5 key on your keyboard
- Your programme is launched
Congratulations! You have now created your very first programme. It should look like this:
You can get rid of this by clicking the pin or the cross on the right-hand side:
If you compare the form when you create a new project with the one above when its running, you'll see that they look very similar. But the one above is actually a real programme, something you could package and sell to unsuspecting village idiots.
So what's going on? Why the two different views? Well, Visual Basic has two distinct environments, a Design environment and a Debug environment. Design Time is where you get to play about with the form, spruce it up, add textboxes, and buttons, and labels (and code, of course ); Debug is where you can test your programme and see how well it performs. Or doesn't perform, as is usually the case.
But don't worry about the terminology, for the time being. Just be aware that there's a two step process to VB programming: designing and debugging.
So, let's get on and do some designing! Before we can start designing a form, though, we need some tools. And where are tools kept? In a toolbox!
Click the Red X on the form to stop it from running. You will then be returned to the software environment.
If you look at the bottom of the screen, you'll see an Output Window in Version 2012 and 2013 of the VB software:So what's going on? Why the two different views? Well, Visual Basic has two distinct environments, a Design environment and a Debug environment. Design Time is where you get to play about with the form, spruce it up, add textboxes, and buttons, and labels (and code, of course ); Debug is where you can test your programme and see how well it performs. Or doesn't perform, as is usually the case.
But don't worry about the terminology, for the time being. Just be aware that there's a two step process to VB programming: designing and debugging.
So, let's get on and do some designing! Before we can start designing a form, though, we need some tools. And where are tools kept? In a toolbox!
Adding Controls Using the Toolbox
Things like buttons, textboxes, and labels are all things that you can add to your Forms. They are know as Controls, and are kept in the Toolbox for ease of use.
The Toolbox can be found on the left of the screen. In the picture below, you can see the toolbox icon next to Form1 (VB Net 2008):
As you can see, there are an awful lot of tools to choose from! For this first section, we'll only be using the Button, the TextBox and the Label.
If you want to keep the toolbox displayed, click the Pin icon next to the X. To close the toolbox, simply move your mouse away. Or just click the word Toolbox again.
The Toolbox can be found on the left of the screen. In the picture below, you can see the toolbox icon next to Form1 (VB Net 2008):
VB Net 2010 and 2013:
VB NET 2012:
To display all the tools, move your mouse over the toolbox icon. You'll see the following automatically appear (the 2012 version looks similar to the one on the right, below):
There are lots of categories of tools available. The toolbox you'll be working with first is theCommon Controls toolbox. To see the tools, click on the plus or arrow symbol next to Common Controls. You'll see a long list of tools:
If you want to keep the toolbox displayed, click the Pin icon next to the X. To close the toolbox, simply move your mouse away. Or just click the word Toolbox again.
Adding a Tool (Control) to your Form
Let's start by adding a textbox to our form. (The following screenshots are taken from the more colourful previous versions of Visual Studio Express. Version 2012 is rather grey and bland. So don't worry that you forms don't look exactly the same, if you have this version.)
With the Common Controls displayed, do the following:
With the Common Controls displayed, do the following:
- Locate the TextBox tool
- Double click the icon
- A textbox is added to your form
The textbox gets added to the top left position of your form. To move it down, hold your mouse over the textbox and drag to a new position:
Notice the small squares around the textbox. These are sizing handles. Move your mouse over one of them. The mouse pointer turns into an extended line with arrowheads. Hold your left mouse button down and drag outwards. The textbox is resized. Play around with the sizing handles until you're happy with the size of your textbox.
One thing you will notice is that you can't make the size any higher, but you can make it wider. The reason why you can't make it any higher is because the default action of a textbox is to have it contain only a single line of text. If it's only going to contain one line of text, Microsoft reasoned, there's no reason why you should be able to change its height. A textbox can only be made higher if it's set to contain multiple lines of text. You'll see how to do this soon.
- Create two more textboxes by double clicking on the textbox icon in the toolbar (Or Right-click on the selected textbox and choose Copy. Then Right-click on the Form and choose Paste.)
- Resize them to the same size as your first one
- Line them up one below the other with space in between
- Try to create something that looks like the one below
Adding a Label to your Form
Let's add some labels near the textboxes so that your users will know what they are for.
- Locate the label control in the toolbox
- Double click the label icon
- A new label is added to your form
- It should look like the one below
Click on the label to select it. Now hold your left mouse button down on the label. Keep it held down and drag it to the left of the textbox.
Create two more labels, and position them to the left of the textboxes. You should now have a form like this one:
To see what your Form looks like as a programme, click Debug > Start from the menu bar. Or press F5 on your keyboard:
To stop the programme from running, you can do one of the following:
1. Click the Red X at the top right of your Form
2. Click Debug > Stop Debugging from the menu bar
3. Press Shift + F5 on your keyboard
2. Click Debug > Stop Debugging from the menu bar
3. Press Shift + F5 on your keyboard
You can also click the Stop button on the VB toolbars at the top, as in the image below:
All right, we're getting somewhere. We now have a form with textboxes and labels, something that looks like a form people can fill in. But those labels are not exactly descriptive, and our textboxes have the default text in them. So how can we enter our own text for the labels, and get rid of that default text for the textboxes?
To do those things, we need to discuss something called a Property.An Introduction to VB .NET Properties
You've probably noticed the area to the right of the design environment, the area with all the textboxes in a grid, the one that has those daunting names like "AccessibleDescription", "AccessibleName", "AccessibleRole". That's the Properties box.
Click anywhere on the form that is not a label or a textbox, somewhere on the form's grey areas. The form should have the little sizing handles now, indicating that the form is selected.
On the right of the design environment there should be the following Properties box:
If your Properties box says "Textbox1 Textbox" or "Label1 Label" then you haven't yet selected the Form. Click away from the textbox or label until the Properties box reads "Form1 Form"
What you are looking at is a list of the properties that a form has: Name , BackColor, Font, Image, Text, etc. Just to the right of these properties are the values for them. These values are the default values, and can be changed. We're going to change the value of the Text property.
First, you might want to display the list of Properties in a more accessible form. You can display the list properties alphabetically. To do that, click the Alphabetic icon at the top of the Properties box, as in the image below:
This will make the properties easier to find.
Before we change any in the Properties box, let's clear up what we mean by "Property".
The properties of your television will have values. The On/Off button would have just two values - On or Off. The volume property could have a range of values, from zero to ten, for example. If the value of the volume property was set to ten, the loudest value, then you'd probably have some very angry neighbours!
In VB.NET, you can change a property of a control from the Properties Box. (You can also change a property using code, which you'll do quite a lot.) If we go back to our Form object, and the properties and values it has, we can see how to change them using the Properties Box. We'll change only one of these values for now - the value of the Text property . So, do this:
"Text" is a Property of Form1. Don't be confused by the word "Form1" next to the word "Text". All this means is that the current value of the Text property is set to the word "Form1". This is the default.
To change this to something of your own, do this:
As you can see, your new text has gone at the top of the form, in white on the blue background.
So the Text Property of a form is for setting the caption you want to display in the title bar at the top.
Click anywhere on the form that is not a label or a textbox, somewhere on the form's grey areas. The form should have the little sizing handles now, indicating that the form is selected.
On the right of the design environment there should be the following Properties box:
What you are looking at is a list of the properties that a form has: Name , BackColor, Font, Image, Text, etc. Just to the right of these properties are the values for them. These values are the default values, and can be changed. We're going to change the value of the Text property.
First, you might want to display the list of Properties in a more accessible form. You can display the list properties alphabetically. To do that, click the Alphabetic icon at the top of the Properties box, as in the image below:
Before we change any in the Properties box, let's clear up what we mean by "Property".
What is a Property?
Those controls you added to the form (textboxes and labels), and the form itself, are called control objects. You can think of controls as things, something solid that you can pick up and move about. Controls (things) have properties. If your television were a control, it too would have properties: an On/Off button property, a colour property, a volume property, and a ... well, what other properties would your television have? Think about it.The properties of your television will have values. The On/Off button would have just two values - On or Off. The volume property could have a range of values, from zero to ten, for example. If the value of the volume property was set to ten, the loudest value, then you'd probably have some very angry neighbours!
In VB.NET, you can change a property of a control from the Properties Box. (You can also change a property using code, which you'll do quite a lot.) If we go back to our Form object, and the properties and values it has, we can see how to change them using the Properties Box. We'll change only one of these values for now - the value of the Text property . So, do this:
- Locate the word "Text" in the Property box, as in the image below
To change this to something of your own, do this:
- Click inside the area next to "Text", and delete the word "Form1" by hitting the backspace key on your keyboard
- When "Form1" has been deleted, type the words "My First Form"
- Click back on the form itself (the one with the labels and textboxes), or hit the return key on your keyboard
- The words "My First Form" will appear as white text on a blue background at the top of the form
So the Text Property of a form is for setting the caption you want to display in the title bar at the top.
The Text Property of a Control
Changing the values of some properties is fairly easy. We'll now change the Text properties of our labels, and the Text properties of our Textboxes.
Click on Label1 so that it has the sizing handles, and is therefore selected. Examine the Property box for the Label:
You can see that the Label control has quite a few different properties to the Form control. Think back to your television as an control. It will have different buttons and knobs to your DVD Player control. A label has different "buttons and knobs" to the Form's "buttons and knobs".
But the Label has a lot of properties that are the same. The Text property of a Label does what you'd expect it to do: adds text to your label. We'll do that now:
Now, change the Text property of the other two labels. Change them to these values:
Label2: Last Name
Label3: Telephone Number
What you should notice is that the labels resize themselves, after you press the enter key to commit the changes. You may need to drag your labels to the left a bit. But when you're finished, your form should look like ours below:
The form might look a little squashed, though. Is there anything we can do to make it bigger? Well, it just so happens there is.
The Form can be resized just like the Label and the textboxes. Click anywhere on the form that is not a textbox or a label. If you look closely around the Form's edges, you'll notice our old friends the sizing handles. To make the form bigger, just stretch them like you did the labels and the textboxes. Play around with the size of the form until you're happy with it. You can now reposition and resize the textboxes and labels so that things don't look too squashed. Your form might look like this one:
Click on Debug > Start to have a look at your programme. Or Press F5 on your keyboard. ClickDebug > Stop Debugging to get back to the design environment. (Or press Shift + F5, or just click the red X at the top right of the form.)
Now, lets add a splash of colour to our form.
Click on Label1 so that it has the sizing handles, and is therefore selected. Examine the Property box for the Label:
But the Label has a lot of properties that are the same. The Text property of a Label does what you'd expect it to do: adds text to your label. We'll do that now:
- With label1 selected, click inside the area next to "Text", and delete the word "Label1" by hitting the backspace key on your keyboard
- Type in the words "First Name"
- Click back onto the grey form, or hit the return key on your keyboard
- Label1 has now changed its text caption to read "First Name"
- If you've made a typing error, go back to the first step above and try again
- Your form should now look like this:
Label2: Last Name
Label3: Telephone Number
What you should notice is that the labels resize themselves, after you press the enter key to commit the changes. You may need to drag your labels to the left a bit. But when you're finished, your form should look like ours below:
The Form can be resized just like the Label and the textboxes. Click anywhere on the form that is not a textbox or a label. If you look closely around the Form's edges, you'll notice our old friends the sizing handles. To make the form bigger, just stretch them like you did the labels and the textboxes. Play around with the size of the form until you're happy with it. You can now reposition and resize the textboxes and labels so that things don't look too squashed. Your form might look like this one:
Now, lets add a splash of colour to our form.
Adding a Splash of Colour
At the moment, our form looks a little bland. Time to liven it up with a splash of colour.
Changing the colour of the Form means we have to change one of its properties - the BackColor property.
So click anywhere on the form that is not a textbox or a label. If you do it right, you should see the sizing handles around the edges of the grey form. The Property Box on the right will read "Form1", and that indicates that you have indeed selected the form. When the Form is selected you can change its properties.
To change the colour of the Form, click the word "BackColor" in the Property Box. Next, click the black down-pointing arrow to the right. A drop-down box will appear.
The default colour is the one selected - Control. This is on the System Tab. The System colours are to set whatever colour scheme the user has opted for when setting up their computers. For example, you can use the Display Properties dialogue box in Windows XP to change how things like menus and buttons look. Someone who is colour-blind might have changed his or her settings in order to see things better on the computer screen. If you stick with the System colours then a colour-blind user of your programme would not have any problems seeing your master work.
As you can see in the image above, you can choose the colour of the Active Caption. The Active Caption is the one you set earlier when you changed the text to "My First Form". The Active Caption is blue on my computer, and the Active Caption Text is white. It might be different on yours.
If you want to choose a colour that is not a System colour, click the Custom Tab. You'll then see this:
Click on any of the Colours in the colour palette and the background colour of your form will change. We've gone for a pinkish colour.
You can also select the Web Tab. When you do, you'll see a list of Web-Safe colours to choose from. A Web-Safe colour is one that displays correctly in a web browser, regardless of which computer being used (that's the theory, anyway). You might want to use a Web-Safe colour if you're designing a project for the internet. But you can choose one even if you're not.
To change the colour of the labels, click on a label to select it. Look in the Property box to see if it reads Label. If so, you can now go ahead and change the BackColor property of the Label in exactly the same way that we changed the BackColor property for our Form.
Change the colour of the other two labels to anything you like. To change the colour of more than one Label at a time, click on one Label to select it. Now, hold down the "Ctrl" key on your keyboard and click another Label. You'll see that two Labels now have sizing handles around them. Click the third Label with the "Ctrl" key held down, and all three Labels will be selected. You can change the BackColor property of all three at once.
If you want to change the Font size of the Labels and Textboxes, select a control. Let's start with Label1.
Notice that the Font property has a cross next to it. This indicates that the property is expandable. Click the cross to see the following:
As you can see, you can change a lot of Font properties from here: the Name of the font, its Size, whether is should be Bold or not, etc. You can also click the square box with the three dots in it. This brings up a dialogue box where you can change the font properties in the same place.
Make the following changes to the three labels:
When you're finished, you should have a form that looks a little more like a real programme. Time now to save your work.
Changing the colour of the Form means we have to change one of its properties - the BackColor property.
So click anywhere on the form that is not a textbox or a label. If you do it right, you should see the sizing handles around the edges of the grey form. The Property Box on the right will read "Form1", and that indicates that you have indeed selected the form. When the Form is selected you can change its properties.
To change the colour of the Form, click the word "BackColor" in the Property Box. Next, click the black down-pointing arrow to the right. A drop-down box will appear.
As you can see in the image above, you can choose the colour of the Active Caption. The Active Caption is the one you set earlier when you changed the text to "My First Form". The Active Caption is blue on my computer, and the Active Caption Text is white. It might be different on yours.
If you want to choose a colour that is not a System colour, click the Custom Tab. You'll then see this:
You can also select the Web Tab. When you do, you'll see a list of Web-Safe colours to choose from. A Web-Safe colour is one that displays correctly in a web browser, regardless of which computer being used (that's the theory, anyway). You might want to use a Web-Safe colour if you're designing a project for the internet. But you can choose one even if you're not.
Change the colour of the other two labels to anything you like. To change the colour of more than one Label at a time, click on one Label to select it. Now, hold down the "Ctrl" key on your keyboard and click another Label. You'll see that two Labels now have sizing handles around them. Click the third Label with the "Ctrl" key held down, and all three Labels will be selected. You can change the BackColor property of all three at once.
If you want to change the Font size of the Labels and Textboxes, select a control. Let's start with Label1.
- So click on Label 1
- Scroll down the Property Box until you see Font
- Click on the word "Font" to highlight it
- MS Sans Serif is the default Font
Make the following changes to the three labels:
Font: Arial
Font Style: Bold
Font Size: 10
Change the Font of the three Textboxes so that they are the same as the Labels.Font Style: Bold
Font Size: 10
When you're finished, you should have a form that looks a little more like a real programme. Time now to save your work.
How to Save your VB .NET Projects
If you have a look in the top right of the Design Environment, you'll see the Solution Explorer. (If you can't see it, click View > Solution Explorer in version 2008 and View > Other Windows > Solution Explorer in version 2010.)
The Solution Explorer shows you all the files you have in your project (Notice that the name of your project is at the top of the tree - "My First Project"). The Solution Explorer in version 2012 and 2013 is slightly different. It looks like this:
At first glance, it looks as though there are not many files in the project. But click the Show All Files icon, circled below:
When you click Show All Files, the Solution Explorer will look something like this:
When you save your project, you are saving all these files.
To save your work, click File > Save All and you'll see the following dialogue box (you won't see a Save Project dialogue box in version 2012/13 - it just saves your files):
The files are usually saved in the My Document folder in XP (Document folder in Vista and Windows 7/8), under Visual Studio. If you want to save your projects elsewhere, click the Browse button.
To actually save your work as you go along, just click File > Save All from the menu bar. Or press Ctrl + Shift + S on your keyboard. Or click the icon in the Toolbar (the stack of floppy disks). If you save often then you won't lose any of your work if anything goes wrong with your computer.
Time to get our hands dirty with a bit of programming. There's no putting it off any longer, I'm afraid! We'll create a new project for the next section.
So, if you already have you VB NET software open, you can get rid of the current project by clicking File from the menu bar. From the drop down menu, choose Close Project (Close Solution in Visual Studio 2012/13). You will be returned to the Start Page. Click File > New Project from the menu bars. When you get the dialogue box popping up, choose Windows Forms Applicationat the top. Then change the Name from WindowsApplication to Variables:
When you click the OK button, a new form will appear.
If you look at the Solution Explorer at the top, you'll see the name of the project has changed to the Name you gave it.
The name of the Project is now Variables - the same name as the folder that is created for you to hold all your project files.
Now that you have a new Project started, we can discuss Variables.
To save your work, click File > Save All and you'll see the following dialogue box (you won't see a Save Project dialogue box in version 2012/13 - it just saves your files):
To actually save your work as you go along, just click File > Save All from the menu bar. Or press Ctrl + Shift + S on your keyboard. Or click the icon in the Toolbar (the stack of floppy disks). If you save often then you won't lose any of your work if anything goes wrong with your computer.
Creating a New Project
So, if you already have you VB NET software open, you can get rid of the current project by clicking File from the menu bar. From the drop down menu, choose Close Project (Close Solution in Visual Studio 2012/13). You will be returned to the Start Page. Click File > New Project from the menu bars. When you get the dialogue box popping up, choose Windows Forms Applicationat the top. Then change the Name from WindowsApplication to Variables:
When you click the OK button, a new form will appear.
If you look at the Solution Explorer at the top, you'll see the name of the project has changed to the Name you gave it.
Now that you have a new Project started, we can discuss Variables.
Comments
Post a Comment