1

Chapter 2 – Introduction to the Visual

Studio .NET IDE
Outline
2.1 Introduction
2.2 Visual Studio .NET Integrated Development
Environment (IDE) Overview
2.3 Menu Bar and Toolbar
2.4 Visual Studio .NET Windows
2.4.1 Solution Explorer
2.4.2 Toolbox
2.4.3 Properties Window
2.5 Using Help
2.6 Simple Program: Displaying Text and an Image

 2002 Prentice Hall. All rights reserved.

 2

2.1 Introduction

• Visual Studio .NET

– Microsoft’s Integrated Development Environment (IDE)
– Program in a variety of .NET languages
– Tools to edit and manipulate several file types

 2002 Prentice Hall. All rights reserved.

 3
2.2 Visual Studio .NET Integrated Development
Environment (IDE)
• The Start Page (Fig. 2.1)
– Helpful links appear on left side
• Each has a sub screen
– The Getting Started screen
• Links to recent projects
• The Open Project button
• The New Project button
– The What’s New screen
• New features and updates for Visual Studio .NET
– Downloadable code samples
– New tools
– The Online Community screen
• Ways to contact other programmers

 2002 Prentice Hall. All rights reserved.

 4
2.2 Visual Studio .NET Integrated Development
Environment (IDE) Overview

location bar
navigation
buttons

hidden window
recent
projects

Start Page
links

buttons

Fig. 2.1 Start Page in Visual Studio .NET.

 2002 Prentice Hall. All rights reserved.

 5
2.2 Visual Studio .NET Integrated Development
Environment (IDE)
– The Headlines screen
• Ways to browse new articles and get guides
– The Search Online screen
• Use the MSDN library which has article and tutorials
– Microsoft Developer Network (MSDN)
– The Downloads screen
• Updates
• Code samples
– The XML Web Services screen
• Information about Web services (Chapter 21)
– Reusable software available on the internet
– The Web Hosting screen
• Programmers can post software for public use

 2002 Prentice Hall. All rights reserved.

 6
2.2 Visual Studio .NET Integrated Development
Environment (IDE)
– The My Profile screen
• Allows Visual Studio .NET customization
– Keyboard preferences
– Window layout preferences
• New project dialogue (Fig. 2.2)
– C# .NET project
• Group of related files, images, and documentations
– C# .NET solution
• Group of projects creating one or a group of applications
– Windows Applications
• Anything that runs in the Windows OS
– Microsoft Word
– Microsoft Internet Explorer

 2002 Prentice Hall. All rights reserved.

 7
2.2 Visual Studio .NET Integrated Development
Environment (IDE) Overview

Visual C# Visual C# Windows

projects folder Application (selected)

project name

project location
description of
selected project

Fig. 2.2 New Project dialog.

 2002 Prentice Hall. All rights reserved.

 8
2.2 Visual Studio .NET Integrated Development
Environment (IDE)
• IDE after a new project (Fig. 2.3)
– The form
• Grey rectangle in window
• Represents the project’s window
• Part of the GUI or Graphical User Interface
– Graphical components for user interaction
– User can enter data (input)
– Shows user instructions or results (output)
– Tabs
• One tab appears for each open document
• Used to save space in the IDE

 2002 Prentice Hall. All rights reserved.

 9
2.2 Visual Studio .NET Integrated Development
Environment (IDE) Overview

menu title bat

tabs
menu bar

active tab Solution

Explorer
Form
(windows
application)
Properties
window

Fig. 2.3 Visual Studio .NET environment after a new project has been created.

 2002 Prentice Hall. All rights reserved.

 10

2.3 Menu Bar and Toolbar

• The menu bar (Fig. 2.4)

– Commands for developing and executing programs
• Create new projects by going to File > New > Project
– Certain menu options only appear in specific IDE modes
– Each menu is summarized in Fig. 2.5
• The toolbar (Fig. 2.6)
– Contains commonly used commands as icons (Fig. 2.8)
– Used rather than navigating through menus
– Simply click the icon to use the command
• Some icons have down arrows that offer additional commands
• Holding the mouse over an icon displays a tool tip (Fig. 2.7)
– Tool tips briefly state what the icons are or do.

 2002 Prentice Hall. All rights reserved.

 11

2.3 Menu Bar and Toolbar

Fig. 2.4 Visual Studio .NET menu bar.

 2002 Prentice Hall. All rights reserved.

 12

2.3 Menu Bar and Toolbar

Me nu De sc rip tio n
File Contains commands for opening projects, closing projects, printing projects, etc.
Edit Contains commands such as cut, paste, find, undo, etc.
View Contains commands for displaying IDE windows and toolbars.
Project Contains commands for adding features, such as forms, to the project.
Build Contains commands for compiling a program.
Debug Contains commands for debugging and executing a program.
Data Contains commands for interacting with databases.
Format Contains commands for arranging a form’s controls.
Tools Contains commands for additional IDE tools and options for customizing the environment.
Windows Contains commands for arranging and displaying windows.
Help Contains commands for getting help.

