1

Introduction to the Visual Studio .NET IDE

Powerpoint slides modified from Deitel & Deitel

2

Visual Studio .NET Integrated Development Environment (IDE)

The Start PageHelpful links appear on left sideThe Getting Started screen

• Links to recent projects• The Open Project and New Project

buttons

3

Overview

Start Page in Visual Studio .NET.

Start Page

tab

SolutionExplorer- empty no open projects

New Project

button

Start Page links

Recent Projects listed here

Collapsed Toolbox Window

4

Visual Studio .NET IDE

New project dialogueC# .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

5

Visual Studio .NET IDE Overview

Fig. 2.3 New Project dialog.

Visual C# projects folder

project name

project location

description of selected project

Visual C# Windows Application (selected)

6

Visual Studio .NET IDE

IDE after a new projectThe 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

7

Visual Studio .NET IDE OverviewActive tab

TabsMenu Menu bar

Solution Explorer

window

Form (Windows application)

Properties window

8

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

9

Solution Explorer

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

Solution Explorer Toolbox

Propertieswindow

10

Solution Explorer

11

Toolbox

Fig. 2.17 Toolbox window.

Contains reusable controls

To display the Toolbox window, select VIEW > Toolbox. Visual

programming allows ‘drag and drop’ of controls to customize the form

12

Toolbox

Fig. 2.14 Demonstrating window auto-hide.

mouse over window name

toggle auto hide

close button

13

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 alter controls visually without writing code

14

Properties Window

15

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

Fig. 2.20 Simple program as it executes.

Label control

PictureBoxcontrol

16

Simple Program: Create the new program

Creating a new Windows application.

Project nameProject location Click to change

project location

Project type

Create a new project Make the project a

windows application

Name it: ASimpleProject and sets its location

17

Simple Program: Displaying Text and an Image

Fig. 2.22 Setting the form’s Text property.

The Text property determines the text in the title bar

18

Simple Program: Resizing the form

Form with sizing handles.

grid

Enabled sizing handle

Disabled sizing handle

Title bar

19

Simple Program: Selecting color

Changing property BackColor.

Down arrow

Current color

Custom palette

20

Simple Program: Change the form’s color and add a label

Adding a new label to the form.

New background color

21

Simple Program: Set the label’s text

Label in position with its Text property set.

Label centered with updated Text property

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

22

Simple Program: Set the label’s font size and align text

Properties window displaying the label’s properties.

The Font property changes the label’s text

The TextAlign property to align the text

23

Simple Program: Adding a picture box

Inserting and aligning the picture box.

Picture boxes are used to display pictures

Drag the picture box onto the form

UpdatedLabel

PictureBox

24

Simple Program: Inserting an Image

Fig. 2.33 Image property of the picture box.

Insert an image The Image property

sets the image that appears

• Pictures should be of type .gif, .jpeg, or .png

25

Simple Program: Selecting the Image

Fig. 2.34 Selecting an image for the picture box.

26

Simple Program: Resizing the Image

Newly inserted image (after setting SizeMode property to StretchImage)

The picture box is resizable to fit the entire image

| PictureBox displaying an image.

27

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

28

Running the Program

Design form

29

Simple Program: Terminating the program

Click the close button (x in the top right corner)

Or click the End button in the toolbar