.NET Controls: The Color Dialog Box

To provide the selection of colors on Microsoft Windows applications, the operating system provides a common dialog box appropriate for such tasks. The Color dialog box is used for various reasons to let the user set or change a color of an object such as the background color of a control or the color used to paint an object.

When it displays, by default, the color 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 to either 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 a integral value that ranges from 1 to 255.

To support the color dialog box, the .NET Framework provides 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 make this dialog box available to the user, you can declare a ColorDialog variable, use the new operator to initialize it. To display the dialog box to the user, call the CommonDialog.ShowDialog() method. Here is an example:

using System;
using System.Drawing;
using System.Windows.Forms;

class Exercise : Form
{
	Button btnColor;
	ColorDialog dlgColor;

	public Exercise()
	{
		this.InitializeComponent();
	}

	private void InitializeComponent()
	{
		btnColor = new Button();
		btnColor.Location = new Point(10, 10);
		btnColor.Click += new EventHandler(btnColor_Click);
		
		dlgColor = new ColorDialog();

		this.Controls.Add(btnColor);
	}

	private void btnColor_Click(object sender, EventArgs e)
	{
		this.dlgColor.ShowDialog();
	}

	static int Main()
	{
		Application.Run(new Exercise());
		return 0;
	}
}

The most important and most obvious property of the Color dialog box is the selected color once the user has made a choice. When the user opens the dialog box, you can set the default color.  To set the default color of the dialog box when it displays to the user, assign a valid known name of a color to the ColorDialog.Color property. This would be done as follows:

this.dlgColor.Color = Color.Green;

When the user has finished using the Color dialog box and clicks OK, you can find out what color was selected by using the ColorDialog.Color property.

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 above, 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.