Introduction to Visual Basic .

NET IDE

Visual Basic was initially introduced in 1991 as the first programming language that directly
supported programmable graphical user interfaces using language-supplied objects. From that
time until 2002, there were five other versions released, each version having features that
increased the power of the language. In 2001, Microsoft released the .NET (pronounced “dot
net”) platform. Visual Basic .NET, or VB.NET, is an upgrade to the last version of VB (version
6.0) that conforms to the .NET platform. As you will see in subsequent chapters, the changes
in VB.NET allow programmers to write Web or desk-top applications within the same
language. In addition, VB.NET is fully object-oriented as opposed to prior versions that had
many, but not all, of the elements of an object-oriented language. This book is based on
VB.NET. In the balance of the book we will sometimes refer to Visual Basic as VB, omitting
.NET. From a programming viewpoint, Visual Basic is an object-oriented language that
consists of two fundamental parts: a visual part and a language part. The visual part of the
language consists of a set of objects, while the language part consists of a high-level procedural
programming language. These two elements of the language are used together to create
applications. An application is simply a Visual Basic program that can be run under the
Windows operating system. The term application is preferred to the term program for two
reasons: one, it is the term selected by Microsoft to designate any program that can be run
under its Windows Operating System (all versions) and two, it is used to avoid confusion with
older procedural programs that consisted entirely of only a language element. Thus, for our
purposes we can express the elements of a Visual Basic application as: Visual Basic
Application = Object-Based Visual Part + Procedural-Based Language Part Thus, learning to
create Visual Basic applications requires being very familiar with both elements, visual and
language.

Installations of IDE

Installing Visual Studio 2017

The installer for Visual Studio 2017 is what Microsoft calls a “low-impact installer.” The idea
arose as Microsoft compared the footprint used by Visual Studio 2015 with the kinds of
experiences that users were not only requesting, but also using. As surprising as it might seem,
not every developer needs to have Visual Studio support for Windows Forms, ASP.NET, WPF,
Universal Apps, and C++ out of the box.
In Visual Studio 2017, the installation process takes a different point of view. Instead of
automatically installing “everything,” you get to pick and choose the different components that
you want to install. Yes, you had a little bit of that in the past, but now the number of options
that you have is greatly increased. However, more options doesn’t necessarily mean a better
installation experience. In fact, it’s probably the opposite, as you try to figure out which of a
hundred different options you need to install to work on your project. To address that challenge,
the Visual Studio 2017 installer uses the concept of workloads. When you launch the Visual
Studio 2017 installation process (an application of only a couple of megabytes in size), you’ll
see the dialog in Figure 1-1 appear relatively quickly. Naturally, this is after you have read (in
great detail, of course) and accepted the licensing information and privacy statements.

This is the main hub for the installer and the location where the desired components are
specified. There are two modes for identifying the components. In Figure 1-1, you are looking
at the workloads. The workloads have been divided into five different categories. To include a
workload in the installation, simply click on it, showing a blue checkbox in the top right corner.
You can add any number of the workloads as part of the installation. The available workloads
are:

➤ Universal Windows Platform development: Used if you are creating applications for the
Universal Windows Platform, regardless of your language of choice.

➤ .NET desktop development: Allows you to create applications, using either WPF or
Windows Forms. This is also where you find the Console application template.
➤ Desktop development with C++: Used to build classic Windows-based applications. This
option is appropriate if you expect to be using Visual C++, the Active Template Library (ATL),
or Microsoft Foundation Classes (MFC).

➤ ASP.NET and web development: Adds the components used to build web applications,
including ASP.NET, ASP.NET Core, and plain old HTML/Javascript/CSS.

➤ Azure development: Includes the Azure SDK, tools, and project templates that allow you to
create Azure-based cloud applications.

➤ Python development: Includes support for cookiecutter, Python 3, and tools that are used to
interact with Azure. And, optionally, you can include other distributions of Python, such as
Anaconda.

➤ Node.js development: One of the new tools supported by Visual Studio 2017, this workload
includes the components that allow you to create network applications using the Node.js
platform.

➤ Data storage and processing: Some recent additions to the Azure platform include Azure
Data Lake, Hadoop, and Azure ML (Machine Learning). This workload includes the templates
and tools to develop applications for this platform, along with the Azure SQL Server database.

➤ Data science and analytical applications: Brings together three languages that are also found
in other workloads: R, Python, and F#. These tools can be used to build a wide variety of
analytics-based applications.

