1. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 1 Outline 3.1 Test-Driving the Welcome Application 3.2 Constructing the Welcome Application 3.3 Objects used in the Welcome Application 3.4 Wrap-Up Tutorial 3 - Welcome Application Introduction to Visual Programming

2. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 2 Objectives In this tutorial, you will learn to: –Set the text in the Form ’s title bar. –Change the Form ’s background color. –Place a Label control on the Form. –Display text in a Label control. –Place a PictureBox control on the Form. –Display an image in a PictureBox control. –Run an application.

3. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 3 3.1 Test-Driving the Welcome Application

4. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 4 3.1 Test-Driving the Welcome Application Figure 3.1 Opening an existing solution with the File menu’s Open Solution … Command. Open Solution command (selected) opens an existing solution Select File > Open Solution... to display the Open Solution dialog

5. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 5 3.1 Test-Driving the Welcome Application Look in: ComboBox –Select Welcome directory Select the Welcome solution file and click the Open button

6. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 6 3.1 Test-Driving the Welcome Application Figure 3.2 Open Solution dialog displaying the contents of the Welcome solution. Look in: ComboBox Welcome.sln solution file (may display Welcome depending on your settings) Open Solution dialog

7. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 7 3.1 Test-Driving the Welcome Application Visual Studio.NET IDE –Presents Welcome.cs in design view

8. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 8 3.1 Test-Driving the Welcome Application Figure 3.3 Welcome application’s Form in design view. Double click to open the Form in design view

9. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 9 3.1 Test-Driving the Welcome Application Figure 3.4 Running the Welcome application using the Debug menu’s Start command. Select Debug > Start The Start command runs (executes) the application. Start command (selected) runs the application

10. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 10 3.1 Test-Driving the Welcome Application Application during Run mode –Notice the application’s output Closing the running application –Click the application’s close box

11. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 11 3.1 Test-Driving the Welcome Application Figure 3.5 Welcome application running. Close box

12. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 12 3.2 Constructing the Welcome Application Select File > Open Solution.... –Open the Welcome solution file ( Welcome.sln ) Viewing the IDE in design mode –The empty Form –The Solution Explorer window –Toolbar –IDE title bar

13. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 13 3.2 Constructing the Welcome Application Figure 3.6 Blank Form. Toolbar Form title bar Form file name IDE title bar Solution Explorer window Solution nameProject nameBlank Form

14. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 14 3.2 Constructing the Welcome Application Changing the Form ’s file name –Locate the Solution Explorer –Select the file –Change the File Name property

15. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 15 3.2 Constructing the Welcome Application Figure 3.7 Changing the Form ’s file name. File properties New file name New property value Selected property description Selected property

16. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 16 3.2 Constructing the Welcome Application Changing the Form ’s title display –Locate Solution Explorer –Select the Text property –Change the text Figure 3.8 Setting the Form ’s Text property. Selected property description Selected propertyProperty value

17. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 17 3.2 Constructing the Welcome Application Title bar changes to display Form ’s Text property Figure 3.9 Title bar for the Welcome application. Title bar

18. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 18 3.2 Constructing the Welcome Application Examine the empty Form –Grid layout –Enabled sizing handle –Height and width

19. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 19 3.2 Constructing the Welcome Application Figure 3.10 Form with sizing handles. Grid Height Disabled sizing handleMouse pointer over an enabled sizing handle Enabled sizing handleWidth

20. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 20 3.2 Constructing the Welcome Application Resizing the Form –Expand the Size property –Change the Width –Change the Height Figure 3.11 Size property values for the Form. Size property values

21. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 21 3.2 Constructing the Welcome Application Changing the Form ’s background color –Locate the BackColor property System tab (default) Web tab Custom tab

22. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 22 3.2 Constructing the Welcome Application Figure 3.12 Viewing the Custom palette in the Form ’s BackColor property value field. Tabs Custom colors can be added to the white boxes Custom paletteDown-arrow Button Current color

23. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 23 3.2 Constructing the Welcome Application Custom tab palette –Define Color dialog Create your own colors RGB values

24. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 24 3.2 Constructing the Welcome Application Figure 3.13 Adding a color to the Custom palette. Blue component ( 169 )Green component ( 237 )Color previewRed component ( 255 )Adds a color to Custom palette

25. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 25 3.2 Constructing the Welcome Application Result of background color change –New RGB color values

26. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 26 3.2 Constructing the Welcome Application Figure 3.14 Properties window after the new custom color has been added. Form background set to new custom color Custom color added to palette

27. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 27 3.2 Constructing the Welcome Application Toolbox –Windows Forms tab Figure 3.15 Clicking the Windows Forms tab in the Toolbox. Windows Forms tab Label control

28. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 28 3.2 Constructing the Welcome Application Label added to Form Figure 3.16 Adding a Label to the Form. New background colorSizing handle (enabled) Label control

29. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 29 3.2 Constructing the Welcome Application Adding text to the Label –Label ’s content changes to reflect new Text value Figure 3.17 Label after updating its Text property. Updated Text property value too large for Label

30. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 30 3.2 Constructing the Welcome Application Resizing the Label –Text re-aligns to fit new Label size Figure 3.18 Label after it has been resized. Label resized vertically and horizontally

31. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 31 3.2 Constructing the Welcome Application Moving the Label on the Form Figure 3.19 Centered Label. Centered Label

32. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 32 3.2 Constructing the Welcome Application Changing the font –Locate Solution Explorer –Select the Label –Select Font property Figure 3.20 Properties window displaying the Label ’s properties. Ellipsis Button

33. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 33 3.2 Constructing the Welcome Application Font dialog –Change text by changing values in dialogs

34. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 34 3.2 Constructing the Welcome Application Figure 3.21 Font dialog for selecting fonts, styles and sizes. Current font Font dialogFont sample

35. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 35 3.2 Constructing the Welcome Application Text alignment –Access TextAlign property –Select appropriate option

36. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 36 3.2 Constructing the Welcome Application Figure 3.22 Centering the Label ’s text. Top-center alignment option Text alignment options

37. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 37 3.2 Constructing the Welcome Application Inserting a picture –Select the PictureBox control Drop control onto Form

38. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 38 3.2 Constructing the Welcome Application Figure 3.23 Inserting and aligning the PictureBox. Updated Label PictureBox

39. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 39 3.2 Constructing the Welcome Application Changing PictureBox properties –Locate Solution Explorer –Locate Image property Figure 3.24 Image property of the PictureBox. Image property value (no image selected) Ellipsis Button Image preview box (no image currently displayed)

40. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 40 3.2 Constructing the Welcome Application Selecting the picture –Navigate the Open dialog to the picture location –Click Open

41. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 41 3.2 Constructing the Welcome Application Figure 3.25 Open dialog used to browse for a PictureBox image. bug.png file (may display bug depending on your settings)

42. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 42 3.2 Constructing the Welcome Application Resizing the image –Change property SizeMode StretchImage scales image in PictureBox –Change property Size Figure 3.26 Newly inserted image. PictureBox too small for image

43. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 43 3.2 Constructing the Welcome Application Previewed image in Image property Figure 3.27 Image previewed in the Image property value field. Previewed image

44. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 44 3.2 Constructing the Welcome Application Align the image –Format > Center in Form > Horizontally

45. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 45 3.2 Constructing the Welcome Application Figure 3.28 PictureBox displaying an image. Newly inserted image

46. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 46 3.2 Constructing the Welcome Application Locking the controls –Disallow accidental resizing and relocation of controls Figure 3.29 Locking controls by using the Format menu. Lock Controls option

47. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 47 3.2 Constructing the Welcome Application Running the application –Title bar indicates the current application mode –Debug > Start Closing the running application –Click the application’s close box

48. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 48 3.2 Constructing the Welcome Application Figure 3.30 IDE in run mode, with the application running in the foreground. IDE title bar displaying [run] Form (with grid) Running application

49. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 49 3.3 Objects used in the Welcome Application ComboBox –Located at top of Properties window –Displays the names and class types of Form and control objects Figure 3.31 Component object box expanded to show the Welcome application’s objects. Welcome application GUI objects

50. © Copyright 1992-2004 by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 50 3.3 Objects used in the Welcome Application Namespaces –Organizes classes by functionality –Directory-like entities –System.Windows.Forms Figure 3.32 The name and class type of an object are displayed in the Properties window’s component object box. Name of object ( Form1 ) Namespace ( System.Windows.Forms ) Class type of object ( Form )