jozef goetz, 2010 1 2006 pearson education, inc. all rights reserved. 2002 prentice hall. all...

Jozef Goetz, 2010

1

2006 Pearson Education, Inc. All rights reserved.

2002 Prentice Hall. All rights reserved.

expanded by J. Goetz, 2009

Jozef Goetz, 2010

2

OBJECTIVES

In this chapter you will learn: The basics of the Visual Studio Integrated

Development Environment (IDE) that assists you in writing, running and debugging your C# programs.

Visual Studio’s help features. Key commands contained in the IDE’s menus and

toolbars. The purpose of the various kinds of windows in

the Visual Studio 2008 IDE.

Jozef Goetz, 2010

3

OBJECTIVES

What visual programming is and how it simplifies and speeds program development

. To create, compile and execute a simple C# program

that displays text and an image using the Visual Studio IDE and the technique of visual programming.

Jozef Goetz, 2010

4

Form ever follows function. Louis Henri Sullivan

Seeing is believing. Proverb

Intelligence …is the faculty of making artificial objects, especially tools to make tools. Henri-Louis Bergson

Jozef Goetz, 2010

5Chapter 2 – Introduction to Visual Studio .NET IDE

Outline2.1 Introduction2.2 Visual Studio .NET Integrated Development

Environment (IDE) Overview2.3 Menu Bar and Toolbar2.4 Visual Studio .NET Windows

2.4.1 Solution Explorer2.4.2 Toolbox2.4.3 Properties Window

2.5 Using Help2.6 Simple Program: Displaying Text and an Image

Jozef Goetz, 2010

62.1 Introduction

Visual Studio .NET Microsoft’s Integrated Development Environment (IDE)

Powerful and sophisticated tool for creating business critical and mission-critical applications

Program in a variety of .NET languages

Tools to edit and manipulate several file types

.NET is Microsoft’s XML Web services platform. XML Web services link applications, services, and devices

together into connected solutions that enable you to act on information anytime, any place, and from any smart device.

Jozef Goetz, 2010

7

2.1 Introduction

Visual Studio® 2008 is Microsoft’s Integrated Development Environment (IDE) for various .NET programming languages.

Visual Studio allows you to drag and drop predefined components into place—a technique called visual programming.

Jozef Goetz, 2010

8

2.2 Overview of the Visual Studio 2008 IDE

The following examples use Microsoft Visual C#2008 Express Edition.

Full versions of Visual Studio 2008 include support for other languages.

Jozef Goetz, 2010

92.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

Jozef Goetz, 2010

102.2 Overview of the Visual Studio 2008 IDE

Microsoft Visual C# Express Edition Only support Visual C# programming language

Start page (Fig. 2.1) A list of links to resources in the IDE and on the internet

Visual C# Express Headlines and MSDN (Fig. 2.2) This section provides links to information about programming in C#

Note: MSDN stands for Microsoft Developer Network

Jozef Goetz, 2010

11

Select Start > All Programs > Microsoft Visual C# 2008 Express Edition.

The Start Page displays (Fig. 2.1).

2.2 Overview of the Visual Studio 2008 IDE (Cont.)

Fig. 2.1 | Start Page in Visual C# 2008 Express Edition.

New Project button

Start Page tab

Toolbox tab collapsible window Start Page linksEmpty Solution Explorer (no projects open)

Jozef Goetz, 2010

12

The Start Page contains a list of IDE resources and web-based resources. Recent Projects contains recently modified

projects. Getting Started focuses on using the IDE for

creating programs, learning Visual C# and connecting to the developer community.

Visual C# Express Headlines and MSDN: Visual C# Express Edition provide information about programming in Visual C#.


Jozef Goetz, 2010

13

You can browse the web using the IDE’s internal web browser.

Select View > Other Windows > Web Browser. Request a web page by entering its URL into the location bar

(Fig. 2.2).


Requested web page (URL in location bar drop-down)

Selected tab for requested web page

Fig. 2.2 | Displaying a web page in Visual Studio.

Jozef Goetz, 2010

142.2 Overview of the Visual Studio 2008 IDE (cont.)

Creating a New Project New Project Dialog (Fig. 2.3)

Dialog to choose type of program to build

Windows Form Designer (Fig. 2.4) Design portion of IDE

Properties Change a component of the program (Fig. 2.5)

Buttons Confirm action, change and etc. (Fig. 2.6)

