1

Chapter 2 – 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

empty no projects

New Project

button

Start Page links

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

Tabs MenuMenu 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

Solution Explorer window.

Show all files icon

Toolbar

Startup project

11

Toolbox

Fig. 2.21 Toolbox window.

toolbox group

controls

scroll arrow

Contains reusable controls Visual

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

Toolbox

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.22) 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

Fig. 2.22 Properties window.

Alphabet icon

Characterized icon

Event icon

Component selection

Scroll bar

Current valueProperty

Description

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.27 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.31 Setting the form’s Text property.

Name and type of object

Property value

Selected property

Property description

The Text property determines the text in the title bar

18

Simple Program: Resizing the form

Form with sizing handles.

grid

Mouse pointer over a sizing handle

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.

Ellipsis indicate dialog will appear

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.43 Image property of the picture box.

Image property value (no image selected)

Insert an imageThe Image property

sets the image that appears

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

25

Simple Program: Selecting the Image

Fig. 2.44 Selecting an image for the picture box.

26

Simple Program: Resizing the Image

Newly inserted image (after resizing the picture box)

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

IDE in run mode, with the running application in the foreground.

Run mode Design form

Form

Running program

Close box

29

Simple Program: Terminating the program

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

Or click the End button in the toolbar