Creating Custom Color Editing Dialogs

• Dec 28, 2020
• 3 minutes to read

Color combo boxes (TcxColorComboBox and TcxDBColorComboBox controls) can be customized so that end-users are capable of selecting custom colors. To do this, the Properties.AllowSelectColor property must be set to True. In this instance, the editor displays an ellipsis button that invokes the standard or advanced color editor dialog. You may, however, want to provide a custom color editor dialog instead so as to change the appearance of the dialog or use a new dialog to restrict user input to a predefined range of colors.

To implement a custom color editor dialog for color combo boxes, you need to set the Properties.ColorDialogType property to cxcdtCustom. In this instance, the standard or advanced color editor dialog is not invoked when clicking the ellipsis button. Button clicks invoke the OnSelectCustomColor event. You need to handle this event to display your custom color editor dialog manually. This topic describes how to do this.

The example in this topic will create an application with two forms. One form will contain the color combo box control. Another form will provide a custom color editor dialog. It will allow users to select shades of blue. The TcxTrackBar control will be used to adjust the intensity of the blue channel. The color editor dialog will look as displayed below:

Follow the steps listed below to create the application.

• Create a new application. Place the TcxColorComboBox control on the form. Set its Properties.AllowSelectColor property to True and the Properties.ColorDialogType property to cxcdtCustom.

• Add a new form to the application. Place a TcxTrackBar control on it. Set its Properties.Min and Properties.Max properties to 0 and 255 respectively. Set its Properties.ShowTicks property to False.

• Add a TcxGroupBox control to the second form. This will be used to display the currently selected color’s sample. Modify the control’s properties as shown in the image below.

• Add OK and Cancel buttons to the form (TcxButton controls). Set their names to ‘btnOk‘ and ‘btnCancel‘ respectively. Write the following handlers for their OnClick events.

type
TForm2 = class(TForm)
// ...
public
  ColorAccepted: Boolean;
// ...
procedure TForm2.btnOkClick(Sender: TObject);
begin
  ColorAccepted := True;
  Close;
end;
procedure TForm2.btnCancelClick(Sender: TObject);
begin
  Close;
end;

• Declare the following function that calculates the color according to the track bar’s thumb position.

type
TForm2 = class(TForm)
// ...
public
  function GetColorByThumbPosition: TColor;
// ...
function TForm2.GetColorByThumbPosition: TColor;
begin
  Result := $10100 * cxTrackBar1.Position + $FF;
end;

• Write the following handlers for the OnCreate event of the form and the Properties.OnChange event of the track bar.

procedure TForm2.FormCreate(Sender: TObject);
begin
  ColorAccepted := False;
  cxGroupBox1.Color := GetColorByThumbPosition;
end;
procedure TForm2.cxTrackBar1Click(Sender: TObject);
begin
  cxGroupBox1.Color := GetColorByThumbPosition;
end;

• Now return to the main form and write the following handler for the color combo box’s Properties.OnSelectCustomColor event.

procedure TForm1.cxColorComboBox1PropertiesSelectCustomColor(
Sender: TObject; var AColor: TColor; var AColorDescription: string;
var AddToList: Boolean);
var frmEditor: TForm2;
begin
  frmEditor := TForm2.Create(Application);
  frmEditor.ShowModal;
  AColor := frmEditor.GetColorByThumbPosition;
  AddToList := frmEditor.ColorAccepted;
end;

• Run the application. Click on the color combo box’s ellipsis button to invoke the custom color editor dialog. Use the track bar to modify the color. Click the OK button to add the selected color to the combo box.