- Starting C#
- Creating a New Project
- Understanding the C# Environment
- Changing the Characteristics of Objects
- Naming Objects
- Setting the Text Property of the Form
- Giving the Form an Icon
- Changing the Size of the Form
- Adding Controls to a Form
- Designing an Interface
- Adding an Invisible Control to a Form
- Coding an Interface
- Running a Project
- Summary
- Q&A
This chapter is from the book
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).
){kind=link}
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.
){kind=link}
Figure 1.8 An application's interface doesn't have to be complex to be useful.