The wxColourPickerCtrl (wxWidgets: wxColourPickerCtrl Class Reference) control implements a control to select a color.


The wxColourPickerCtrl control is easy to use. Below we show a simple example of a wxColourPickerCtrl with an event handler that updates the foreground color of a wxTextCtrl control when the selected color is changed. The example is a simple modification of the MinimalApp2 example we presented in the minimal application tutorial.The full source for this example is available from our GitHub repository: wxWidgetsTutorials/PickerControls/WxColourPickerCtrl1.

The source files are shown below. The following modifications were made:

  • A wxTextCtrl and wxColourPickerCtrl have been added to the frame.
  • The OnColourChanged method is the event handler for the wxColourPickerCtrl. It updates the foreground color of the wxTextCtrl to match the currently selected color.
  • The event table links the wxColourPickerCtrl and its event handler.
 File: PickerControls/WxColourPickerCtrl1/src/WxColourPickerCtrl1Frame.h

#include <wx/frame.h>
#include <wx/clrpicker.h>
#include <wx/textctrl.h>

class WxColourPickerCtrl1Frame : public wxFrame
    WxColourPickerCtrl1Frame(const wxString& title);

    void OnColourChanged(wxColourPickerEvent& evt);

    wxTextCtrl* m_textCtrl;


 File: PickerControls/WxColourPickerCtrl1/src/WxColourPickerCtrl1Frame.cpp
#include "WxColourPickerCtrl1Frame.h"
#include "WindowIDs.h"
#include <wx/panel.h>
#include <wx/sizer.h>

WxColourPickerCtrl1Frame::WxColourPickerCtrl1Frame(const wxString& title)
    : wxFrame(NULL, wxID_ANY, title), m_textCtrl(0)
    // Create a top-level panel to hold all the contents of the frame
    wxPanel* panel = new wxPanel(this, wxID_ANY);

    // Create a wxTextCtrl to have some text we can select the color of
    m_textCtrl = new wxTextCtrl(panel, wxID_ANY, "Some text of the selected color.",
        wxDefaultPosition, wxSize(200, wxDefaultCoord));

    // Create a wxColourPickerCtrl control
    wxColourPickerCtrl* colourPickerCtrl = new wxColourPickerCtrl(panel, ColourPickerID);

    // Set up the sizer for the panel
    wxBoxSizer* panelSizer = new wxBoxSizer(wxHORIZONTAL);
    panelSizer->Add(m_textCtrl, 0, wxEXPAND | wxALL, 15);
    panelSizer->Add(colourPickerCtrl, 0, wxEXPAND | wxALL, 15);

    // Set up the sizer for the frame and resize the frame
    // according to its contents
    wxBoxSizer* topSizer = new wxBoxSizer(wxHORIZONTAL);
    topSizer->Add(panel, 1, wxEXPAND);

void WxColourPickerCtrl1Frame::OnColourChanged(wxColourPickerEvent& evt)
    // Use the wxColourPickerEvent::GetColour() function to get the selected
    // color and set the color of the text control accordingly.

// Add the event handler to the event table. As you can see we use the
// window ID to link the event handler to the wxColourPickerCtrl we created.
wxBEGIN_EVENT_TABLE(WxColourPickerCtrl1Frame, wxFrame)
    EVT_COLOURPICKER_CHANGED(ColourPickerID, WxColourPickerCtrl1Frame::OnColourChanged)

The application is shown below. Figure 1 shows the application at startup, Figure 2 shows the dialog that is launched when the user presses the colour picker button and Figure 3 shows the application after the selected colour was changed.

Figure 1: The WxColourPickerCtrl1 application at startup

Figure 2: The WxColourPickerCtrl1 color selection dialog

Figure 3: The WxColourPickerCtrl1 after the selected colour has been changed

The rest of the source files don't contain significant changes but are shown here for completeness.

 File: PickerControls/WxColourPickerCtrl1/src/WindowIDs.h

#include <wx/defs.h>

const wxWindowID ColourPickerID = wxID_HIGHEST + 1;

 File: PickerControls/WxColourPickerCtrl1/src/WxColourPickerCtrl1App.h

#include <wx/app.h>

class WxColourPickerCtrl1App : public wxApp
    virtual bool OnInit();

 File: PickerControls/WxColourPickerCtrl1/src/WxColourPickerCtrl1App.cpp
#include "WxColourPickerCtrl1App.h"
#include "WxColourPickerCtrl1Frame.h"


bool WxColourPickerCtrl1App::OnInit()
    WxColourPickerCtrl1Frame* frame = new WxColourPickerCtrl1Frame("WxColourPickerCtrl1");
    return true;