2. Jozef Goetz, 2010 1  2006 Pearson Education, Inc. All rights reserved.  2002 Prentice Hall. All rights reserved. expanded by J. Goetz, 2009

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

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

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

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

7. Jozef Goetz, 2010 6 2.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.

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

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

10. Jozef Goetz, 2010 9 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

11. Jozef Goetz, 2010 10 2.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

12. 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 windowStart Page links Empty Solution Explorer (no projects open)

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

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

15. Jozef Goetz, 2010 14 2.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)

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

17. Jozef Goetz, 2010 16  The New Project dialog (Fig. 2.3) displays.  Templates are project types users can create in Visual C#.  A Windows Form s 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)

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

19. 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 bar Solution Explorer window Properties window Form (Windows Forms application)

20. Jozef Goetz, 2010 19 2.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

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

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

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

24. Jozef Goetz, 2010 23 Fig. 2.8 | Summary of Visual Studio 2008 IDE menus. 2.3 Menu Bar and Toolbar (Cont.)

25. Jozef Goetz, 2010 24 2.3 Menu Bar and Toolbar (Cont.) Fig. 2.9 | Standard Visual Studio toolbar. New Project Open Save All Copy Undo Navigate Backward Start Solution Configurations Add New Item SaveCutPasteRedo Navigate Forward Solution Platforms Find Solution Explorer Object Browser Start Page Document Outline Toolbo x Properties Window Find in Files

26. 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 toolbars appear here

27. 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 indicates additional commands

28. 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 the mouse pointer rests on an icon for a few seconds

29. 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. Solution Explorer Properties window Object Browser Toolbox

30. Jozef Goetz, 2010 29 2.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

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

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

33. Jozef Goetz, 2010 32 2.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 icon when window is pinned down Fig. 2.16 | Disabling auto-hide (“pinning down” a window).

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

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

36. 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 Previously hidden folders

37. 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 indicates that the file or folder is expanded (changed from plus box)

38. 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 indicate that the file or folder is collapsed (changed from minus box

39. Jozef Goetz, 2010 38 2.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

40. 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 Form s (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.

41. Jozef Goetz, 2010 40 2.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

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

43. 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 Component selection drop-down list Toolbar Scrollbar Scrollbox

44. Jozef Goetz, 2010 43 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.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

45. Jozef Goetz, 2010 44 Fig. 2.23 | Help menu commands.  The Help menu commands are summarized in Fig. 2.23. 2.5 Using Help

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

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

48. Jozef Goetz, 2010 47 2.5 Using Help (Cont.) Fig. 2.25 | Options dialog displaying Help settings. Show Help using drop-down list Help options selected Show all settings check box

49. Jozef Goetz, 2010 48 2.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

50. Jozef Goetz, 2010 49 2.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

51. Jozef Goetz, 2010 50 2.6 Using Visual Programming to Create 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

52. Jozef Goetz, 2010 51 2.6 Using Visual Programming to Create 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

53. Jozef Goetz, 2010 52 2.6 Using Visual Programming to Create 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.

54. Jozef Goetz, 2010 53 2.6 Using Visual Programming to Create 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.

55. Jozef Goetz, 2010 54 2.6 Using Visual Programming to Create 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 project location

56. Jozef Goetz, 2010 55 2.6 Using Visual Programming to Create 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

57. Jozef Goetz, 2010 56 2.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

58. Jozef Goetz, 2010 57 2.6 Using Visual Programming to Create 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

59. Jozef Goetz, 2010 58 2.6 Using Visual Programming to Create 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.

60. Jozef Goetz, 2010 59 2.6 Using Visual Programming to Create 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

61. Jozef Goetz, 2010 60 2.6 Using Visual Programming to Create 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

62. Jozef Goetz, 2010 61 2.6 Using Visual Programming to Create 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

63. Jozef Goetz, 2010 62 2.6 Using Visual Programming to Create 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.

64. Jozef Goetz, 2010 63 2.6 Using Visual Programming to Create a Simple Program that Displays Text and an Image (Cont.) Fig. 2.36 | Changing the Label ’s AutoSize property to False. AutoSize property

65. Jozef Goetz, 2010 64 2.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

66. Jozef Goetz, 2010 65 2.6 Using Visual Programming to Create 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 with updated Text property Sizing handles

67. Jozef Goetz, 2010 66 2.6 Using Visual Programming to Create 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

68. Jozef Goetz, 2010 67 2.6 Using Visual Programming to Create 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

69. Jozef Goetz, 2010 68 2.6 Using Visual Programming to Create a Simple Program that Displays Text and an Image (Cont.)  Select the Label ’s TextAlign property (Fig. 2.40).  Set the Text­Align property to MiddleCenter. Fig. 2.40 | Centering the Label ’s text. Text alignment options MiddleCenter alignment option

70. Jozef Goetz, 2010 69 2.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

71. Jozef Goetz, 2010 70 2.6 Using Visual Programming to Create 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. Updated Label PictureBox

72. Jozef Goetz, 2010 71 2.6 Using Visual Programming to Create 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)

73. Jozef Goetz, 2010 72 2.6 Using Visual Programming to Create 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.

74. Jozef Goetz, 2010 73 2.6 Using Visual Programming to Create 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

75. Jozef Goetz, 2010 74 2.6 Using Visual Programming to Create 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. SizeMode property SizeMode property set to StretchImage

76. Jozef Goetz, 2010 75 2.6 Using Visual Programming to Create 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. Newly inserted image

77. Jozef Goetz, 2010 76 2.6 Using Visual Programming to Create 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

78. Jozef Goetz, 2010 77 2.6 Using Visual Programming to Create 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, which signifies that the program is executing Close box

79. Jozef Goetz, 2010 78 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