If the project you were working with earlier in this chapter is still open, close it by selecting File > Close Solution.

To create a new Windows Forms app:

1. Select File > New > Project… to display the New Project dialog (Fig. 2.18).

2. Select Windows Forms Application. Name the project ASimpleApp, specify the Location where you want to save it and click OK. We stored the app in the IDE’s default location—in your user account’s Documents folder under the Visual Studio 2015Projects.

As you saw earlier in this chapter, when you first create a new Windows Forms app, the IDE opens in Design view (that is, the app is being designed and is not executing). The text Form1.cs [Design] in the tab containing the Form means that we’re designing the Form visually rather than programmatically. An asterisk (*) at the end of the text in a tab indicates that you’ve changed the file and the changes have not yet been saved.

The text in the Form’s title bar is determined by the Form’s Text property (Fig. 2.19). If the Properties window is not open, select View > Properties Window and pin down the window so it doesn’t auto hide. Click anywhere in the Form to display the Form’s properties in the Properties window. In the textbox to the right of the Text property, type "A Simple App", as in Fig. 2.19. Press the Enter key—the Form’s title bar is updated immediately (Fig. 2.20).

The Form’s size is specified in pixels (that is, dots on the screen). By default, a Form is 300 pixels wide and 300 pixels tall. You can resize the Form by dragging one of its sizing handles (the small white squares that appear around the Form, as shown in Fig. 2.20). Using the mouse, select the bottom-right sizing handle and drag it down and to the right to make the Form larger. As you drag the mouse (Fig. 2.21), the IDE’s status bar (at the bottom of the IDE) shows the current width and height in pixels. We set the Form to 400 pixels wide by 360 pixels tall. You also can do this via the Form’s Size property in the Properties window.

The BackColor property specifies a Form’s or control’s background color. Clicking Back-Color in the Properties window causes a down-arrow button to appear next to the value of the property (Fig. 2.22). Clicking the down-arrow button displays other options, which vary depending on the property. In this case, the arrow displays tabs for Custom, Web and System (the default). Click the Custom tab to display the palette (a grid of colors). Select the box that represents light blue. Once you select the color, the palette closes and the Form’s background color changes to light blue (Fig. 2.23).

For the app we’re creating in this chapter, the typical controls we use are located in the Toolbox’s Common Controls group, and also can be found in the All Windows Forms group. If the Toolbox is not already open, select View > Toolbox to display the set of controls you’ll use for creating your apps. If either group name is collapsed, expand it by clicking the arrow to the left of the group name (the All Windows Forms and Common Controls groups are shown in Fig. 2.15). Next, double click the Label control in the Toolbox to add a Label in the Form’s upper-left corner (Fig. 2.24)—each Label you add to the Form is an object of class Label from the .NET Framework Class Library. [Note: If the Form is behind the Toolbox, you may need to hide or pin down the Toolbox to see the Label.] Although double clicking any Toolbox control places the control on the Form, you also can “drag” controls from the Toolbox to the Form—you may prefer dragging the control because you can position it wherever you want. The Label displays the text label1 by default. By default, the Label’s BackColor is the same as the Form’s.

Click the Label’s text in the Form to select it and display its properties in the Properties window. The Label’s Text property determines the text that the Label displays. The Form and Label each have their own Text property—Forms and controls can have the same property names (such as Text, BackColor etc.) without conflict. Each common properties purpose can vary by control. Perform the following steps:

1. Set the Label’s Text property to Welcome to C# Programming!. The Label resizes to fit all the typed text on one line.

2. By default, the AutoSize property of the Label is set to True so the Label can update its own size to fit all of its text. Set the AutoSize property to False so that you can change the Label’s size, then resize the Label (using the sizing handles) so that the text fits.

3. Move the Label to the top center of the Form by dragging it or by using the keyboard’s left and right arrow keys to adjust its position (Fig. 2.25). Alternatively, when the Label is selected, you can center it horizontally by selecting Format > Center In Form > Horizontally.

To change the font type and appearance of the Label’s text:

1. Select the value of the Font property, which causes an ellipsis button to appear next to the value (Fig. 2.26)—you can click this button to display a dialog of options for the property. Click the ellipsis button to display the Font dialog (Fig. 2.27).

   

   

2. You can select the font name (the font options may be different, depending on your system), font style (Regular, Italic, Bold, etc.) and font size (16, 18, 20, etc.) in this dialog. The Sample text shows the selected font settings. Under Font, select Segoe UI, Microsoft’s recommended font for user interfaces. Under Size, select 24 points and click OK.

3. If the Label’s text does not fit on a single line, it wraps to the next line. Resize the Label so that the words "Welcome to" appear on the Label’s first line and the words "C# Programming!" appear on the second line.

4. Re-center the Label horizontally.

Select the Label’s TextAlign property, which determines how the text is aligned within the Label. A three-by-three grid of buttons representing alignment choices is displayed (Fig. 2.28). The position of each button corresponds to where the text appears in the Label. For this app, set the TextAlign property to MiddleCenter in the three-by-three grid—this selection centers the text horizontally and vertically within the Label. The other TextAlign values, such as TopLeft, TopRight, and BottomCenter, can be used to position the text anywhere within a Label. Certain alignment values may require that you resize the Label to fit the text better.

The PictureBox control displays images. Locate the PictureBox in the Toolbox (Fig. 2.15) and double click it to add it to the Form—each PictureBox you add to the Form is an object of class PictureBox from the .NET Framework Class Library. When the PictureBox appears, move it underneath the Label, either by dragging it or by using the arrow keys (Fig. 2.29).

Click the PictureBox to display its properties in the Properties window (Fig. 2.30), then:

1. Locate and select the Image property, which displays a preview of the selected image or (none) if no image is selected.

2. Click the ellipsis button to display the Select Resource dialog (Fig. 2.31), which is used to import files, such as images, for use in an app.

   

   

3. Click the Import… button to browse for an image, select the image file and click OK to add it to your project. We used bug.png from this chapter’s examples folder. Supported image formats include PNG (Portable Network Graphics), GIF (Graphic Interchange Format), JPEG (Joint Photographic Experts Group) and BMP (Windows bitmap). Depending image’s size, it’s possible that only a portion of the image will be previewed in the Select Resource dialog—you can resize the dialog to see more of the image (Fig. 2.32). Click OK to use the image.

4. To scale the image to fit in the PictureBox, change the SizeMode property to StretchImage (Fig. 2.33). Resize the PictureBox, making it larger (Fig. 2.34), then re-center the PictureBox horizontally.

Select File > Save All to save the entire solution. The solution file (which has the filename extension .sln) contains the name and location of its project, and the project file (which has the filename extension .csproj) contains the names and locations of all the files in the project. If you want to reopen your project at a later time, simply open its .sln file.

Recall that up to this point we have been working in the IDE design mode (that is, the app being created is not executing). In run mode, the app is executing, and you can interact with only a few IDE features—features that are not available are disabled (grayed out). Select Debug > Start Debugging to execute the app (or press the F5 key). The IDE enters run mode and displays “(Running)” next to the app’s name in the IDE’s title bar. Figure 2.35 shows the running app, which appears in its own window outside the IDE.

You can terminate the app by clicking its close box

in the top-right corner of the running app’s window. This action stops the app’s execution and returns the IDE to design mode. You also can select Debug > Stop Debugging to terminate the app.