➤ Office/SharePoint development: Used to create a wide variety of Office and SharePoint

applications, including Office add-ins, SharePoint solutions, and Visual Studio Tools for Office
(VSTO) add-ins.

➤ Mobile development with .NET: One of the three technologies that Visual Studio 2017
supports for mobile development, this workload allows you to create iOS, Android, or
Windows applications using Xamarin.

➤ Mobile development with JavaScript: Similar concept to the previous entry, but instead of
using Xamarin, your applications are developed using Tools for Apache Cordova and
JavaScript.
➤ Mobile development with C++: And the last of the three mobile development environments
allows you to create iOS, Android, and Windows applications using C++.

➤ Game development with Unity: Unity is a broadly used and very flexible cross-platform
game development environment. This workload allows you to create 2D and 3D games using
the Unity framework.

➤ Game development with C++: Supports the creation of games using C++ along with
libraries like DirectX, Unreal, or Cocos2d.

➤ Visual Studio extension development: Lets you create add-ons and extensions for use in
Visual Studio. Included in this are code analyzers and tool windows that take advantage of the
Roslyn compiler functionality.

➤ Linux development with C++: Windows 10 includes an option to install an Ubuntu-based

Linux Bash shell. This workload includes the set of tools and libraries that allow you to create
applications that run in Linux using Visual Studio.

➤ .NET Core cross-platform development: .NET Core is a popular approach to cross-platform

development. This workload allows you to create .NET Core applications, including web
applications.
The second mode for choosing components is more granular. If you select the Individual
Components link at the top of the installation screen, the list of components shown in Figure
appears. From here you can select any or all of the individual components that you want to
install on your machine.

The third installation option you have for Visual Studio is to include one or more of the
supported language packs. Clicking on the Language Packs link displays the list of language
packs that are available Once you have selected your components (either individually or as part
of a workload), choose the installation location and click on Install. Now comes the longer part
of the process. You’ll see the progress dialog, an example of which is shown in Figure.
Depending on which components you already have installed on your computer, you might be
prompted to restart your computer midway through or at the end of the installation process.
When all the components have been successfully installed, the original dialog changes slightly
This final dialog is also the starting point for adding features to Visual Studio in the future
THE VISUAL STUDIO IDE

The first time you launch Visual Studio, you will most likely see a dialog indicating that Visual
Studio is configuring the development environment. When this process is complete, Visual
Studio 2017 opens, ready for you to start working, as shown in Figure

The bulk of the page contains links to the most common functions that you’re likely to perform.
For example, there is a list of Recent projects, along with links that allow you to open existing
projects or create a new project. And in the latter case, the most commonly used templates are
prominently on display. The previous version of the Start page included a news feed of interest
to developers, and that feed is still present in Visual Studio 2017. And in the top left, there is
also a Get Started section with links to information that is useful to new users of Visual Studio

Creating First Applications:

Start by selecting File ➪ New ➪ Project. This opens the New Project dialog, as shown in
Figure. There is a tree on the left side of the dialog for grouping templates based on language
and technology. And there is also a search box in the top-right corner. The right pane of this
dialog displays additional information about the project template you have selected. Lastly,
you can select the version of the .NET Framework that the application will target using the
drop-down at the top of the dialog

Select WPF Application from the Templates area (this item exists under the root Visual Basic
and Visual Basic or under the sub node Windows) and set the Name to Getting Started before
selecting OK. This creates a new WPF application project, which includes a single startup
window and is contained within a solution, as shown in the Solution Explorer window of
Figure. This startup window has automatically opened in the visual designer, giving you an
approximate graphical representation of what the window will look like when you run the
application. The Properties tool window is collapsed and sits on the right side of the windows
The Visual Element

From a user’s standpoint, the visual part of an application is provided within a window. This
is the graphical interface that allows the user to see the input and output provided by the
application. This user interface is referred to as the graphical user interface (GUI). From a
programmer’s perspective the GUI is constructed by placing a set of visual objects on a blank
window, or form, when the program is being developed. For example, consider Figure 1, which
shows how a particular application would look to the user. From a programmer’s viewpoint,
the application shown in Figure 1 is based on the design form shown in Figure 2. The points
displayed on the form are a design grid used to arrange objects on the form and are only
displayed during design time.

Figure 1
 Figure 2

