Working with Images and Scroll Bars
The selection elements you learned in the preceding section are great when you want some kind of text input from the user. However, often you are interested in numeric or spatial information from the user. Also, if the interface is graphical, you should be able to incorporate custom graphics into your programs. In this section you will learn how to do both these things.
Changing an Image’s Size
The Sizer program demonstrates how to incorporate custom graphics into your C# programs using the picture box control. It also illustrates the scroll bar control, which is handy when you want the user to choose an integer value from a specified range (even if the user doesn’t know what an integer is). Figures 6.20 and 6.21 demonstrate the Sizer in all its impressive glory.
Figure 6.20. In its default state, the picture is small, and the scroll bar is all the way to the left.
Figure 6.21. When the user drags the scroll bar, the image becomes larger.
This program has only one line of custom code. Most of the work went into setting up the form. Figure 6.22 shows my diagram of the form and its objects.
Figure 6.22. My initial sketch of the Sizer program.
When I had some idea of what I wanted to do, I could find the right objects to build the form and the right properties to manipulate the objects.
Setting Up the Picture Box
The picture box control is cleverly named because it is a box that holds a picture. It is a very convenient way to add graphics to your programs. You can create an image in any image-editing software and attach that image to the picture box control. You can then manipulate the image by adjusting the control’s properties. The image property is used to assign an image to the picture box. Picture boxes can take many standard image types, including Windows bitmaps (.bmp files), Graphical Interchange Format (.gif) files, and Joint Picture Experts Group (.jpg) format files. Generally, I like to use a compressed format such as .gif or .jpg, but the choice is up to you.
If you are going to be doing much graphics work, you need a powerful image-editing tool. Many quality commercial packages are available, but in case you’re on a budget, an excellent freeware package called the Gimp is included on the CD-ROM accompanying this book. The Gimp is an open-source program originally written for the Linux family of operating systems, but the version included on the CD works in Windows. This program features most of the highend tools you need in an image editor, including layers, transparency, channels, masking, paths, Bèzier selection, and so on. I used it to prepare all the screen shots for this book.
Adding an Image to the Picture Box
You can add an image to the picture box by clicking the image property in the Properties window while a picture box control is selected. You will see the ellipsis button indicating that a special editor is available for initializing the property. When you click the ellipsis button, you see a dialog box that lets you pick
NOTE
IN THE REAL WORLD
Many images are copyrighted, so you must get permission before using an image somebody else has created. If you plan to release your software, get permission to use art work, create it yourself, or purchase it (select a finished product or hire an artist). Most of the time, I create crude graphics, and if they need to be improved (they usually do), I bring in a professional artist. Still, it’s good to have sketches so that you can indicate what you’re trying to accomplish.
Manipulating the Image’s SizeMode Property
Images almost never come in the size you need for your programs. If your picture box is exactly the same size as the picture it is showing, everything is fine. This rarely happens, so the SizeMode property of the Image object gives you several ways to resolve this conflict.
Figure 6.23 demonstrates the various settings of the SizeMode property.
Figure 6.23. All the picture boxes are the same, except for the setting of SizeMode.
I did not include a source code listing for this program because I added no event logic at all. The visual layout of the program illustrates what I’m describing in this section. The actual program with source code is available on the CD-ROM, so you can look at it there.
The default setting for the SizeMode property is Normal. The image will be loaded into the picture box at its normal scale, but if the picture box is too small, the bottom and right segments of the image will be trimmed. Setting SizeMode to StretchImage causes the image to be stretched and squashed so that it fits the size and shape of the picture box. This can cause distortion if the image and the picture boxes are not the same general shape. For example, if the image is square and the picture box is a tall skinny rectangle, the image will appear to be taller and skinnier than usual. The Center setting causes the image to be displayed at its default size but centered within the image box, with the edges cropped out. The AutoSize setting causes the picture box to shrink or grow so that it is exactly the right size for the image.
Adding a Scroll Bar
Scroll bars are a wonderful innovation in interface design. Many times, you need some sort of integer input. If you ask a user to type in a number, you never know exactly what you will get. You usually have to do all sorts of error-detection gymnastics to ensure that the number is properly formatted and is not written out. Also, users generally prefer to use some sort of visual interface if they are in a GUI. The scroll bar control is designed to let the user visually enter a number. Much of the time, the user isn’t even aware that this is what he or she is doing, but that’s what scroll bars are for. The .NET framework supplies two scroll bar controls, but they are almost identical. The HScrollbar is aligned horizontally, and the VScrollbar is vertical. (Not surprisingly, both are inherited from a generic Scrollbar class.) The little box inside the scroll bar is sometimes called the elevator. The Value property of a scroll bar is an integer related to the position of the elevator. For horizontal scroll bars, smaller values are on the left. For vertical scroll bars, smaller values are at the top. You can set a range of values your scroll bar will return, with the Maximum and Minimum properties. Also, you can change how much the elevator moves when the user clicks the arrowheads, by setting the SmallChange property. You can indicate how far the elevator moves when the user clicks the shaft, by adjusting the LargeChange property. For the Sizer program, I chose a horizontal scroll bar with values between 50 and 200 because I want the image to vary between 50×50 and 200×200. I set the Minimum property to 50 and the Maximum property to 200. I left everything else alone.
Writing the Event-Handling Code
This program requires only one line of custom code, and that goes in the default event handler of the scroll bar. When the scroll bar is changed, the picture box’s size should also change to have the same height and width as the scroll bar’s value. Here’s the event code:
private void scrSize_Scroll(object sender, System.Windows.Forms.ScrollEventArgs
e) {
picCritter.Size = new Size(scrSize.Value, scrSize.Value);
}The Scroll event occurs whenever the user moves the scroll bar. When this happens, the program changes the Size of picCritter. The Size property requires a size object (I learned that by looking at the object browser for the picture box). I looked up the size object and found that I could create it with two integers. Because I wanted the picture box to remain square, I just set the value of the scroll bar as both the X and Y values for the new size object.