

Windows Programming
.NET 1.1+

The Colour Selector Dialog Box

The ColorDialog class generates one of the .NET framework's standard dialog boxes. This common dialog box allows the user to select a colour from a predefined palette and edit that palette to add their own reusable colours.

Common Dialog Boxes

In previous articles we have seen several of the common dialog boxes provided by the .NET framework. These allow you to request specific information from the user, relating to files, fonts, colours and printing, without the need to create new forms. They are also familiar to most users, making the learning process for your applications easier. The common dialog boxes are:


In this article we'll look at the colour selection dialog box.

ColorDialog Class

The colour selection dialog box is provided by the ColorDialog class. The dialog provides a set of standard colours, from which the user can make a selection. It can be expanded to show a set of controls that allow selection of colours graphically, or using numeric values and the RGB or HSL colour models. These colours can be added to the selection area in a section for custom colours.

Let's demonstrate the dialog box with a new project. Create a Windows Forms solution in Visual Studio and add a button to the automatically generated window. Name the button "PickColourButton". With the button in place, double-click it to generate the Click event and link it to the following method:

private void PickColourButton_Click(object sender, EventArgs e)
    using (ColorDialog cd = new ColorDialog())
        if (cd.ShowDialog() == DialogResult.OK)
            BackColor = cd.Color;

The code above creates a new ColorDialog instance when the user clicks the button. The call to the ShowDialog method displays the box, in the same manner as for other common dialog boxes. The conditional statement checks if the user clicked the OK button. If they did, the selected colour from the dialog box is read from the Color property and applied to the form's background.

Run the program and click the button to see the dialog box. Try selecting a colour and clicking the OK button to apply it. Note that the background colour is not applied if you use the Cancel button.


Next, open the dialog box again and click the "Define Custom Colours" button. The dialog box expands to show a colour picker and some numeric text boxes that allow you to set the colour using red, green and blue elements or hue, saturation and lightness. If you set a colour at the right side of the box, clicking the "Add to Custom Colours" button copies it into the "Custom Colours" section at the left. This area is designed to show a set of commonly used non-standard colours for selection.

Expanded ColorDialog

31 July 2015