Windows Controls: The Color Dialog Box

Introduction

To provide the selection of colors on Microsoft Windows applications, the operating system provides a common dialog box appropriate for such tasks. You can use the Color dialog box for various reasons such as letting the user set or change a color of an object or specifying the background color of a control or the color used to paint an object. When it displays, by default, the dialog box appears as follows:

This displays a constant list of colors to the user. If none of the available colors is appropriate for the task at hand, the user can click the Define Custom Colors >> button to expand the dialog box:

The expanded Color dialog box allows the user either to select one of the preset colors or to custom create a color by specifying its red, green, and blue values.

The user can change the color in four different areas. The top left section displays a list of 48 predefined colors. If the desired color is not in that section, the user can click and drag the mouse in the multi-colored palette. The user can also drag the right bar that displays a range based on the color of the palette; the user can scroll up and down by dragging the arrow. For more precision, the user can type the Red, Green and Blue values. Each uses an integral value that ranges from 1 to 255.

To provide the Color dialog box to your application, from the Dialogs section of the Toolbox, you can click the ColorDialog button and click anywhere on the form. The Color dialog box is implemented through the ColorDialog class, which is based on the CommonDialog class that is the ancestor to all Windows common dialog boxes of the .NET Framework. To display the dialog box to the user, call the CommonDialog.ShowDialog() method. Here is an example:

private void btnBackColor_Click(object sender, EventArgs e)
{
            ColorDialog dlg = new ColorDialog();

            dlg.ShowDialog();
}

The most important and most obvious property of the Color dialog box is the color the user would have selected after using it. This selected color is represented by the ColorDialog.Color property. When you are setting up a ColorDialog control for your application, if you want to specify the default color, in the Properties windows, you can click the arrow of the Color property. This would give you the option to select a color from three available tabs:

At run time, you can set the color programmatically by assigning it a valid known name of a color:

private void btnBackColor_Click(object sender, EventArgs e)
{
            ColorDialog dlg = new ColorDialog();
            dlg.Color = Color.Red;
            dlg.ShowDialog();
}

When the user has finished using the Color dialog box and clicks OK, you can find out what color was selected by retrieving the value of the ColorDialog.Color property. Here is an example:

private void btnBackColor_Click(object sender, EventArgs e)
{
        ColorDialog dlg = new ColorDialog();
        dlg.Color = Color.FromKnownColor(KnownColor.DarkTurquoise);

        if( dlg.ShowDialog() == DialogResult.OK )
                panel1.BackColor = dlg.Color;
}

By default, the Color dialog box comes up in its regular (small) size. This allows the user to select one of the preset colors. If the desired color is not available, as mentioned already, the user can click the Define Custom Colors >> button. If you want to control the user's ability to expand the dialog box, use the Boolean AllowFullOpen property. When this property is set to True, which is its default value, the dialog box appears in its regular size but with the Define Custom Colors >> button enabled. If you want the user to be able to select only one of the preset colors and not have the ability to expand the dialog box, set the AllowFullOpen property to False. With this value, when the Color dialog box comes up, it is in its regular size but the Define Custom Colors >> button is disabled:

As mentioned already, by default, the Color dialog box displays in its regular size. You can control the regular or full size of the dialog using the Boolean FullOpen property. When its value is False, which is the default, the dialog appears regularly. If you want it to appear in its full size, set this property to True.

In our introduction to GDI+, we saw that the screen of a computer monitor uses a series of horizontal and vertical lines, the intersection of two perpendicular lines is a pixel. Each pixel holds one color. Of course, two adjacent pixels can hold the same color or each can hold a different color.

A bitmap is a series of colored adjacent pixels. Put another way, for a group of pixels to be considered a bitmap, these pixels must constitute a group. A bitmap is made by specifying the color of each pixel. This means that the pictures we have used so far were simply made of pixels and each pixel held an appropriate color.

If you decide to create or design a picture using the tool resources in Microsoft Visual C++ available from the Resource View (or the Solution Explorer), you would experiment, on a large scale the ability to specify the color of each individual pixel, using (a limited list of) colors:

Actually, when you have a bitmap, you can access any pixel of the picture and then you can either specify its color or get its current color.

To allow you to specify the color of a pixel, the Bitmap class provides a method named SetPixel and its syntax is:

public void SetPixel(int x, int y,	Color color);

The x and y arguments represent the left and top values of the location of the pixel. The 3rd argument specifies the new color that the pixel will hold. Here is an example:

private void Form1_Paint(object sender, PaintEventArgs e)
{
        Bitmap bgDrawingArea = new Bitmap(Width, Height);
        e.Graphics.DrawImage(bgDrawingArea, 0, 0);

        for (int i = 0; i < Width; i += 20)
             for (int j = 0; j < Height; j += 20)
             {
                    bgDrawingArea.SetPixel(i, j, Color.White);

                    Graphics painter = Graphics.FromHwnd(Handle);
                    painter.DrawImage(bgDrawingArea, 0, 0);
             }
}

We previously mentioned that a picture was a series of pixels with each pixel holding a color. As opposed to specifying the color of a pixel, you can retrieve its color. To support this, the Bitmap class is equipped with a method named GetPixel. Its syntax is:

public Color GetPixel(int x, int y);

The x and y arguments represent the left and top values of the location of the pixel whose color you want to get. This method returns the color of that pixel.