Determining Which Key Was Pressed
The KeyCode returns a special value that relates to the hardware location of whatever key the user pressed. For example, on many keyboards (but not all) the left arrow key might be mapped as key number 123. This information isn’t that useful to a programmer, who wants to know whether the user hit the left arrow. .NET provides a special set of values with names, called an enumeration, so that you don’t have to remember which particular number is associated with each key. Instead, you find the appropriate name from the list of names that pops up when you try to complete the code. All the key codes are stored in an enumeration named Keys. The KeyCode() method returns a value of the Keys enumeration, and you can compare it to other values from the enumeration. For an example, look at the code I added to the KeyDown event for the Key Reader program:
private void KeyReader_KeyDown(object sender, System.Windows.Forms.KeyEventArgs e) {
lblDown.Text = "Down: " + Convert.ToString(e.KeyCode);
if (e.KeyCode == Keys.ShiftKey){ MessageBox.Show("That is one shifty character");
} // end if
}// end KeyDown
The first thing you might notice is that I sent the value of e.KeyCode to lblDown, much as I did in KeyDown. The if statement compares the value of e.KeyCode to the Shift keys, which are represented in the Keys enumeration as Keys.ShiftKey.
Animating Images
Animation is an important feature of graphical programs. Most computer animation involves one or more of three basic techniques: creating a scene mathematically on−the−fly, moving an object on the screen, and swapping between several images in the same space to create the illusion that the image is changing. In this chapter you focus on the last two techniques. Figure 7.7 illustrates an example of the image−swapping form of animation. The Spin Globe program shows several images placed in succession in the same spot.
175
Figure 7.7: Each time the user clicks the Next button, the image changes. The result is the illusion of a spinning globe.
The Spin Globe program has only one picture box on it, but that picture box displays several values. If the user presses the button repeatedly, the ball appears to be spinning. The sequence repeats indefinitely.
Introducing the ImageList Control
The secret weapon of animation is an object named the ImageList control. The ImageList is a special object used to store a series of images offstage. It is not visible on the form, but you can copy images from the ImageList to a visible control, like the picture box in the Spin Globe program (refer to Figure 7.7). To use an ImageList, select it from the toolbox and drag it onto the form as you would any other control.
176
When you drag an ImageList object onto the screen, it doesn’t stay there. Instead, it goes to a special "offstage area" below the normal Form Designer. You can see where the ImageList object is placed by looking at Figure 7.8.
Figure 7.8: The ImageList control resides in a special place outside the main screen.
The special area below the form is used to indicate controls that are attached to the form but have no visual representation when the program is running. The ImageList control is one such control.
Setting Up an Image List
Although the ImageList control does not take up any space on the form, it still has properties, like any other control. I changed the name to myPics in exactly the same way you change the name of any other object, through the Properties window. The Images property is important because it enables you to load several images into the ImageBox control’s memory, where they are available for later retrieval. When you activate the Images property, you see a special dialog like the one in Figure 7.9. This screen allows you to grab images to store in your programs.
177
Figure 7.9: When you modify the Images property of an ImageList, the program provides a special editor where you can select each image from your file system.
Trap Be sure to set the ImageSize property whenever you use an ImageList control. The default size (16 by 16 pixels) is extremely small and causes your images to either show up very small or appear grainy (depending on the SizeMode of the picture box you place the image in). Generally, you want the ImageSize value set to about the same size as the images you’ll be displaying on the screen. If you set the value too small, you do not preserve enough resolution. If you set the value too large, you can waste a great deal of memory. I usually use 256 by 256 as a starting size. This is a reasonably good compromise. You should set the image size on the image list before you start adding images to the list.
In the Real World
The ImageList control might not seem necessary, but it is very useful. When you store all the images you will need in an ImageList, the images are saved as part of your program. This makes your program much more portable because you don’t have to worry about which drive the user has stored images on, for example. Images stored in an ImageList are loaded into the computer’s memory when the program first loads, so the images can be displayed in very rapid succession. If the computer has to retrieve each image from the disk (the other main approach to this type of animation), there is a lag as each image is loaded from the disk. The ImageList control helps to solve all these problems.
Looking at the Image Collection
The ImageList control stores all the images into a special structure called a collection. The collection is basically a list of objects. Each image in the list has a number. You can use the Add button in the Image Collection Editor (the form shown if Figure 7.9 that pops up when you activate the Images property) to add a new image to the list. You can also use the Delete button to take an image out of the list and use the arrow keys to manipulate the order of images.
178