Introduction to the Visual

Studio .NET IDE

Powerpoint slides modified from

Deitel & Deitel

Objectives
Familiarized on the C#
environment
Create simply program using
C#
Used C# as one of the
programming language
2

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

Visual Studio .NET IDE Overview

description of
selected project

Visual C#
projects folder

Visual C#
Windows
Application
(selected)

project name

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 projects 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

5

Visual Studio .NET IDE Overview

Tabs

Active tab

Menu

Menu bar

Solution Explorer
window

Properties window

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

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
8

Solution Explorer

Toolbox

Contains
reusable
controls
To display the
Toolbox window,
select VIEW >
Toolbox.

Visual
programming
allows drag and
drop of controls
to customize the
form 10

Fig. 2.17 Toolbox window.

Toolbox
close button
toggle auto hide

mouse over window name

Fig. 2.14 Demonstrating window auto-hide.

11

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
Users

12

alter controls visually without writing code

Properties Window

13

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

14

Label control

PictureBox
control

Fig. 2.20 Simple program as it executes.

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 name

15

Project location

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 forms Text property.

16

Simple Program: Resizing the

form
Title bar
grid
Disabled sizing handle

Enabled sizing handle

Form with sizing handles.

17

Simple Program: Selecting color

Current color
Custom palette

Down arrow

Changing property BackColor.

18

Simple Program: Change the

forms color and add a label

New background
color

Adding a new label to the form.

19

Simple Program: Set the labels

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
20

Label centered with

updated Text property

Label in position with its Text property set.

Simple Program: Set the labels

font size and align text
The Font property
changes the labels
text
The TextAlign
property to align
the text

Properties window displaying the labels properties.

21

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.

22

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.

23

Simple Program: Selecting the

Image

Fig. 2.34 Selecting an image for the picture box.

24

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.

25

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

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
26

Running the Program

Design form

27

Simple Program: Terminating the

program
Click the close button (x in the top
right corner)
Or click the End button in the toolbar

28

29

30

31

32