CSS 1021
Software Construction and Development
BS(SE) 2019
Department of CS and SE
Lab Session 1: Introduction to Visual Studio IDE
Visual Studio
Microsoft Visual Studio is an integrated development environment (IDE) from Microsoft. It can be used
to develop console and graphical user interface applications along with Windows Forms applications,
web sites, web applications, and web services in both native codes together with managed code for all
platforms supported by Microsoft Windows, Windows Phone, Windows CE, .NET Framework, .NET
Compact Framework and Microsoft Silverlight.
Integrated Development Environment (IDE)
The Visual Studio product family shares a single integrated development environment (IDE) that is
composed of several elements: the Menu bar, Standard toolbar, various tool windows docked or auto‐
hidden on the left, bottom, and right sides, as well as the editor space. The tool windows, menus, and
toolbars available depend on the type of project or file you are working in.
Below we see the integrated development environment (IDE) in Visual Studio:
.NET Framework
Net Framework is a software development platform developed by Microsoft for building and running
Windows applications. The .Net framework consists of developer tools, programming languages, and
libraries to build desktop and web applications. It is also used to build websites, web services, and games.
It includes a large library and supports several programming languages as Visual Basic and C# which
CSS 1021
Software Construction and Development
BS(SE) 2019
Department of CS and SE
allow language interoperability (each language can use code written in other languages). The .NET
library is available to all the programming languages that .NET supports. Programs written for the .NET
Framework execute in a software environment, known as the Common Language Runtime (CLR), an
application virtual machine that provides important services such as security, memory management, and
exception handling. The class library and the CLR together constitute the .NET Framework.
C#
C# is pronounced “see sharp”. C# is an object‐oriented programming language and part of the .NET
family from Microsoft. C# is very similar to C++ and Java. C# is developed by Microsoft and works only
on the Windows platform.
The Visual Studio 2017 IDE
When you launch Microsoft Visual Studio 2017, you will be presented with the Start Page of Microsoft
VS 2017, as shown in Figure below.
The Visual Studio 2017 start page comprises a few sections, the Get Started section, the Recent section,
the Open section, the New project section and the Developers News section. In the start page, you can
either start a new project, open a project or open a recent project. Besides that, you can also check for the
latest news in Visual Studio 2017 for Windows Desktop. The Start Page also consists of a menu bar and
a toolbar where you can perform various tasks by clicking the menu items.
Creating a New Project in Visual Studio 2017
To start a new Visual Studio 2017 project, click on New Project under the Start section to launch the
Visual Studio 2017 New Project page as shown in Figure below. You can also choose to open a recent
project:
CSS 1021
Software Construction and Development
BS(SE) 2019
Department of CS and SE
In this window you will select an appropriate template based on what kind of application you want to
create, and a name and location for your project and solution.
The most common applications are:
Windows Form Application
Console Application
WPF Application
[Link] Web Application
Silverlight Application
IDE Basics
The following image shows the Visual Studio IDE with an open project, and the Solution Explorer
window for navigating in the project files, and the Team Explorer window for navigating source control
and work item tracking. The features in the title bar that are called out are explained below in more detail.
CSS 1021
Software Construction and Development
BS(SE) 2019
Department of CS and SE
Connecting to Visual Studio Team Services and Team Foundation Server
Visual Studio Team Services (VSTS) is a cloud-based service for hosting software projects and enabling
collaboration in teams. VSTS supports both Git and Team Foundation Source Control systems, as well as
Scrum, CMMI and Agile development methodologies. Team Foundation Version Control (TFVC) uses a
single, centralized server repository to track and version files. Local changes are always checked in to the
central server where other developers can get the latest changes. Team Foundation Server (TFS) 2015 is
the application lifecycle management hub for Visual Studio. It enables everyone involved with the
development process to participate using a single solution. TFS is useful for managing heterogeneous
teams and projects, too.
If you have a Visual Studio Team Services account or a Team Foundation Server on your network, you
connect to it through the Team Explorer window. From this window you can check code into or out of
source control, manage work items, start builds, and access team rooms and workspaces. You can open
CSS 1021
Software Construction and Development
BS(SE) 2019
Department of CS and SE
Team Explorer from Quick Launch or on the main menu from View | Team Explorer or from Team |
Manage Connections.
Solution Explorer
Solutions and projects contain items that represent the references, data connections, folders, and files that
you need to create your application. A solution container can contain multiple projects and a project
container typically contains multiple items.
Toolbox
The Toolbox is not shown until you click on the Toolbox tab. When you click on the Toolbox tab or use
the shortcut keys Ctrl+Alt+x, the common controls Toolbox will appear, as shown in Figure below. You
can drag and move your toolbox around and dock it to the right, left, top or bottom of the IDE.
CSS 1021
Software Construction and Development
BS(SE) 2019
Department of CS and SE
Designing the user interface
A designer is an intuitive tool that enables you to create a user interface without writing code. You can
drag UI controls such as list boxes, calendars, and buttons from the Toolbox window onto a design
surface that represents the window or dialog box. You can resize and rearrange the elements without
writing any code. Designers are included for any project type that has a user interface.
CSS 1021
Software Construction and Development
BS(SE) 2019
Department of CS and SE
Properties window
Each control we have on our user interface has lots of Properties we can set. The Properties window is
used to display properties for objects selected in the two main types of windows available in the Visual
Studio integrated development environment (IDE). These two types of windows are:
Tool windows such as Solution Explorer, Class View, and Object browser
Document windows containing such editors and designers as the forms designer, XML editor,
and HTML editor
Writing, navigating and understanding code
If you are a developer, the editor window is where you will probably spend most of your time. Visual
Studio includes editors for C#, C++, Visual Basic, JavaScript, XML, HTML, CSS, and F#, and third
parties offer plug-in editors (and compilers) for many other languages.
The text editor is highly interactive (if you want it to be) with many productivity features that help you
write better code faster. The features vary by language, and you don’t have to use any of them (Type
"Editor" in Quick Launch) to turn features on or off: Some of the common productivity features are:
Refactoring includes operations such as intelligent renaming of variables, moving selected lines
of code into a separate function, moving code to other locations, redordering function parameters,
and more.
IntelliSense is a code-completion aid that includes a number of features: List Members,
Parameter Info, Quick Info, and Complete Word. These features help you to learn more about the
code you're using, keep track of the parameters you're typing, and add calls to properties and
methods with only a few keystrokes.
CSS 1021
Software Construction and Development
BS(SE) 2019
Department of CS and SE
Squiggles alert you to errors or potential problems in your code in real time as you type, which
enables you to fix them immediately without waiting for the error to be discovered during
compilation or run time. If you hover over the squiggle, you see additional information about the
error. A light bulb may also appear in the left margin with suggestions for how to fix the error.
Bookmarks enable you to navigate quickly to specific lines in files that you are actively working
on.
The Call Hierarchy window can be invoked in the text editor context menu to show the methods
that call, and are called by, the method under the caret.
Code Lens enables you to find references and changes to your code, linked bugs, work items,
code reviews, and unit tests, all without leaving the editor. For more information, see Find code
changes and other history.
The Peek to Definition window shows a method or type definition inline, without navigating
away from your current context. This window now works for XAML, too.
The Go To Definition context menu option takes you directly to the place where the function or
object is defined. Other navigation commands are also available by right-clicking in the editor.
A related tool, the Object Browser, enables you to inspect .NET or Windows Runtime assemblies
on your system to see what types they contain and what methods and properties those types
contain.
CSS 1021
Software Construction and Development
BS(SE) 2019
Department of CS and SE
Compiling and building your code
To build a project means to compile the source code and perform whatever steps are necessary to produce
the executable. Different languages have different build operations, and regular websites don't build at all.
Regardless of the project type, the Build menu is the standard location for these commands. To compile
and run your code with a single keystroke, press F5. Every compiler is completely configurable through
the IDE. The Build toolbar enables you to specify whether to build a debug version of your program, with
symbols and extra error checking enabled to support breakpoints and single stepping in the debugger, or a
release build, which is what you will ultimately give to customers. You can configure more build settings
and many other settings on the property page for a project. Right-click on the project node in Solution
Explorer and choose Properties. You can also run builds from the command line.
The output from the build, including an error or success messages, appear in the Output Window. The
Error List window (shown below) gives detailed information on build errors.
Build and Debug Tools
In Visual Studio we have lots of Build and Debugging Tools.
The most used tool is “Build Solution” (Shortcut Key: F6).
CSS 1021
Software Construction and Development
BS(SE) 2019
Department of CS and SE
The most used tool is “Start Debugging” (Shortcut Key: F5).
Testing your code
Visual Studio includes a unit test framework for managed code (.NET) and one for native C++. To create
unit tests, simply add a Test Project to your solution, write your tests, and then run them from the Test
Explorer window.
CSS 1021
Software Construction and Development
BS(SE) 2019
Department of CS and SE
Analyzing code quality and performance
Visual Studio includes powerful tools for static and runtime analysis. The static analysis tools help you
identify potential errors in design, globalization, interoperability, performance, security, and other
categories. Performance testing, or profiling, involves measuring how your program runs. You access
these tools from the Analyze menu.
Connecting to cloud services and databases
The Server Explorer window in Visual Studio shows the resources in all the accounts managed under
your personalization account (the one you logged in with), including SQL Server instances, Azure,
[Link], Office 365, and websites.
Visual Studio includes Microsoft SQL Server Data Tools (SSDT), which enable you to build, debug,
maintain, and refactor databases. You can work with a database project, or directly with a connected
database instance on- or off-premises.
The SQL Server Object Explorer in Visual Studio offers a view of your database objects similar to SQL
Server Management Studio. SQL Server Object Explorer allows you to do light-duty database
administration and design work, including editing table data, comparing schemas, and executing queries
by using contextual menus right from the SQL Server Object Explorer. SSDT also includes special
project types and tools for developing SQL Server 2012 Analysis Services, Reporting Services, and
Integration Services Business Intelligence (BI) solutions (formerly known as Business Intelligence
Development Studio).
CSS 1021
Software Construction and Development
BS(SE) 2019
Department of CS and SE
Deploying your finished application
When your application is ready to deploy to customers, Visual Studio provides the tools to do that,
whether you’re deploying to the Windows Store, to a SharePoint site, or with InstallShield or Windows
Installer technologies. It's all accessible via the IDE.
Architecture and modeling tools (Enterprise only)
You can use Visual Studio architecture and modeling tools to design and model your app. These tools
help you to visualize the code's structure, behavior, and relationships. You can create models at different
levels of detail throughout the application lifecycle as part of your development process. You can track
requirements, tasks, test cases, bugs, and other work associated with your models by linking model
elements to Team Foundation Server work items and your development plan.
Creating a Basic Windows Forms Application
1. To create a Windows Forms Application project, on the menu bar, select File, New, Project.
CSS 1021
Software Construction and Development
BS(SE) 2019
Department of CS and SE
2. Select Visual C# in the Installed Templates list. In the templates list, choose the Windows Forms
Application icon. Name the new project BasicApp, and then click the OK button. Visual Studio
creates a solution for your project. The following screenshot shows what you should see:
3. Change the title of the Windows Form by clicking on the form to select it. In
the Properties window, select the text “Form1,” and type Basic App, press Enter. You observe
that the text at the top of your Windows Form has changed to Basic App.
CSS 1021
Software Construction and Development
BS(SE) 2019
Department of CS and SE
4. Add a button. From the Toolbox, in the Common Controls category, drag a Button control to
the Windows Form. Change the Text property to GO instead of button1.
5. Add a label. From the Toolbox, in the Common Controls category, drag a Label control to the
Windows Form. Change the Text property to What is your name? instead of label1.
6. Add a text box. From the Toolbox, in the Common Controls category, drag a TextBox control
to the Windows Form.
7. Add an event handler for the Button control. Double-click the button, and you will observe the
code for your project:
CSS 1021
Software Construction and Development
BS(SE) 2019
Department of CS and SE
8. This is the event handler for the button click event when the user clicks the button:
private void button1_Click(object sender, EventArgs e) { }
9. Add the following code to the event handler method:
private void button1_Click(object sender, EventArgs e)
{
[Link] = "I see, your name is " + [Link] + ".";
}
10. Build and run the program. Press F5 (or Control-F5) to build and run the program. The Windows
Form is displayed on the screen. Click the GO button. It then displays the following:
Exercises
1. Explore Microsoft Visual Studio IDE with its features.
2. Create a form that displays a button with a text 'Click me' and after clicking, change the text of the
button to 'Hello'.
3. Create a form named GradeWithMethod that lets you to do the following:
a. Enter a score (0–100) into a TextBox named txtScore, and compute the letter grade by
clicking a button.
b. Use the scale 90, 80, 70 for A, B and C, respectively.
