© Copyright 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

© Copyright 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.

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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

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

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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

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

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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

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

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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

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

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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

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

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

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

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

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

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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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)

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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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)

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

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

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

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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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

© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved 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 )