Home > Articles

A C# Programming Tou

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

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).

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

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

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.

  • + Share This
  • 🔖 Save To Your Account