jozef goetz, 2010 1 2006 pearson education, inc. all rights reserved. 2002 prentice hall. all...
TRANSCRIPT
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#.
2.2 Overview of the Visual Studio 2008 IDE (Cont.)
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).
2.2 Overview of the Visual Studio 2008 IDE (Cont.)
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
2.2 Overview of the Visual Studio 2008 IDE (Cont.)
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).
2.2 Overview of the Visual Studio 2008 IDE (Cont.)
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.
2.2 Overview of the Visual Studio 2008 IDE (Cont.)
Jozef Goetz, 2010
18
2.2 Overview of the Visual Studio 2008 IDE (Cont.)
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.
2.2 Overview of the Visual Studio 2008 IDE (Cont.)
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.
2.2 Overview of the Visual Studio 2008 IDE (Cont.)
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.
2.3 Menu Bar and Toolbar (Cont.)
Jozef Goetz, 2010
24
2.3 Menu Bar and Toolbar (Cont.)
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
2.3 Menu Bar and Toolbar (Cont.)
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
2.3 Menu Bar and Toolbar (Cont.)
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
2.3 Menu Bar and Toolbar (Cont.)
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
2.4 Navigating the Visual Studio IDE (Cont.)
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
322.4 Navigating the Visual Studio IDE (Cont.)
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 Navigating the Visual Studio IDE (Cont.)
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
2.4 Navigating the Visual Studio IDE (Cont.)
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
2.4 Navigating the Visual Studio IDE (Cont.)
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
2.4 Navigating the Visual Studio IDE (Cont.)
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 Navigating the Visual Studio IDE (Cont.)
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 Navigating the Visual Studio IDE (Cont.)
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
2.4 Navigating the Visual Studio IDE (Cont.)
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
2.5 Using Help (Cont.)
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
2.5 Using Help (Cont.)
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
2.6 Using Visual Programming toCreate a Simple Program that Displays
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
2.6 Using Visual Programming toCreate a Simple Program that Displays
Text and an Image (Cont.)
Select File > Save All to display the Save Project dialog (Fig. 2.28).
Fig. 2.28 | Save Project dialog.
Jozef Goetz, 2010
53
2.6 Using Visual Programming toCreate a Simple Program that Displays
Text and an Image (Cont.)
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
2.6 Using Visual Programming toCreate a Simple Program that Displays
Text and an Image (Cont.)
Fig. 2.29 | Setting the project location in the Project Location dialog.
Selected project location
Click to set projectlocation
Jozef Goetz, 2010
55
2.6 Using Visual Programming toCreate a Simple Program that Displays
Text and an Image (Cont.)
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
562.6 Simple Program: Displaying Text and an Image
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
2.6 Using Visual Programming toCreate a Simple Program that Displays
Text and an Image (Cont.)
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
2.6 Using Visual Programming toCreate a Simple Program that Displays
Text and an Image (Cont.)
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
2.6 Using Visual Programming toCreate a Simple Program that Displays
Text and an Image (Cont.)
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
2.6 Using Visual Programming toCreate a Simple Program that Displays
Text and an Image (Cont.)
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
2.6 Using Visual Programming toCreate a Simple Program that Displays
Text and an Image (Cont.)
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
2.6 Using Visual Programming toCreate a Simple Program that Displays
Text and an Image (Cont.)
Fig. 2.36 | Changing the Label’s AutoSize property to False.
AutoSizeproperty
Jozef Goetz, 2010
642.6 Simple Program: Displaying Text and an Image
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
2.6 Using Visual Programming toCreate a Simple Program that Displays
Text and an Image (Cont.)
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
2.6 Using Visual Programming toCreate a Simple Program that Displays
Text and an Image (Cont.)
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
2.6 Using Visual Programming toCreate a Simple Program (Cont.)
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
2.6 Using Visual Programming toCreate a Simple Program that Displays
Text and an Image (Cont.)
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
692.6 Simple Program: Displaying Text and an Image
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
2.6 Using Visual Programming toCreate a Simple Program that Displays
Text and an Image (Cont.)
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
2.6 Using Visual Programming toCreate a Simple Program that Displays
Text and an Image (Cont.)
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
2.6 Using Visual Programming toCreate a Simple Program that Displays
Text and an Image (Cont.)
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
2.6 Using Visual Programming toCreate a Simple Program that Displays
Text and an Image (Cont.)
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
2.6 Using Visual Programming toCreate a Simple Program that Displays
Text and an Image (Cont.)
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
2.6 Using Visual Programming toCreate a Simple Program that Displays
Text and an Image (Cont.)
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
2.6 Using Visual Programming toCreate a Simple Program that Displays
Text and an Image (Cont.)
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
2.6 Using Visual Programming toCreate a Simple Program (Cont.)
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
782.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
Copyright 2009. All rights reserved. Copyright 2012. All rights reserved. Foreign Corrupt Practices…
Jozef Goetz, 2012 1 © 2011-12 Pearson Education Copyright (c) 2007Prentice-Hall. All rights reserved