17.4. Color ControlColors can enhance a program's appearance and help convey meaning. For example, a red traffic light indicates stop, yellow indicates caution and green indicates go. Structure Color defines methods and constants used to manipulate colors. Every color can be created from a combination of alpha, red, green and blue components (called ARGB values). All four ARGB components are Bytes that represent integer values in the range 0 to 255. The alpha value determines the opacity of the color. For example, the alpha value 0 represents a transparent color, and the value 255 represents an opaque color. Alpha values between 0 and 255 result in a weighted blending effect of the color's RGB value with that of any background color, causing a semitransparent effect. The first number in the RGB value defines the amount of red in the color, the second defines the amount of green and the third defines the amount of blue. The larger the value, the greater the amount of that color. Programmers can choose from almost 17 million colors. If a computer cannot display all these colors, it will display the color closest to the one specified. Figure 17.3 summarizes some predefined Color constants (all are Public and Shared), and Fig. 17.4 describes several Color methods and properties. For a complete list of the predefined Color constants, methods and properties, see Color structure's online documentation (msdn2.microsoft.com/en-us/library/system.drawing.color).
The table in Fig. 17.4 describes two FromArgb method calls. One takes three Integer arguments, and one takes four Integer arguments (all argument values must be between 0 and 255, inclusive). Both take Integer arguments specifying the amount of red, green and blue. The overloaded version also allows the user to specify the alpha component; the three-argument version defaults the alpha to 255 (opaque). Both methods return a Color object. Color properties A, R, G and B return bytes that represent Integer values from 0 to 255, corresponding to the amounts of alpha, red, green and blue, respectively. Programmers draw shapes and Strings with Brushes and Pens. A Pen, which functions similarly to an ordinary pen, is used to draw lines. Most drawing methods require a Pen object. The overloaded Pen constructors allow programmers to specify the colors and widths of the lines they wish to draw. The System.Drawing namespace also provides a Pens class containing predefined Pens. All classes derived from MustInherit class Brush define objects that color the interiors of graphical shapes. For example, the SolidBrush constructor takes a Color objectthe color to draw. In most Fill methods, Brushes fill a space with a color, pattern or image. Figure 17.5 summarizes various Brushes and their functions.
Manipulating ColorsFigure 17.6 demonstrates several of the methods and properties described in Fig. 17.4. It displays two overlapping rectangles, allowing you to experiment with color values, color names and alpha values (for transparency). Figure 17.6. Color value and alpha demonstration.
When the application begins executing, its Form is displayed. This results in a call to FrmShowColors's OnPaint method to paint the Form's contents. Line 12 gets a reference to PaintEventArgs e's Graphics object and assigns it to graphicsObject. Lines 15 and 18 create a black and a white SolidBrush for drawing solid shapes on the Form. Class SolidBrush derives from MustInherit class Brush, so a SolidBrush can be passed to any method that expects a Brush parameter. Line 21 uses Graphics method FillRectangle to draw a solid white rectangle using the SolidBrush created in line 18. FillRectangle takes as parameters a Brush, the x- and y-coordinates of the rectangle's upper-left corner, and the width and height of the rectangle. Lines 2425 display the Name property of BackColor with Graphics method Draw-String. There are several overloaded DrawString methods; the version demonstrated in lines 2425 takes as arguments the String to display, the display Font, the Brush to use for drawing and the x- and y-coordinates of the location for the String's first character. Lines 2829 assign the backgroundColor value to brush's Color property and display a rectangle. Lines 3235 extract and display foregroundColor's ARGB values and draw a string containing those values. Lines 3839 assign the foregroundColor value to brush's Color property, then draw a filled rectangle in the foregroundColor that overlaps the rectangle drawn at line 29. Button event handler btnColorName_Click (lines 4348) uses class Color's Shared method FromName to create a new Color object from the color name that a user enters in a TextBox. This Color is assigned to backgroundColor (line 46). Then line 47 invokes the Form's Invalidate method to indicate that the Form should be repainted, which results in a call to OnPaint to update the Form on the screen. Button event handler btnColorValue_Click (lines 5158) uses Color method FromArgb to construct a new Color object from the ARGB values that a user specifies via Text-Boxes, then assigns the newly created Color to foregroundColor. Line 57 invokes the Form's Invalidate method to indicate that the Form should be repainted, which results in a call to OnPaint to update the Form on the screen. Changing the alpha value of the foregroundColor from 0 to 255, makes the effects of alpha blending apparent. The sample output shows that the red back rectangle blends with the blue front rectangle to create purple where they overlap. Note that you cannot modify an existing Color object. To use a different color, create a new Color object. Using the ColorDialog to Select Colors from a Color PaletteThe predefined GUI component ColorDialog is a dialog box that allows users to select from a palette of available colors or to create custom colors. Figure 17.7 demonstrates the ColorDialog. When a user selects a color and presses OK, the application retrieves the user's selection via the ColorDialog's Color property. Figure 17.7. ColorDialog used to change background and text color.
The GUI for this application contains two Buttons. The btnBackgroundColor allows the user to change the Form's background color. The btnTextColor allows the user to change the button text colors. Line 5 creates a Private Shared ColorDialog named colorChooser, which is used in the event handlers for both Buttons. Lines 817 define the btnBackgroundColor_Click event handler. The method sets the ColorDialog's FullOpen property to true (line 11), so the dialog displays all available colors, as shown in the screen capture in Fig. 17.7. When FullOpen is False, the dialog shows only the color swatches. Line 12 invokes colorChooser's ShowDialog method to display the dialog. The dialog's Color property stores the user's selection. If the user clicks OK, line 15 modifies the background color of the form by setting its BackColor property to the dialog's Color property. Lines 2030 define the btnTextColor_Click event handler. If the user clicks OK in the dialog, lines 2728 set the text color of both buttons to the selected color. Users are not restricted to the ColorDialog's 48 color swatches. To create a custom color, users can click anywhere in the ColorDialog's large rectangle, which displays various color shades. Adjust the slider, hue and other features to refine the color. When finished, click the Add to Custom Colors button, which adds the custom color to a square in the Custom Colors section of the dialog. Clicking OK sets the Color property of the Color-Dialog to that color. |