Introduction to the Visual Studio
.NET IDE
1
Powerpoint slides modified from
Deitel & Deitel
Visual Studio .NET Integrated
Development Environment (IDE)

The Start Page
Helpful links appear on left side
 The Getting Started screen

• Links to recent projects
• The Open Project and New Project
buttons
2
Overview
New Project
Start Page
button
tab
Collapsed
Toolbox
Window
Recent
Projects
listed
here
Solution
Explorer
- empty
no open
projects
Start Page
links
3
Start Page in Visual Studio .NET.
Visual Studio .NET IDE

New project dialogue

C# .NET project
• Group of related files, images, and documentation

C# .NET solution
• Group of projects creating one or a group of
applications

Windows Applications
• Anything that runs in the Windows OS
4
Visual Studio .NET IDE Overview
description of
selected project
Visual C#
projects folder
Visual C#
Windows
Application
(selected)
project name
5
Fig. 2.3
New Project dialog.
project location
Visual Studio .NET IDE

IDE after a new project

The form
• Grey rectangle in window
• Represents the project’s window
• Part of the GUI
• Graphical components for user interaction
• User can enter data (input)
• Shows user instructions or results (output)

Tabs
• One tab appears for each open document
6
Visual Studio .NET IDE Overview
Tabs
Active tab
Menu
Menu bar
Solution Explorer
window
Properties window
7
Form (Windows application)
Menu Bar

The menu bar

Commands for developing and executing
programs
• To create new projects select:
File > New > Project

Certain menu options only appear in specific
modes
8
Solution
Explorer

Solution Explorer
Toolbox
Properties
window
The Solution Explorer




Lists all files in the solution
Displays the contents or a new project or open file
Start up project runs when the program is
executed
Solution Explorer toolbar
• The Refresh icon reloads files in the solution
• The Display icon shows all files, even the
hidden ones
• Icons change based on selected file
9
Solution Explorer
10
Toolbox


Contains
reusable
controls
To display the
Toolbox window,
select VIEW >
Toolbox.

Visual
programming
allows ‘drag and
drop’ of controls
to customize the
form 11
Fig. 2.17 Toolbox window.
Toolbox
close button
toggle auto hide
mouse over window name
Fig. 2.14 Demonstrating window auto-hide.
12
Properties window

The Properties window (Fig. 2.18)

Manipulate the properties of a form or control
• Properties can include size, color, text, or position


Right column is the property and left is the value
Icons
• arranges the properties alphabetically or by category
• The Event icon allows reactions to user actions

13
Users alter controls visually without writing code
Properties Window
14
Simple Program: Displaying Text
and an Image

The program




Form to hold other controls
Label to display text
PictureBox to display a
picture
No code needed to create
this program
Label control
PictureBox
control
Fig. 2.20 Simple program as it executes.
15
Simple Program: Create the new
program
Project type

Create a new project
 Make the project a
windows
application
 Name it:
ASimpleProject
and sets its
location
Project location
Project name
16
Creating a new Windows application.
Click to change
project location
Simple Program: Displaying Text
and an Image

The Text property
determines the text in
the title bar
Fig. 2.22 Setting the form’s Text property.
17
Simple Program: Resizing the
form
Title bar
grid
Disabled sizing handle
Enabled sizing handle
Form with sizing handles.
18
Simple Program: Selecting color
Current color
Custom palette
Down arrow
Changing property BackColor.
19
Simple Program: Change the
form’s color and add a label
New background
color
Adding a new label to the form.
20
Simple Program: Set the label’s
text



Text property used
to set the text of a
label
Label can be dragged
to desired location
Or Format > Center
In Form >
Horizontal can
also be used to
position the label as
in in this example
21
Label centered with
updated Text property
Label in position with its Text property set.
Simple Program: Set the label’s
font size and align text
The Font property
changes the label’s
text
 The TextAlign
property to align
the text

Properties window displaying the label’s properties.
22
Simple Program: Adding a
picture box
Picture boxes are
used to display
pictures
 Drag the picture
box onto the form

Updated
Label
PictureBox
Inserting and aligning the picture box.
23
Simple Program: Inserting an
Image

Insert an image

The Image property
sets the image that
appears
• Pictures should be of
type .gif, .jpeg, or .png
Fig. 2.33 Image property of the picture box.
24
Simple Program: Selecting the
Image
Fig. 2.34 Selecting an image for the picture box.
25
Simple Program: Resizing the
Image

The picture
box is
resizable to fit
the entire
image
Newly inserted image
(after setting
SizeMode property
to StretchImage)
| PictureBox displaying an image.
26
Simple Program: Saving and
Running

Save the project



In the Solution Explorer select File > Save
Using Save All will save the source code and
the project
Run the project



27
In run mode several IDE features are disabled
Click Build Solution in the Build menu to
compile the solution
Click Debug in the Start menu or press the F5
key
Running the Program
Design form
28
Simple Program: Terminating the
program
Click the close button (x in the top
right corner)
 Or click the End button in the toolbar

29