The programmer can place various objects on this form, which is itself a Visual Basic object.
When an application is run, the form becomes a window that provides the background for the
various objects placed on the form by the programmer. The objects on the window become the
controls used to direct program events. Let’s take a moment to look at the objects provided in
the Visual Basic Toolbox. The standard object Toolbox, which is illustrated in Figure 3,
contains the objects we will use in constructing each graphical user interface.
A majority of applications can be constructed using a minimal set of objects provided by the
standard object Toolbox. This minimal set consists of the Label, TextBox, and Button objects.
The next set of objects that are more frequently found in applications include the CheckBox,
RadioButton, ListBox, and ComboBox. Finally, the Timer and PictureBox can be used for
constructing interesting moving images across the window. lists these object types and
describes what each object is used for. The remaining sections of the text will describe the use
of objects in the toolbox, with special emphasis on the four objects (Label, TextBox, Button,
and ListBox) that you will use in almost every application that you develop.

• Click the collapsed Toolbox window, which appears on the left side of the screen. This
causes the Toolbox to expand. Then click on the pin icon, which keeps the tool window
open. To add controls to the window in the Getting Started project, select the
appropriate items from the Toolbox and drag them onto the form. Alternatively, you
can double-click the item, and Visual Studio automatically adds them to the window.

• Add a Label to the form so that the layout looks similar to the one shown in Figure
Select the label, and select the Properties tool window. (You can press F4 to
automatically open the Properties tool window.) Change the text properties of the
control (found at the top of the Properties tool window) to txt Hello World.
• Click on file and select the save as menu and save your file in the folder and to run this
applications press f5 or click on run button available in the menu bar
Window layout:

The toolbars in Visual Studio that are visible by default, as well as the buttons contained within
them, have been decreasing in number over the different versions. The simplification was based
on a lot of user feedback (gathered through both questioning and metering) that identified the
buttons that were most commonly used in the previous toolbars. The buttons that, for whatever
reason, didn’t make the cut can always be added manually. They are just not part of the default
set. And the icons that remain are, for the most part, the ones most frequently used. As you
open different items from the Solution Explorer, you can see that the number of toolbars across
the top of the screen varies depending on the type of file being opened. Each toolbar (and,
indeed, each button) has a built-in association to specific file extensions so that Visual Studio
knows to display the toolbar (or enable/disable a button) when a file with one of those
extensions is opened. If you close a toolbar when a file is open that has a matching file
extension, Visual Studio remembers this when future files with the same extension are opened.
Viewing Windows and Toolbars:

All the toolbars available in Visual Studio 2017 are listed under the View ➪ Toolbars menu
item. This includes toolbars from third-party extensions that you have installed. Each toolbar
currently visible is marked with a check beside the appropriate menu item. You can also access
the list of toolbars by right-clicking in any empty space in the toolbar area at the top of the
Visual Studio window. When a toolbar is visible, you can customize which buttons are
displayed, either via View ➪ Toolbars ➪ Customize or Tools ➪ Customize. Alternatively, as
shown in Figure , if you select the down arrow at the end of a toolbar, you see a list of all the
buttons available on that toolbar, from which you can check the buttons you want to appear on
the toolbar

Docking and Undocking:

Each tool window has a default position, which it resumes when it is opened from the View
menu. For example, by default View ➪ Toolbox opens the Toolbox docked to the left edge of
Visual Studio. When a tool window is opened and is docked against an edge, it has two states,
pinned and unpinned. As you can toggle between these states by clicking the vertical pin to
unpin the tool window or the horizontal pin to pin the tool window.

As you unpin a tool window, it disappears back against the edge of the IDE, leaving visible a
tag displaying the title of the tool window. To redisplay the tool window, the default behavior
requires that you click the visible tag. If you would prefer the window to appear when the
mouse hovers over the tag, go into the Options dialog and locate the Environment ➪ Tabs and
Windows node. At the bottom, there is an option named Show Auto-Hidden Windows on
Mouse Over. If you check this, then as you move your mouse over the tab, the hidden window
becomes visible. Most developers accept the default location of tool windows, but occasionally
you may want to adjust where the tool windows appear. Visual Studio has a sophisticated
system for controlling the layout of tool windows. We know how you could use the drop-down,
next to the Pin and Close buttons at the top of the tool window, to make the tool window
floating, dockable, or even part of the main editor space (using the Tabbed Document option)

