400. How to set up menu items with background colors?

Problem

Suppose you would like to set up some menu items with different background colors as shown below:

How to set up menu items with background colors?


Solution

  • A standard GtkMenuItem holds a GtkLabel.
  • As explained in How to set the background color of GtkLabel? GtkLabel is one of those "transparent" widgets. This means that you can't set the background color of a GtkLabel.
  • To have a menuitem with colored background, you need to attach a GtkEventBox to the GtkMenuItem, then stuff the GtkLabel inside the GtkEventBox.

Sample Code

1   
 2   
 3   
 4   
 5   
 6   
 7   
 8   
 9   
 10   
 11   
 12   
 13   
 14   
 15   
 17   
 18   
 19   
 20   
 21   
 22   
 23   
 24   
 25   
 26   
 27   
 28   
 29   
 30   
 31   
 32   
 34   
 35   
 36   
 37   
 38   
 39   
 40   
 41   
 42   
 43   
 44   
 45   
 46   
 47   
 48   
 49   
 51   
 52   
 53   
 54   
 55   
 57   
 58   
 59   
 60   
 61   
 62   
 63   
 64   
 65   
 66   
 67   
 68   
 69   
 70   
 71   
 72   
 73   
 74   
 76   
 77   
 78   
 79   
 80   
 81   
 82   
 83   
 84   
 85   
 86   
 87   
 89   
 95   
 96   
 97   
 98   
102   
103   
104   
105   
106   
107   
108   
109   
110   
111   
112   
113   
114   
115   
116   
117   
118   
119   
120   
121   
122   
123   
124   
125   
126   
127   
128   
129   
131   
132   
133   
134   
135   
137   
138   
139   
140   
141   
143   
144   
145   
146   
147   
148   
<?php
$window = new GtkWindow();
$window->set_title($argv[0]);
$window->set_size_request(400, 150);
$window->connect_simple('destroy', array('Gtk','main_quit'));
$window->add($vbox = new GtkVBox());
$accel_group = new GtkAccelGroup(); // create a new accelerator
$window->add_accel_group($accel_group); // attach it to the window

// define menu definition
$menu_definition = array(
    '_File' => array('_New|N', '_Open|O', '_Close|C', '<hr>',
                    '_Save|S', 'Save _As','<hr>', '_Quit'),
    '_Edit' => array('Cut|X', 'Copy|C', '_Paste|V', '<hr>',
                    'Select All|A', '<hr>', '_Undo|Z'),
    '_Test' => array('Test_1|1', 'Test_2|2', 'Test_3|3', '<hr>',
                array('Selection 1', 'Selection 2', 'Selection 3'),
                '<hr>', 'Test_4|4'),
    '_Background' => array('Red|R', 'Green|G', 'Blue|B', 'Yellow|Y')
);

$color_map = array('Red' => '#FF3300',
    'Green' => '#66FF66',
    'Blue' => '#6666FF',
    'Yellow' => '#FFFF33');
setup_menu($vbox, $menu_definition);

// display title
$title = new GtkLabel("Menu items with background colors");
$title->modify_font(new PangoFontDescription("Times New Roman Italic 10"));
$title->modify_fg(Gtk::STATE_NORMAL, GdkColor::parse("#0000ff"));
$vbox->pack_start($title);
$vbox->pack_start(new GtkLabel(''));

$window->show_all();
Gtk::main();

// setup menu
function setup_menu($vbox, $menus) {
    global $accel_group;
    $menubar = new GtkMenuBar();
    $vbox->pack_start($menubar, 0, 0);
    foreach($menus as $toplevel => $sublevels) {
        $menubar->append($top_menu = new GtkMenuItem($toplevel));
        $menu = new GtkMenu();
        $top_menu->set_submenu($menu);
        foreach($sublevels as $submenu) {
            if (strpos("$submenu", '|') === false) {
                $accel_key = '';
            } else {
                list($submenu, $accel_key) = explode('|', $submenu);
            }

            if (is_array($submenu)) {
                $i=0;
                $radio[0] = null;
                foreach($submenu as $radio_item) {
                    $radio[$i] = new GtkRadioMenuItem($radio[0], $radio_item);
                    $radio[$i]->connect('toggled', "on_toggle");
                    $menu->append($radio[$i]);
                    ++$i;
                }
                $radio[0]->set_active(1); // select the first item
            } else {
                if ($submenu=='<hr>') {
                    $menu->append(new GtkSeparatorMenuItem());
                } else {
                    $submenu2 = str_replace('_', '', $submenu);
                    $submenu2 = str_replace(' ', '_', $submenu2);
                    $stock_image_name = 'Gtk::STOCK_'.strtoupper($submenu2);
                    if (defined($stock_image_name)) {
                        $menu_item = new GtkImageMenuItem(
                                        constant($stock_image_name));
                    } else {
                        if ($toplevel == '_Background') {
                            global $color_map;
                            $bgcolor = $color_map[$submenu];
                            $menu_item = setup_menuitem_with_bgcolor( 
                                            $submenu, $bgcolor); // note 1
                        } else {
                            $menu_item = new GtkMenuItem($submenu);
                        }
                    }
                    if ($accel_key!='') {
                        $menu_item->add_accelerator("activate", $accel_group,
                        ord($accel_key), Gdk::CONTROL_MASK, 1);
                    }

                    $menu->append($menu_item);
                    $menu_item->connect('activate', 'on_menu_select');
                }
            }
        }
    }
}

// setup menuitem with background color
function setup_menuitem_with_bgcolor($menuitem_label, $bgcolor) {
    $menu_item = new GtkMenuItem($menuitem_label);
    $label = $menu_item->child;
    $menu_item->remove($label); // note 2
    $eventbox = new GtkEventBox(); // note 3
    $label = new GtkLabel($menuitem_label);
    $label->set_alignment(0, 0.5);
    $eventbox->add($label); // note 4
    $eventbox->modify_bg(Gtk::STATE_NORMAL, 
        GdkColor::parse($bgcolor)); 
    $menu_item->add($eventbox);
    return $menu_item;
}

// process radio menu selection
function on_toggle($radio) {
    $label = $radio->child->get_label();
    $active = $radio->get_active();
    echo("radio menu selected: $label\n");
}

// process menu item selection
function on_menu_select($menu_item) {
    if (method_exists($menu_item->child, 'get_label')) {
        $item = $menu_item->child->get_label();
        echo "menu selected: $item\n";
        if ($item=='_Quit') Gtk::main_quit();
    } elseif ($menu_item->child->get_name()=='GtkEventBox') {
        $item = $menu_item->child->child->get_label(); // note 6
        echo "menu (with bgcolor) selected: $item\n";
    }
}

?>

Output

As shown above.
 

Explanation

The above makes use of the code from How to set up menu and radio menu - Part 3 - add accelerators?

What's new here:

  1. Set up menuitems with colored background.
  2. First remove the default GtkLabel.
  3. Then attach a GtkEventBox.
  4. Stuff a new GtkLabel in the GtkEventBox.
  5. Set the background color.
  6. Take note of how we retrieve back the label of the menuitem.

Related Links

Add comment

Security code
Refresh