1.12 Painter Test-Drive in Visual Studio Community

You’ll now use Visual Studio Community to “test-drive” an existing app that enables you to draw on the screen using the mouse. The Painter app allows you to choose among several brush sizes and colors. The elements and functionality you see in this app are typical of what you’ll learn to program in this text. The following steps walk you through test-driving the app. For this test drive, we assume that you placed the book’s examples in your user account’s Documents folder in a subfolder named examples.

Step 1: Checking Your Setup

Confirm that you’ve set up your computer and the software properly by reading the book’s Before You Begin section that follows the Preface.

Step 2: Locating the Painter App’s Directory

Open a File Explorer (Windows 8 and 10) or Windows Explorer (Windows 7) window and navigate to


C:UsersyourUserNameDocumentsexamplesch01

Double click the Painter folder to view its contents (Fig. 1.8), then double click the Painter.sln file to open the app’s solution in Visual Studio. An app’s solution contains all of the app’s code files, supporting files (such as images, videos, data files, etc.) and configuration information. We’ll discuss the contents of a solution in more detail in the next chapter.

Fig. 1.8 Contents of C:examplesch01Painter.

Depending on your system configuration, File Explorer or Windows Explorer might display Painter.sln simply as Painter, without the filename extension .sln. To display the filename extensions in Windows 8 and higher:

  1. Open File Explorer.

  2. Click the View tab, then ensure that the File name extensions checkbox is checked.

To display them in Windows 7:

  1. Open Windows Explorer.

  2. Press Alt to display the menu bar, then select Folder Options… from Windows Explorer’s Tools menu.

  3. In the dialog that appears, select the View tab.

  4. In the Advanced settings: pane, uncheck the box to the left of the text Hide extensions for known file types. [Note: If this item is already unchecked, no action needs to be taken.]

  5. Click OK to apply the setting and close the dialog.

Step 3: Running the Painter App

To see the running Painter app, click the Start button (Fig. 1.9)

or press the F5 key.

Figure 1.10 shows the running app and labels several of the app’s graphical elements— called controls. These include GroupBoxes, RadioButtons, Buttons and a Panel. These controls and many others are discussed throughout the text. The app allows you to draw with a Red, Blue, Green or Black brush of Small, Medium or Large size. As you drag the mouse on the white Panel, the app draws circles of the specified color and size at the mouse pointer’s current position. The slower you drag the mouse, the closer the circles will be. Thus, dragging slowly draws a continuous line (as in Fig. 1.11) and dragging quickly draws individual circles with space in between. You also can Undo your previous operation or Clear the drawing to start from scratch by pressing the Buttons below the RadioButtons in the GUI. By using existing controls—which are objects—you can create powerful apps much faster than if you had to write all the code yourself. This is a key benefit of software reuse.

Fig. 1.9 Running the Painter app.

Fig. 1.10 Painter app running in Windows 10.

The brush’s properties, selected in the RadioButtons labeled Black and Medium, are default settings—the initial settings you see when you first run the app. Programmers include default settings to provide reasonable choices that the app will use if the user does not change the settings. Default settings also provide visual cues for users to choose their own settings. Now you’ll choose your own settings as a user of this app.

Step 4: Changing the Brush Color

Click the RadioButton labeled Red to change the brush color, then click the RadioButton labeled Small to change the brush size. Position the mouse over the white Panel, then drag the mouse to draw with the brush. Draw flower petals, as shown in Fig. 1.11.

Fig. 1.11 Drawing flower petals with a small red brush.

Step 5: Changing the Brush Color and Size

Click the Green RadioButton to change the brush color. Then, click the Large RadioButton to change the brush size. Draw grass and a flower stem, as shown in Fig. 1.12.

Fig. 1.12 Drawing the flower stem and grass with a large green brush.

Step 6: Finishing the Drawing

Click the Blue and Medium RadioButtons. Draw raindrops, as shown in Fig. 1.13, to complete the drawing.

Step 7: Stopping the App

When you run an app from Visual Studio, you can terminate it by clicking the stop button

Fig. 1.13 Drawing rain drops with a medium blue brush.

on the Visual Studio toolbar or by clicking the close box

on the running app’s window.

Now that you’ve completed the test-drive, you’re ready to begin developing C# apps. In Chapter 2, Introduction to Visual Studio and Visual Programming, you’ll use Visual Studio to create your first C# program using visual programming techniques. As you’ll see, Visual Studio will generate for you the code that builds the app’s GUI. In Chapter 3, Introduction to C# App Programming, you’ll begin writing C# programs containing conventional program code that you write.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset