123. How to display a list of thumbnail images using GtkIconView?

Problem

You want to display a list of thumbnail images for selection as shown below:

How to display a list of thumbnail images using GtkIconView?


Solution

You can display a list of images or icons easily with the use of GtkIconView. A GtkIconView is very similar to a GtkTreeView. You store the data in a GtkListStore. Then instead of displaying it using GtkTreeView, we use a GtkIconView. The GtkIconView will display the image in a grid format with a label below each image.

Note that the GtkIconView supports "rubberband selection" of multiple images by dragging the mouse pointer as shown below.


Sample Code

Note: The following image files are required by the sample code below. Please save a copy of the image files and put them in the same directory where you store the sample code.

 square_red.jpg
 square_yellow.jpg
 square_green.jpg
 square_blue.jpg
 square_blue2.jpg
 square_blue3.jpg

1   
2   
3   
4   
5   
6   
7   
8   
9   
10   
11   
12   
13   
14   
15   
16   
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   
<?php
$window = new GtkWindow();
$window->set_size_request(400, 240);
$window->connect_simple('destroy', array('Gtk','main_quit'));

$window->add($vbox = new GtkVBox());

// display title
$title = new GtkLabel("Display thumbnail images using GtkIconView");
$title->modify_font(new PangoFontDescription("Times New Roman Italic 10"));
$title->modify_fg(Gtk::STATE_NORMAL, GdkColor::parse("#0000ff"));
$title->set_size_request(-1, 40);
$vbox->pack_start($title, 0, 0);
$vbox->pack_start(new GtkLabel(), 0, 0); // add a small gap

// Set up a scroll window
$scrolled_win = new GtkScrolledWindow();
$scrolled_win->set_policy( Gtk::POLICY_AUTOMATIC, Gtk::POLICY_AUTOMATIC);

if (defined("GObject::TYPE_STRING")) {
    $model = new GtkListStore(GdkPixbuf::gtype, GObject::TYPE_STRING); // note 1
} else {
    $model = new GtkListStore(GdkPixbuf::gtype, Gtk::TYPE_STRING); // note 1
}

foreach(array('square_red.jpg', 'square_yellow.jpg', 'square_green.jpg',
'square_blue.jpg', 'square_blue2.jpg', 'square_blue3.jpg') as $img) {
    $pixbuf = GdkPixbuf::new_from_file($img); // note 2
    $model->append(array($pixbuf, $img)); // note 3
}

$view = new GtkIconView($model); // note 4
$view->set_pixbuf_column(0); // col 0 of the model
$view->set_text_column(1); // col 1 of the model
$view->set_selection_mode(Gtk::SELECTION_MULTIPLE); // note 5
$view->set_columns(0); // note 6
$view->set_item_width(120); // note 7

$scrolled_win->add($view);
$vbox->pack_start($scrolled_win);
$window->show_all();
Gtk::main();
?>

Output

As shown above.

 

Explanation

  1. Create the list model.
  2. Load each image using GtkImage::new_from_file (img_file).
  3. Populate the model.
  4. Create a new icon view.
  5. Enable multiple selection.
  6. GtkIconview::set_columns(): sets the number of columns in the icon view. Here we put 0 to let php-gtk automatically determine the number of columns based on window width. Try changing the window size, you will see that the number of columns will be adjusted automatically.
  7. GtkIconview::set_item_width(): sets the width of each column.

Related Links

Add comment


Security code
Refresh