Fig. 2.5 Summary of Visual Studio menus.

 2002 Prentice Hall. All rights reserved.

 13

2.3 Menu Bar and Toolbar

toolbar icon (indicates a command to open a file)

toolbar

down arrow indicates

additional commands

Fig. 2.6 Visual Studio .NET toolbar.

 2002 Prentice Hall. All rights reserved.

 14

2.4.1 Solution Explorer

tool tip

Fig. 2.7 Tool tip demonstration.

 2002 Prentice Hall. All rights reserved.

 15

2.4.1 Solution Explorer

Toolbox
Solution Explorer

Properties

Fig. 2.8 Toolbar icons for various Visual Studio .NET windows.

 2002 Prentice Hall. All rights reserved.

 16

2.4 Visual Studio .NET Windows

• Windows
– Used to explore files
– Used to customize controls
– Accessed through the toolbar icons or right edge of toolbar
– Also accessed through the View menu

 2002 Prentice Hall. All rights reserved.

 17

2.4.1 Solution Explorer

• The Solution Explorer (Fig. 2.9)

– Lists all files in the solution
– Displays the contents or a new project or open file
– The start up project is the project that runs when the program
is executed
• It appears in bold in the Solution Explorer
– The plus and minus images expand and collapse the tree
• Can also double click on the file name to expand/collapse
– 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

 2002 Prentice Hall. All rights reserved.

 18

2.4.1 Solution Explorer

Refresh Display all files Properties window

Startup project

Collapse tree

Expand tree

Fig. 2.9 Solution Explorer window.

 2002 Prentice Hall. All rights reserved.

 19

2.4.2 Toolbox

• The Toolbox (Fig. 2.10)

– Contains reusable controls
• Controls customize the form
• Visual programming allows ‘drag and drop’ of controls
– Black arrows at bottom are used to scroll through items
– Mouse pointer icon
• Allows user to deselect current control
– No tool tips
• Each icon is labeled with a its name
– Toolbox can be hidden on left side of IDE (Fig. 2.11)
• Mouse over it to expand it
• When the mouse is no longer over it, the toolbar goes away
• The pin icon is used disable auto hide

 2002 Prentice Hall. All rights reserved.

 20

2.4.2 Toolbox
toolbox group

controls

scroll arrow

Fig. 2.10 Toolbox window.

 2002 Prentice Hall. All rights reserved.

 21

2.4.2 Toolbox

close button

toggle auto hide

mouse over window name

Fig. 2.11 Demonstrating window auto-hide.

 2002 Prentice Hall. All rights reserved.

 22

2.4.3 Properties window

• The Properties window (Fig. 2.12)

– Manipulate the properties of a form or control
– Each control has its own set of properties
• Properties can include size, color, text, or position
– Right column is the property
– Left column is the property value
– Icons
• The Alphabetic icon arranges the properties alphabetically
• The Categorized icon arranges the properties by category
• The Event icon allows reactions to user actions
– Users alter controls visually without writing code
– The component selection dropdown list shows what control
is being altered and what other controls can be altered
 2002 Prentice Hall. All rights reserved.
 23

2.5 Properties Window

Component selection
Characterized icon
Event icon

Alphabet icon

Scroll bar

Current value
Property

Description

Fig. 2.12 Properties window.

 2002 Prentice Hall. All rights reserved.

 24

2.5 Using Help

• Help menu
– Index
• Displays an alphabetic index that users can browse through
– Search
• Allows users to search for a particular help topic
• Filters can be use to narrow the search
• Dynamic help (Fig. 2.13)
– Provide a help topic based on the mouse location
– Displays relevant topics in the dynamic help window
– Lists help entries, samples, and “getting started” topics
• Context-Sensitive help
– Automatically brings up relevant help topics

 2002 Prentice Hall. All rights reserved.

 25

2.5 Using Help

Dynamic
Help window
Selected
item

Fig. 2.13 Dynamic Help window. Relative help topics

for selected item
(start page)
 2002 Prentice Hall. All rights reserved.
 26
2.6 Simple Program: Displaying Text and an
Image
• The program (Fig. 2.14)
– Form to hold other controls
– Label to display text
– PictureBox to display a picture
– No code needed to create this program
• Create the new program
– Create a new project
• Make the project a windows application (Fig. 2.15)
• Name it: ASimpleProject and sets its location (Fig. 2.16)
• Set the form’s title bar (Fig. 2.17)
– The Text property determines the text in the title bar
– Set the value to: A Simple Program

 2002 Prentice Hall. All rights reserved.

 27
2.6 Simple Program: Displaying Text and an
Image

Fig. 2.14 Simple program as it executes.

 2002 Prentice Hall. All rights reserved.

 28
2.6 Simple Program: Displaying Text and an
Image