Jozef Goetz, 2010

15

A project is a group of related files, such as the code files and any images that make up a program.

Solutions contain one ore more projects. To begin programming in Visual C#, select File >

New Project


Jozef Goetz, 2010

16

The New Project dialog (Fig. 2.3) displays. Templates are project types users can create in

Visual C#. A Windows Forms application executes within a Windows

operating system and has a graphical user interface (GUI).


Fig. 2.3 | New Project dialog.

Visual C# Windows Forms Application (selected)

Default project name(provided by Visual Studio)

Description of selected project (provided by Visual Studio)

Jozef Goetz, 2010

17

Click OK to display the IDE in Design view (Fig. 2.4), which contains features to create programs.

The gray rectangle (called a Form) represents the main window of the application.


Jozef Goetz, 2010

18


Active tab

Fig. 2.4 | Design view of the IDE.

Tabs Menu Menu barSolution Explorer window

Properties windowForm (Windows Forms application)

Jozef Goetz, 2010

192.2 Visual Studio .NET Integrated Development Environment (IDE)

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

Jozef Goetz, 2010

20

Figure 2.5 shows where the Form’s name can be modified in the Properties window.


Fig. 2.5 | Textbox control for modifying a property in the Visual Studio IDE.

Text box (displaying the Form’s name,Form1) which can be modified

Jozef Goetz, 2010

21

Figure 2.6 shows a dialog in which a control’s font properties can be modified.


Fig. 2.6 | Dialog for modifying a control’s font properties in the Visual Studio IDE.

OK button

Cancel button

Jozef Goetz, 2010

22

2.3 Menu Bar and Toolbar (Cont.)

Commands for managing the IDE are contained in menus on the menu bar of the IDE (Fig. 2.7).

The set of menus displayed depends on what you are currently doing in the IDE.

Menus contain groups of related menu items that cause the IDE to perform specific actions.

Fig. 2.7 | Visual Studio menu bar.

Jozef Goetz, 2010

23

Menu Description

File Commands for opening, closing, adding and saving projects.

Edit Commands for editing programs, such as cut, copy, paste, undo, redo, delete, find and select.

View Commands for displaying IDE windows and adding toolbars.

Project Commands for managing projects and files.

Build Commands for compiling programs.

Debug Commands for debugging and running programs.

Data Contains commands for interacting with databases.

Format Commands for arranging and modifying a Form’s controls.

Tools Commands for customization of the IDE.

Window Commands for hiding, opening, closing and displaying IDE windows.

Help Commands for accessing the IDE’s help features.

Fig. 2.8 | Summary of Visual Studio 2008 IDE menus.


Jozef Goetz, 2010

24


Fig. 2.9 | Standard Visual Studio toolbar.

NewProject

Open

Save All

Copy

Undo

NavigateBackward

Start

SolutionConfigurations

Add NewItem

Save Cut Paste Redo NavigateForward

Solution Platforms FindSolutionExplorer

ObjectBrowser

Start Page

DocumentOutline

Toolbo xPropertiesWindow

Find in Files

Jozef Goetz, 2010

25


You can add more toolbars by selecting View > Toolbars (Fig. 2.10).

Fig. 2.10 | Adding the Build toolbar to the IDE.

Additional toolbarsappear here

Jozef Goetz, 2010

26


Some icons contain a down arrow that displays related commands (Fig. 2.11).

Fig. 2.11 | IDE toolbar icon showing additional commands.

Toolbar

Down arrow indicatesadditional commands

Jozef Goetz, 2010

27


Positioning the mouse pointer over an icon highlights it and, after a brief pause, displays a description of the icon called a tool tip (Fig. 2.12).

Fig. 2.12 | Tool tip demonstration.

Tool tip appears when themouse pointer rests on an

icon for a few seconds

Jozef Goetz, 2010

28

2.4 Navigating the Visual Studio IDE

The IDE provides windows for accessing project files and customizing controls.

These windows can be accessed via the toolbar icons (Fig. 2.13) or the View menu.

Fig. 2.13 | Toolbar icons for Visual Studio windows.

SolutionExplorer

Properties windowObjectBrowser

Toolbox

Jozef Goetz, 2010

292.4 Navigating the Visual Studio 2005 IDE

Auto-Hide (Fig. 2.14 – 2.16) Space saving feature

