Painter
Test-Drive in Visual Studio CommunityYou’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
.
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.
Painter
App’s DirectoryOpen 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.
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:
Open File Explorer.
Click the View tab, then ensure that the File name extensions checkbox is checked.
To display them in Windows 7:
Open Windows Explorer.
Press Alt to display the menu bar, then select Folder Options… from Windows Explorer’s Tools menu.
In the dialog that appears, select the View tab.
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.]
Click OK to apply the setting and close the dialog.
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 GroupBox
es, RadioButton
s, Button
s 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 Button
s below the RadioButton
s 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.
The brush’s properties, selected in the RadioButton
s 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.
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.
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.
Click the Blue and Medium RadioButton
s. Draw raindrops, as shown in Fig. 1.13, to complete the drawing.
When you run an app from Visual Studio, you can terminate it by clicking the stop button
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.