Skip to main content
Table of Contents

Color Selection

TTMSFNCColorPicker combines a compact editor with a drop-down color selector. TTMSFNCColorSelector is the standalone selector grid; the picker wraps it in a popup. Use the picker when a full visible palette would consume too much form space.

TTMSFNCColorSelector preset colours

Set the Initial Color

Set SelectedColor before the picker is shown. The selected color can then be applied to graphics, styles, or other UI state when the user confirms a different color.

Select a ColorPascalC++
TMSFNCColorPicker1.SelectedColor := gcRed;
TMSFNCColorPicker1.OnColorSelected := TMSFNCColorPicker1ColorSelected;

TMSFNCColorPicker1->OnColorSelected = TMSFNCColorPicker1ColorSelected;
Color picker initialised to red, with the drop-down open and the red swatch highlighted in the simple palette Color picker initialised to red, with the drop-down open and the red swatch highlighted in the simple palette

Size the Drop-Down

Use DropDownWidth and DropDownHeight when the default selector size is too small for the available colors or mode.

Size the Drop-DownPascalC++
TMSFNCColorPicker1.DropDownWidth := 260;
TMSFNCColorPicker1.DropDownHeight := 220;
TMSFNCColorPicker1.CloseOnSelection := True;

TMSFNCColorPicker1->DropDownHeight = 220;
TMSFNCColorPicker1->CloseOnSelection = true;

Apply Selected Colors

Handle OnColorSelected to keep the picker and the rest of the form synchronized.

Apply Selected ColorsPascalC++
procedure TForm1.TMSFNCColorPicker1ColorSelected(Sender: TObject; AColor: TTMSFNCGraphicsColor);
begin
  TMSFNCColorPicker1.SelectedColor := AColor;
end;

void __fastcall TForm1::TMSFNCColorPicker1ColorSelected(TObject *Sender,
  Fmx::Tmsfncgraphicstypes::TTMSFNCGraphicsColor AColor)
{
  TMSFNCColorPicker1->SelectedColor = AColor;
}

Combining initial color, drop-down sizing, and live application

The following example pre-selects a colour that matches the current panel background, sizes the drop-down to show a larger palette, and applies the chosen colour immediately:

Inline example 1PascalC++
procedure TForm1.FormCreate(Sender: TObject);
begin
  // Initialize to match the current panel colour
  TMSFNCColorPicker1.SelectedColor := Panel1.Color;
  // Show a larger palette
  TMSFNCColorPicker1.DropDownWidth  := 300;
  TMSFNCColorPicker1.DropDownHeight := 200;
end;

procedure TForm1.TMSFNCColorPicker1ColorSelected(
  Sender: TObject; AColor: TAlphaColor);
begin
  Panel1.Color := AColor;
  lblHex.Caption := '#' + IntToHex(AColor, 8);
end;

void __fastcall TForm1::FormCreate(TObject *Sender)
{
  TMSFNCColorPicker1->SelectedColor = Panel1->Color;
  TMSFNCColorPicker1->DropDownWidth = 300;
  TMSFNCColorPicker1->DropDownHeight = 200;
}

void __fastcall TForm1::TMSFNCColorPicker1ColorSelected(TObject *Sender,
  System::Uitypes::TAlphaColor AColor)
{
  Panel1->Color = AColor;
  lblHex->Text = L"#" + IntToHex(AColor, 8);
}
Color picker initialised to the panel's teal colour, with an enlarged extended-palette drop-down open next to the panel and its hex label Color picker initialised to the panel's teal colour, with an enlarged extended-palette drop-down open next to the panel and its hex label

See Also