Solution Explorer (Fig. 2.17 – 2.20) Provides access to all of the files in a solution

Toolbox (Fig. 2.21) Contains icons representing controls used to

customize form

Properties Window (Fig. 2.22) The window to change information about a form or

control

Jozef Goetz, 2010

30

2.4 Navigating the Visual Studio IDE (Cont.)

When auto-hide is enabled, a tab appears along the edge of the IDE window (Fig. 2.14).

Fig. 2.14 | Auto-hide feature demonstration.

Icon for hidden window(auto-hide enabled)

Jozef Goetz, 2010

31


Placing the mouse pointer over one of these icons displays that window (Fig. 2.15).

Fig. 2.15 | Displaying a hidden window when auto-hide is enabled.

Toolbox title bar

Horizontal orientation for pin icon when auto-hide is enabled

Jozef Goetz, 2010


To disable auto-hide and keep the window open, click the pin icon in the window’s upper-right corner.

When a window is “pinned down,” the pin icon is vertical (Fig. 2.16).

Toolbox “pinned down”Vertical orientation for pin iconwhen window is pinned down

Fig. 2.16 | Disabling auto-hide (“pinning down” a window).

Jozef Goetz, 2010

33

2.4.1 Solution Explorer

The Solution Explorer (Fig. 2.17) 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

Jozef Goetz, 2010

34


2.4.1 Solution Explorer The Solution Explorer window (Fig. 2.17) provides

access to all of a solution’s files. The solution’s startup project runs when you select Debug

> Start Debugging. The file that corresponds to the Form is named Form1.cs.

Visual C# files use the .cs file-name extension.

Fig. 2.17 | Solution Explorer with an open project.

Show All Files icon

Toolbar

Startup project

Jozef Goetz, 2010

35


Clicking the Show All Files icon displays all the files in the solution (Fig. 2.18).

Fig. 2.18 | Solution Explorer showing plus boxes and minus boxes for expanding and collapsing the tree to reveal or hide project files, respectively.

Plus box Minus box

Previouslyhidden folders

Jozef Goetz, 2010

36


Click a plus box to display grouped items (Fig. 2.19)

Fig. 2.19 | Solution Explorer expanding the Properties file after you click its plus box.

Minus box indicatesthat the file or folder

is expanded (changedfrom plus box)

Jozef Goetz, 2010

37


Click the minus box to collapse the tree from its expanded state (Fig. 2.20).

Fig. 2.20 | Solution Explorer collapsing all files after you click any minus boxes.

Plus boxes indicatethat the file or folderis collapsed (changed

from minus box

Jozef Goetz, 2010

382.4.2 Toolbox

The Toolbox (Fig. 2.21) 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 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

Jozef Goetz, 2010

39


2.4.2 Toolbox

The Toolbox contains icons representing controls used to customize Forms (Fig. 2.21).

The Toolbox groups the prebuilt controls into categories.

Group names

Controls

Fig. 2.21 | Toolbox window displaying controls for the Common Controls group.

Jozef Goetz, 2010

402.4.3 Properties window

The Properties window (Fig. 2.22) Manipulate the properties of a form or control Each control has its own set of properties

Properties can include size, color, text, or position Left column is the property Right 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

Jozef Goetz, 2010

41


2.4.2 Toolbox To display the Properties window, select View

> Properties Window. The Properties window allows you to modify a

control’s properties visually, without writing code (Fig. 2.22).

Jozef Goetz, 2010

42


Fig. 2.22 | Properties window showing the description of the selected property.

Property values

Properties

Description

Categorized icon

Alphabetical icon

Componentselection drop-down list

Toolbar

Scrollbar

Scrollbox

Jozef Goetz, 2010

432.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.24) 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

Jozef Goetz, 2010

44

Command Description

How Do I? Contains links to relevant topics, including how to upgrade programs and learn more about web services, architecture and design, files and I/O, data, debugging and more.

Search Finds help articles based on search keywords.

Index Displays an alphabetized list of topics.

Contents Displays a categorized table of contents in which help articles are organized by topic.

Fig. 2.23 | Help menu commands.

The Help menu commands are summarized in Fig. 2.23.

2.5 Using Help

Jozef Goetz, 2010

45

2.5 Using Help (Cont.)

Context-sensitive help displays relevant help articles rather than a generalized list (Fig. 2.24).

To use context-sensitive help, click an item, then press the F1 key.