When a tool window is dockable, you have a lot of control over where it is positioned. In Figure
you can see the Properties window, which has been dragged away from its default position at
the right of the IDE. To begin dragging, you need to click either the title area at the top of the
tool window or the tab at the bottom of the tool window and drag the mouse in the direction
you want the window to move. If you click in the title area, you see that all tool windows in
that section of the IDE will also be moved. Clicking the tab results in only the corresponding
tool window moving.
When a tool window is dockable, you have a lot of control over where it is positioned. In Figure
you can see the Properties window, which has been dragged away from its default position at
the right of the IDE. To begin dragging, you need to click either the title area at the top of the
tool window or the tab at the bottom of the tool window and drag the mouse in the direction
you want the window to move. If you click in the title area, you see that all tool windows in
that section of the IDE will also be moved. Clicking the tab results in only the corresponding
tool window moving.

Alternatively, if the Properties window is dragged over the Toolbox window as shown in Figure
the center image moves over the existing tool window. This indicates that the Properties
window will be positioned within the existing tool window area. As you drag the window over
the different quadrants, you can see that the blue shading again indicates where the tool window
will be positioned when the mouse is released. Figure indicates that the Properties window
appears below the Toolbox window.
Manoeuvring the toolbar auto-hide:
The library provides "Auto Hide Window" feature, that allows to display more information
using less screen space by hiding or showing windows on your application's desktop. This
technology is similar to Visual Studio and Microsoft Visio application environments. Your
workspace area is fully manageable!

• When you press the pin button of auto hide window, it will hide away. Being
mouse overed, it slides out and becomes visible.
• If you want your auto hide window to stay visible after it has slide out, just press
the pin button.
• "Auto hide all" feature. If you have several docked control bars in a container and
press the pin button while holding Ctrl key, all control bars residing in this
container will be switched to auto hide mode.
• You can enable or disable animation when docking control bars are being
switched to/from auto hide mode.
• There is an ability to control animation speed for auto hide bars.
❖ User clicks "Auto Hide" button on the control bar caption and bar collapses to
the side bar:
 ❖ Hold mouse pointer on the "Properties" side button and "Properties" control bar
is appear:

Placing and Resizing the Window form

When a form is created, the size and location is initially set to a default value. The default size
of a form is generally a width and height of 800x500 pixels. The initial location, when the form
is displayed, depends on a few different settings. You can change the size of a form at design
time with Visual Studio, and at run time with code.

After adding a new form to the project, the size of a form is set in two different ways. First,
you can set it is with the size grips in the designer. By dragging either the right edge, bottom
edge, or the corner, you can resize the form.
The second way you can resize the form while the designer is open, is through the properties
pane. Select the form, then find the Properties pane in Visual Studio. Scroll down to size and
expand it. You can set the Width and Height manually.
Resize in code

Even though the designer sets the starting size of a form, you can resize it through code. Using
code to resize a form is useful when something about your application determines that the
default size of the form is insufficient. To resize a form, change the Size, which represents the
width and height of the form.

Resize the current form

You can change the size of the current form as long as the code is running within the context
of the form. For example, if you have Form1 with a button on it, that when clicked invokes
the Click event handler to resize the form:

You can change the size of another form after it's created by using the variable referencing the
form. For example, let's say you have two forms, Form1 (the startup form in this example) and
Form2. Form1 has a button that when clicked, invokes the Click event. The handler of this
event creates a new instance of the Form2 form, sets the size, and then displays it:

When a form instance is created and displayed, the initial location of the form is determined
by the StartPosition property. The Location property holds the current location the form. Both
properties can be set through the designer.
The solution explorer
The Solution Explorer window provides a hierarchical view of your solutions, projects, and
files. You can open the Solution Explorer window by selecting the Solution Explorer command
from the View menu. Solution Explorer is a window within the VS.NET editor, which allows
you to manage various files part of the solution (web site). The solution explorer windows
displays all the files part of the web site. You may select any file and view properties, rename,
delete or move to other folders through the solution explorer. By default, Solution Explorer is
located on the top right corner of the VS.NET editor. The solution explorer windows may be
minimized on the top right bar. If for some reason, you cannot view the solution explorer, go
to the menu and select "View > Solution Explorer". This will launch the solution explorer
window.

The Solution Explorer tool window (Ctrl+Alt+L) provides a convenient visual representation
of the solution, projects, and items, as shown in Figure
The solution explorer shows the list of files associated with the project. You may double click
on any file to open it in the editor.

The first icon in the above image allows you to view the source code (code behind file) of an
aspx page. The second icon allows you to view the aspx page itself.

