Understanding Properties
All objects have attributes used to specify and return the state of the object. These attributes are properties, and you've already used some of them in previous hours using the Properties window. Indeed, every object exposes a specific set of properties, but not every object exposes the same set of properties. To illustrate this point, I'll continue with the hypothetical Pet object. Suppose that you have an object, and the object is a dog. This Dog object has certain properties common to all dogs. These properties include attributes such as the dog's name, the color of its hair, and even the number of legs it has. All dogs have these same properties; however, different dogs have different values for these properties. Figure 3.1 illustrates such a Dog object and its properties.
Figure 3.1 Properties are the attributes that describe an object.
Getting and Setting Properties
You've already seen how to read and change properties using the Properties window. The Properties window is available only at design time, however, and is used only for manipulating the properties of forms and controls. Most getting and changing of properties you'll perform will be done with Visual C# code, not by using the Properties window. When referencing properties in code, you specify the name of the object first, followed by a period (.), and then the property name as in the following syntax:
{ObjectName}.{Property}
If you had a Dog object named Bruno, for example, you would reference Bruno's hair color this way:
Bruno.HairColor
This line of code would return whatever value was contained in the HairColor property of the Dog object Bruno. To set a property to some value, you use an equal sign (=). To change the Dog object Bruno's Weight property, for example, you'd use a line of code such as the following:
Bruno.Weight = 90;
The following line of code places the value of the Weight property of the Dog object called Bruno into a temporary variable. This statement retrieves the value of the Weight property because the Weight property is referenced on the right side of the equal sign.
fltWeight = Bruno.Weight;
Variables are discussed in detail in Hour 11, "Using Constants, Data Types, Variables, and Arrays." For now, think of a variable as a storage location. When the processor executes this statement, it retrieves the value in the Weight property of the Dog object Bruno and places it in the variable (storage location) titled fltWeightVariable. Assuming that Bruno's Weight is 90, as set in the previous example, the computer would process the code statement like this:
fltWeight = 90;
Just as in real life, some properties can be read but not changed. Suppose that you have a Sex property to designate the gender of a Dog object. It's impossible for you to change a dog from a male to a female or vice versa (at least I think it is). Because the Sex property can be retrieved but not changed, it's known as a read-only property. You'll often encounter properties that can be set in Design view but become read-only when the program is running.
One example of a read-only property is the Height property of the combo box control. Although you can view the value of the Height property in the Properties window, you can't change the value—no matter how hard you try. If you attempt to change the Height property using Visual C# code, Visual C# simply changes the value back to the default—eerie gremlins.
Working with an Object and Its Properties
Now that you know what properties are and how they can be viewed and changed, you're going to experiment with properties by modifying the Picture Viewer project you built in Hour 1. Recall from Hour 1 how you learned to set the Height and Width properties of a form using the Properties window. Here, you're going to change the same properties using Visual C# code.
You're going to add two buttons to your Picture viewer. One button will enlarge the form when clicked, whereas the other will shrink the form. This is a simple example, but it illustrates well how to change object properties in Visual C# code.
Start by opening your Picture Viewer project from Hour 1 (you can open the project or the solution file). If you download the code samples from my site, I provide a Picture Viewer project for you to start with.
When the project first runs, the form has the Height and Width you specified in the Properties window. You're going to add buttons to the form that a user can click to enlarge or shrink the form at runtime by following these steps:
- Double-click frmViewer.cs in the Solutions Explorer window to display the form designer.
- Add a new button to the form by double-clicking the Button tool in the tool-box. Set the new button's properties as follows:
Property
Set To
Name
btnEnlarge
Location
342, 261
Size
21, 23
Text
^ (Note, this is Shift+6)
- Now for the Shrink button. Again, double-click the Button tool in the toolbox to create a new button on the form. Set this new button's properties as follows:
Property
Set To
Name
btnShrink
Location
365,261
Size
21, 23
Text
v
Figure 3.2 Each button is an object, as is the form the buttons sit on.
- Access the code for the Enlarge button now by double-clicking the button with the caption ^. Type the following statement exactly as you see it here. Do not press the Enter key or add a space after you've entered this text.
this.Width
When you type the period, or dot, as it's called, a small drop-down list like the one shown in Figure 3.3 appears. Visual C# is smart enough to realize that this represents the current form (more on this in a moment), and to aid you in writing code for the object, it gives you a drop-down list containing all the properties and methods of the form. This feature is called IntelliSense. When an IntelliSense drop-down box appears, you can use the up and down arrow keys to navigate the list and press Tab to select the highlighted list item. This prevents you from misspelling a member name thereby reducing compile errors. Because Visual C# is fully object-oriented, you'll come to rely on IntelliSense drop-down lists in a big way; I think I'd rather dig ditches than program without them.Figure 3.3 IntelliSense drop-down lists (also called auto-completion drop-down lists) make coding dramatically easier.
- Use the Backspace key to completely erase the code you just entered and enter the following code in its place (press Enter at the end of each line):
this.Width = this.Width + 20; this.Height = this.Height + 20;
Remember from before that the word this refers to the object to which the code belongs (in this case, the form). this is a reserved word; it's a word that you can't use to name objects or variables because Visual C# has a specific meaning for it. When writing code within a form module, as you're doing here, always use the reserved word this rather than the name of the form. this is much shorter than using the full name of the current form, and it makes the code more portable (you can copy and paste the code into another form module and not have to change the form name to make the code work). Also, should you change the name of the form at any time in the future, you won't have to change references to the old name. The code you've entered does nothing more than set the Width and Height properties of the form to whatever the current value of the Width and Height properties happens to be, plus 20 pixels. - Redisplay the form designer by selecting the tab named frmViewer.cs [Design] at the top of the designer window. Then double-click the button with the caption v to access its Click event and add the following code:
this.Width = this.Width – 20; this.Height = this.Height – 20;
This code is similar to the code in the btnEnlarge_Click event, except that it reduces the Width and Height properties of the form by 20 pixels. Your screen should now look like Figure 3.4.Figure 3.4 The code you've entered should look exactly like this.
Once again, display the form designer by clicking the tab frmViewer.cs [Design]. Your Properties Example project is now ready to be run! Press F5 to put the project in Run mode. Before continuing, click the Select Picture button and choose a picture from your hard drive.
Next, click the ^ button a few times and notice how the form gets bigger. The form will grow bigger (see Figure 3.5).
Figure 3.5 What you see is what you get—the form you created should look just as you designed it.
Next, click the v button to make the form smaller. When you've clicked enough to satisfy your curiosity (or until you get bored), end the running program and return to Design mode by clicking the Stop Debugging button on the toolbar.
Did you notice how the buttons and the image on the form didn't resize as the form's size was changed? In Hour 6, "Building Forms—Advanced Techniques," you'll learn how to make your forms resize their contents.