Fig. 2.24 | Using context-sensitive help to show help articles related to a Form.

Jozef Goetz, 2010

46


Select Tools > Options… Make sure that the Show all settings checkbox

is checked (Fig. 2.25).

Select Help on the left, then locate the Show Help using: drop-down list. External Help Viewer displays articles in a separate

window Integrated Help Viewer displays a help article

inside the IDE.

Jozef Goetz, 2010

47


Fig. 2.25 | Options dialog displaying Help settings.

Show Help using drop-down listHelp options selected

Show all settings check box

Jozef Goetz, 2010

482.6 Using Visual Programming to Create a Simple Program Displaying Text and an Image Creating a Simple Program

1. Create the new project (Fig. 2.27)

2. Set the text in in the form’s title bar (Fig. 2.30)

3. Resize the form (Fig. 2.31)

4. Change the form’s background color (Fig. 2.34)

5. Add a Label control to the form (Fig. 2.35)

6. Customize the label’s appearance (Fig. 2.37)

7. Set the label’s font size (Fig. 2.38-2.39)

8. Align the label’s text (Fig. 2.40)

9. Add a PictureBox to the form (Fig. 2.41)

10. Insert an image (Fig. 2.42)

11. Save the project

12. Run the project (Fig. 2.47-2.48)

13. Terminate execution

Jozef Goetz, 2010

492.6 Simple Program: Displaying Text and an Image

The program (Fig. 2.26 + 2.46) 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.28) Name it: ASimpleProject and sets its location (Fig. 2.29)

Set the form’s title bar (Fig. 2.31) The Text property determines the text in the title bar Set the value to: A Simple Program

Jozef Goetz, 2010

50

2.6 Using Visual Programming toCreate a Simple Program that Displays

Text and an Image

Visual C# has preexisting controls used to build and customize programs (Fig. 2.26).

A Label contains descriptive text. A PictureBox displays an image, such as the Deitel bug

mascot.

Fig. 2.26 | Simple program executing.

Label control

PictureBox control

Jozef Goetz, 2010

51


Text and an Image (Cont.)

Select File > New Project… and create a new Windows Forms Application (Fig. 2.27).

Name the project ASimpleProgram and click OK.

Fig. 2.27 | New Project dialog.

Type the project name Template types

Jozef Goetz, 2010

52



Select File > Save All to display the Save Project dialog (Fig. 2.28).

Fig. 2.28 | Save Project dialog.

Jozef Goetz, 2010

53



Click the Browse… button, which opens the Project Location dialog (Fig. 2.29).

Navigate through the directories and select one in which to place the project.

Jozef Goetz, 2010

54



Fig. 2.29 | Setting the project location in the Project Location dialog.

Selected project location

Click to set projectlocation

Jozef Goetz, 2010

55



Click anywhere in the Form to display the Form’s properties in the Properties window.

Click in the textbox to the right of the Text property box and type “A Simple Program” (Fig. 2.30).

Fig. 2.30 | Setting the Form’s Text property in the Properties window.

Selected property

Property description

Name and type of control

Property value

Jozef Goetz, 2010


Resize the form (Fig. 2.31 and 2.32) 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.33) 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.35) 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

Jozef Goetz, 2010

57



Press Enter—the Form’s title bar is updated immediately (Fig. 2.31).

Resize the Form by clicking and dragging one of the enabled sizing handles (Fig. 2.31).

Fig. 2.31 | Form with enabled sizing handles.

Enabled sizing handles

Title bar

Jozef Goetz, 2010

58



Select the bottom-right sizing handle and drag it down and to the right to make the Form larger (Fig. 2.32).

You can also resize a Form by setting its Size property.

Fig. 2.32 | Resized Form.

Jozef Goetz, 2010

59

2.6 Using Visual Programming toCreate a Simple Program (Cont.)

Clicking BackColor in the Properties window causes a down-arrow button to appear (Fig. 2.33).

When clicked, the arrow displays tabs for Custom, Web and System colors.

Click the Custom tab to display the palette and select light blue.

Fig. 2.33 | Changing the Form’s BackColor property.

Current color

Down-arrow button

Light blue

Custom palette

Jozef Goetz, 2010

60



Once you select the color, the Form’s background changes to light blue (Fig. 2.34).

Fig. 2.34 | Form with new BackColor property applied.

New background color

Jozef Goetz, 2010

61



Double click the Label control in the Toolbox to add a Label (Fig. 2.35).

You also can “drag” controls from the Toolbox to the Form.

Fig. 2.35 | Adding a Label to the Form.

Label control

Jozef Goetz, 2010

62



Select the Label to make its properties appear in the Properties window (Fig. 2.36).

Set the Label’s Text property to Welcome to Visual C#!.

The AutoSize property is set to True, which allows the Label to resize to fit its text.

Set the AutoSize property to False.

Jozef Goetz, 2010

63



Fig. 2.36 | Changing the Label’s AutoSize property to False.

AutoSizeproperty

Jozef Goetz, 2010


Set the label’s text (Fig. 2.36) 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.38) The Font property changes the label’s text (Fig. 2.39) The TextAlign property to align the text (Fig. 2.40)

Add a picture box to the form (Fig. 2.41) Picture boxes are used to display pictures Drag the picture box onto the form

Jozef Goetz, 2010

65



Move the Label by dragging it or by using the left and right arrow keys (Fig. 2.37).

When the Label is selected, you can also center the Label using the Format menu.

Fig. 2.37 | GUI after the Form and Label have been customized.

Label centered withupdated Text property

Sizinghandles

Jozef Goetz, 2010

66



To change the font of the Label’s text, select the Font property (Fig. 2.38).

When the ellipsis button is clicked, a dialog appears that provides additional values.

Fig. 2.38 | Properties window displaying the Label’s properties.

Ellipsis button

Jozef Goetz, 2010

67


The Font dialog (Fig. 2.39) allows you to select the font name, style and size.

Under Font, select Segoe UI. Under Size, select 24 points and click OK.

Resize the Label if it’s not large enough to hold the text.

Fig. 2.39 | Font dialog for selecting fonts, styles and sizes.

Font sample

Current font

Jozef Goetz, 2010

68



Select the Label’s TextAlign property (Fig. 2.40).

Set the TextAlign property to MiddleCenter.

Fig. 2.40 | Centering the Label’s text.

Text alignmentoptions

MiddleCenter alignment option

Jozef Goetz, 2010


Insert an image The Image property sets the image that appears (Fig. 2.42)

Pictures should be of type .gif, .jpeg, or .png (Portable Networks Graphics)

The picture box is resizable to fit the entire image (Fig. 2.45)

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

Jozef Goetz, 2010

70



Locate the PictureBox in the Toolbox and add it to the Form (Fig. 2.41).

Fig. 2.41 | Inserting and aligning a PictureBox.

UpdatedLabel

PictureBox

Jozef Goetz, 2010

71



Click the PictureBox to display its properties in the Properties window (Fig. 2.42).

The Image property displays a preview of the image, if one exists.

Fig. 2.42 | Image property of the PictureBox.

Image property value(no image selected)

Jozef Goetz, 2010

72



Click the ellipsis button to display the Select Resource dialog (Fig. 2.43).

Click the Import… button to browse for the image to insert (bug.png)

Fig. 2.43 | Select Resource dialog to select an image for the PictureBox.

Jozef Goetz, 2010

73



In the dialog that appears, locate the image file, select it and click OK (Fig. 2.44).

Click OK to place the image in your program.

Fig. 2.44 | Select Resource dialog displaying a preview of selected image.

Image file name

Jozef Goetz, 2010

74



To size the image to the PictureBox, change the SizeMode property to StretchImage (Fig. 2.45).

Fig. 2.45 | Scaling an image to the size of the PictureBox.

SizeModeproperty

SizeModeproperty set toStretchImage

Jozef Goetz, 2010

75



Resize the PictureBox, making it larger (Fig. 2.46).

Select File > Save All to save the entire solution.

Fig. 2.46 | PictureBox displaying an image.

Newlyinsertedimage

Jozef Goetz, 2010

76



In run mode, the program is executing, and some features are disabled (Fig. 2.47).

Fig. 2.47 | Building a solution.

Build menu

Jozef Goetz, 2010

77


Select Debug > Start Debugging to execute the program (Fig. 2.48).

Fig. 2.48 | IDE in run mode, with the running program in the foreground.

Running program

Form

IDE displays text Running, whichsignifies that the program is executing

Close box

Jozef Goetz, 2010


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

jozef goetz, 2010 1 2006 pearson education, inc. all rights reserved. 2002 prentice hall. all...

Documents