See the 5th icon. This allows you to view all files which are in the same directory as the web
project but not included in the project. Click on this to view the files in the same folder which
are not included in the project. Probably you may not have any files to see. Add some files
manually to the project folder and then click on this icon. It will show you the files you copied
manually.

In the Solution view in Visual Studio 2017, expanding any source code node reveals the
properties and methods for a given class. And the context menu for the node contains options
targeting the selected item. When you right-click a class (not the code file, but the actual class),
the context menu includes Base Types, Derived Types, and Is Used By options. These options
change the scope of the Solution Explorer to the base class, the derived classes, and the classes
used by the selected class, respectively. As you continue navigating into the properties and
methods, the context menu includes Calls, Is Called By, and Is Used By. These options scope
the Solution Explorer to the classes that call this class, classes that are called by this class, and
classes that are used by this class, respectively.

Toolbox:

One of the major advantages over many other IDEs that Microsoft has offered developers is
true drag-and-drop placement of elements during the design of both web and rich client
applications. These elements are available in the Toolbox (Ctrl+Alt+X), a tool window
accessible via the View menu. The Toolbox window contains all the available components for
the currently active document being shown in the main workspace. These can be visual
components, such as buttons and textboxes; invisible, service-oriented objects, such as timers
and system event logs; or even designer elements, such as class and interface objects used in
the Class Designer view

The Toolbox window displays controls that you can add to Visual Studio projects. To open
Toolbox, choose View > Toolbox from the menu bar, or press Ctrl+Alt+X.

By default, Toolbox is collapsed along the left side of the Visual Studio IDE and appears when
the cursor is moved over it. You can pin Toolbox (by clicking the Pin icon on its toolbar) so
that it remains open when you move the cursor. You can also undock the Toolbox window and
drag it anywhere on your screen. You can dock, undock, and hide Toolbox by right-clicking
its toolbar and selecting one of the options.

Click and drag the desired component onto the design surface of the active document, or
double-click the component’s entry for Visual Studio to automatically add an instance. Visual
components, such as buttons and textboxes, appear in the design area where they can be
repositioned, resized, and otherwise adjusted via the property grid. Nonvisual components,
such as the Timer control, appear as icons with associated labels in a nonvisual area below the
design area, as shown

Visual Studio includes a search function for the Toolbox. At the top of the Toolbox there is a
Search area. As you type characters into this area, the components in the Toolbox are filtered
to match. The search is implemented so that it finds the characters that have been typed any
place they exist in the name of the control. Because the search is performed across all the
groups, this is a convenient way to locate controls, provided that you know all or part of the
name
Properties Window:

This window (also known as the Properties Browser) displays all the properties of the selected
component and its settings. Every time you place a control on a form, you switch to this window
to adjust the appearance of the control. You have already seen how to manipulate the properties
of a control through the Properties window Many properties are set to a single value, such as a
number or a string. If the possible settings of a property are relatively few, they’re displayed
as meaningful constants in a drop-down list. Other properties are set through a more elaborate
interface. Color properties, for example, are set from within a Color dialog box that’s displayed
right in the Properties window. Font properties are set through the usual Font dialog box.
Collections are set in a Collection Editor dialog box, in which you can enter one string for each
item of the collection, as you did for the items of the ComboBox control.

If the Properties window is hidden, or if you have closed it, you can either choose View >
Properties Window, or right-click a control on the form and choose Properties. Or you can
simply press F4 to bring up this window. There will be times when a control might totally
overlap another control, and you won’t be able to select the hidden control and view its
properties. In this case, you can select the desired control in the ComboBox at the top of the
Properties window. This box contains the names of all the controls on the form, and you can
select a control on the form by selecting its name on this box.
The Properties window is capable of grouping properties or sorting them alphabetically — you
can toggle this layout using the first two buttons at the top of the Properties window. It has
built-in editors for a range of system types, such as colors, fonts, anchors, and docking, which
are invoked when you click into the value column of the property to be changed

In addition to displaying properties for a selected item, the Properties window also provides a
design experience for wiring up event handlers. The Properties window on the left side of
Figure illustrates the event view that is accessible via the lightning bolt button at the top of the
Properties window. In this case, you can see that there is an event handler for the click event.
To wire up another event, you can either select from a list of existing methods via a drop-down
list in the value column, or you can double-click the value column. This creates a new event-
handler method and wires it up to the event. If you use the first method you notice that only
methods that match the event signature are listed.