Project type

Project name

Project location Click to change

project location

Fig. 2.15 Creating a new Windows application.

 2002 Prentice Hall. All rights reserved.

 29
2.6 Simple Program: Displaying Text and an
Image
Select project location

Click to set project location

Fig. 2.16 Setting the project location.

 2002 Prentice Hall. All rights reserved.

 30
2.6 Simple Program: Displaying Text and an
Image

Name and type of object

Selected property

Property value
Property description

Fig. 2.17 Setting the form’s Text property.

 2002 Prentice Hall. All rights reserved.

 31
2.6 Simple Program: Displaying Text and an
Image
• Resize the form (Fig. 2.18)
– Click and drag one of the forms size handles
• Enables handles are white
• Disables handles are gray
– The grid in the background will not appear in the solution
• Change the form’s background color (Fig. 2.19)
– The BackColor determines the form’s background color
• Dropdown arrow is used to set the color
• Add a label control to the form (Fig. 2.20)
– Controls can be dragged to the form
– Controls can be added to the form by double clicking
– The forms background color is the default of added controls

 2002 Prentice Hall. All rights reserved.

 32
2.6 Simple Program: Displaying Text and an
Image

Title bar

grid
Disabled sizing handle

Mouse pointer over

a sizing handle

Enabled sizing handle

Fig. 2.18 Form with sizing handles.

 2002 Prentice Hall. All rights reserved.

 33
2.6 Simple Program: Displaying Text and an
Image

Current color

Custom palette

Down arrow

Fig. 2.19 Changing property BackColor.

 2002 Prentice Hall. All rights reserved.

 34
2.6 Simple Program: Displaying Text and an
Image

Label
control

New background color

Fig. 2.20 Adding a new label to the form.

 2002 Prentice Hall. All rights reserved.

 35
2.6 Simple Program: Displaying Text and an
Image
• Set the label’s text (Fig. 2.21)
– The Text property is used to set the text of a label
– The label can be dragged to a desired location
– Or Format > Center In Form > Horizontal can also
be used to position the label as in in this example
• Set the label’s font size and align text (Fig. 2.22)
– The Font property changes the label’s text (Fig. 2.23)
– The TextAlign property to align the text (Fig. 2.24)
• Add a picture box to the form (Fig. 2.25)
– Picture boxes are used to display pictures
– Drag the picture box onto the form

 2002 Prentice Hall. All rights reserved.

 36
2.6 Simple Program: Displaying Text and an
Image

Label centered with

updated Text property

Fig. 2.21 Label in position with its Text property set.

 2002 Prentice Hall. All rights reserved.

 37
2.6 Simple Program: Displaying Text and an
Image

Ellipsis indicate
dialog will appear

Fig. 2.22 Properties window displaying the label’s properties.

 2002 Prentice Hall. All rights reserved.

 38
2.6 Simple Program: Displaying Text and an
Image

Current font

Font size

Fig. 2.23 Font window for selecting fonts, styles and sizes.

 2002 Prentice Hall. All rights reserved.

 39
2.6 Simple Program: Displaying Text and an
Image

Text alignment option

Top-center alignment option

Fig. 2.24 Centering the text in the label.

 2002 Prentice Hall. All rights reserved.

 40
2.6 Simple Program: Displaying Text and an
Image

Updated Label
New PictureBox

Fig. 2.25 Inserting and aligning the picture box.

 2002 Prentice Hall. All rights reserved.

 41
2.6 Simple Program: Displaying Text and an
Image
• Insert an image
– The Image property sets the image that appears (Fig. 2.26)
• Pictures should be of type .gif, .jpeg, or .png (Fig. 2.27)
– The picture box is resizable to fit the entire image (Fig. 2.28)
• Save the project
– In the Solution Explorer select File > Save
– Using Save All will save the source code and the project
• Run the project (Fig. 2.29)
– 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

 2002 Prentice Hall. All rights reserved.

 42
2.6 Simple Program: Displaying Text and an
Image

Image property value

(no image selected)

Fig. 2.26 Image property of the picture box.

 2002 Prentice Hall. All rights reserved.

 43
2.6 Simple Program: Displaying Text and an
Image

Fig. 2.27 Selecting an image for the picture box.

 2002 Prentice Hall. All rights reserved.

 44
2.6 Simple Program: Displaying Text and an
Image

Newly inserted image

(after resizing the
picture box)

Fig. 2.28 Picture box after the image has been inserted.

 2002 Prentice Hall. All rights reserved.

 45
2.6 Simple Program: Displaying Text and an
Image
Start button Run mode Design form

End button

Design form
(grid)

Running
application

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

 2002 Prentice Hall. All rights reserved.

 46
2.6 Simple Program: Displaying Text and an
Image
• Terminating the program
– Click the close button (x in the top right corner)
– Or click the End button in the toolbar

 2002 Prentice Hall. All rights reserved.