Xfce Foundation Classes
 « Main Page | Index

Color Selection

The color selection widget is, not surprisingly, a widget for interactive selection of colors. This composite widget lets the user select a color by manipulating RGB (Red, Green, Blue) and HSV (Hue, Saturation, Value) triples. This is done either by adjusting single values with sliders or entries, or by picking the desired color from a hue-saturation wheel/value bar. Optionally, the opacity of the color can also be set.

The color selection widget currently emits only one signal, color_changed, which is emitted whenever the current color in the widget changes, either when the user changes it or if it's set explicitly through Gtk::ColorSelection::set_color().

Lets have a look at what the color selection widget has to offer us. The widget comes in two flavours: Gtk::ColorSelection and Gtk::ColorSelectionDialog.


You'll probably not be using this constructor directly. It creates an orphan ColorSelection widget which you'll have to parent yourself. The ColorSelection widget inherits from the Gtk::VBox.

explicit ColorSelectionDialog(const String& title);

These are the most common color selection constructors. Both constructors create a ColorSelectionDialog, the first with the default title which is just the program name and the second with the 'title' specified. A ColorSelectionDialog consists of a Frame containing a ColorSelection widget, an HSeparator and an HBox with three buttons, "Ok", "Cancel" and "Help". You can reach these buttons by using one of the corresponding accessors:

Gtk::Button* ok_button() const;

Gtk::Button* cancel_button() const;

Gtk::Button* help_button() const;

The color selection widget supports adjusting the opacity of a color (also known as the alpha channel). This is disabled by default. Calling the following method with 'has_opacity' set to true enables opacity. Likewise, has_opacity set to false will disable opacity.

void set_has_opacity_control(bool has_opacity);

You can set the current color explicitly by calling Gtk::ColorSelection::set_current_color() with a reference to a Gdk::Color. Setting the opacity (alpha channel) is done with Gtk::ColorSelection::set_current_alpha(). The alpha value should be between 0 (fully transparent) and 65636 (fully opaque).

void set_current_color(const Gdk::Color& color);

void set_current_alpha(unsigned short alpha);

When you need to query the current color, typically when you've received a 'color_changed' signal, you use these methods:

Gdk::Color get_current_color() const;

unsigned short get_current_alpha() const;

Color Selection Example

Here's a simple example demonstrating the use of the ColorSelectionDialog. The program displays a window containing a drawing area. Clicking on it opens a color selection dialog, and changing the color in the color selection dialog changes the background color of the window.

The header file for the Color Selection example is <colorselection.hh>:

#include <xfc/main.hh>
#include <xfc/gtk/colorselection.hh>
#include <xfc/gtk/drawingarea.hh>
#include <xfc/gtk/window.hh>
#include <xfc/gdk/color.hh>

using namespace Xfc;

class ColorSelectionWindow : public Gtk::Window
    Gdk::Color color;
    Gtk::DrawingArea *area;

    bool on_drawing_area_event(const Gdk::Event& event);
    void on_color_changed(Gtk::ColorSelection *colorsel);

    virtual ~ColorSelectionWindow();

and then source file is <colorselection.cc>:

#include "colorselection.hh"

    set_title("Color Selection Example");

    // Create drawing area
    area= new Gtk::DrawingArea(250, 200);

    // Set the initial background color    and events to receive
    color.set(0, 0, 65535);
    area->modify_bg(Gtk::STATE_NORMAL, color);
    area->signal_event().connect(sigc::mem_fun(this, &ColorSelectionWindow::on_drawing_area_event));

    // Add drawing area to main window


ColorSelectionWindow::on_drawing_area_event(const Gdk::Event& event)
    using namespace sigc;
    bool handled = false;

    if (event.type() == Gdk::BUTTON_PRESS)
        handled = true;
        Gtk::ColorSelectionDialog *dialog = new Gtk::ColorSelectionDialog("Select background color");
        Gtk::ColorSelection *colorsel = dialog->colorsel();

        // Connect to the "color_changed" signal
        colorsel->signal_color_changed().connect(bind(mem_fun(this, &ColorSelectionWindow::on_color_changed), colorsel));

        // Show the dialog
        if (dialog->run() == Gtk::RESPONSE_OK)
            color = colorsel->get_current_color();
             area->modify_bg(Gtk::STATE_NORMAL, color);

    return handled;

ColorSelectionWindow::on_color_changed(Gtk::ColorSelection *colorsel)
    Gdk::Color new_color = colorsel->get_current_color();
    area->modify_bg(Gtk::STATE_NORMAL, new_color);

int main (int argc, char *argv[])
    using namespace Main;

    init(&argc, &argv);

    ColorSelectionWindow window;

    return 0;

Compiling Color Selection

If you compiled and installed XFC yourself, you will find the source code for Color Selection in the <examples/howto/colorselection> source directory along with a Makefile. If XFC came pre-installed, or you installed it from an RPM package, you will find the source code in the </usr/share/doc/xfcui-X.X/examples/howto/colorselection> subdirectory. In this case you will have to create the Makefile yourself (replace X.X with the version number of the libXFCui library you have installed).

To create a Makefile for Color Selection, add the following lines to a new text file and save it using the name "Makefile":

CC = g++

CFLAGS = -Wall -O2

colorselection: colorselection.cc colorselection.hh
    $(CC) colorselection.cc -o colorselection $(CFLAGS) `pkg-config xfcui-X.X --cflags --libs`

    rm -f *.o colorselection

If you cut and paste these lines make sure the whitespace before $(CC) and rm is a tab character. When you compile and run this program you will see the following window appear:

If you press the mouse button down inside the client area of this window a color selection dialog appears. Changing the selected color or hue in this dialog will update the background color of the parent window. Click the OK button to make the color selection permanent.

Copyright © 2004-2005 The XFC Development Team Top
XFC 4.4