Designing an Interface

---

It's generally best to design the user interface of a form and then add the code behind the interface that makes the form functional. The user interface for your Picture Viewer program will consist of a View Picture button, a Close button, and a PictureBox in which to display a picture.

Adding a Visible Control to a Form

Start by adding a Button control to the form. Do this by double-clicking the Button item in the toolbox. C# then creates a new button and places it in the upper-left corner of the form (see Figure 1.7).

Figure 1.7. When you double-click a control in the toolbox, the control is added to the upper-left corner of the form.

Using the Properties window, set the button's properties as follows (note that you may want to change the Properties list to alphabetical, if it is not already, to make it easier to find these properties by name ):

Property	Value
Name	btnSelectPicture
Text	Select Picture
Location	301 , 10 (Note: 301 is the x coordinate, 10 is the y coordinate.)
Size	85,23

You're now going to create a button that the user can click to close the Picture Viewer program. Rather than adding a new button to the form, you're going to create a copy of the button you've already defined. To do this, right-click the button on the form and choose Copy from its shortcut menu. Next, right-click anywhere on the form and choose Paste from the form's shortcut menu. The new button appears over the button you copied , and it is selected by default. Change the properties of the new button as follows:

Property	Value
Name	btnQuit
Text	Quit
Location	301 , 40

The last control you need to add to the form is a PictureBox control. A PictureBox has many capabilities, but its primary purpose is to show pictures ”which is precisely what you'll use it for in this example. Add a new PictureBox control to the form and set its properties as follows:

Property	Value
Name	picShowPicture
BorderStle	FixedSingle
Location	8 , 8
Size	282 , 275

After you've made these property changes, your form will look like the one in Figure 1.8. Click the Save All button on the toolbar to save your work.

Figure 1.8. An application's interface doesn't have to be complex to be useful.

---

Top