Search code examples
pythontreeviewgtk3pygobjectgdkpixbuf

Show icon or color in Gtk TreeView tree

I am having difficulty loading a file or displaying a colour in one of the columns of a Gtk TreeView (Python binding of GTK3). An example taken from QGIS shows a icon in the first row and a blue circle in the second row. The colour is taken from the layer properties:

enter image description here

My code looks like this but does not load the icon.png file in the same directory:

#!/usr/bin/python3
from gi.repository import Gtk, Gdk, GdkPixbuf

class MyWindow(Gtk.Window):
    def __init__(self):
        Gtk.Window.__init__(self)
        self.set_default_size(200, 200)

        self.liststore = Gtk.ListStore(GdkPixbuf.Pixbuf, str)
        self.treeview = Gtk.TreeView(model=self.liststore)

        symbol1 = GdkPixbuf.Pixbuf.new_from_file("icon.png")
        self.liststore.append([symbol1, "This is a symbol1"])

        symbol2 = Gtk.IconTheme.get_default().load_icon("gtk-cut", 64, 0)
        self.liststore.append([symbol2, "This is symbol2"])

        px_renderer = Gtk.CellRendererPixbuf()
        px_column = Gtk.TreeViewColumn("Icon", px_renderer)
        self.treeview.append_column(px_column) 

        str_renderer = Gtk.CellRendererText()
        str_column = Gtk.TreeViewColumn("Name", str_renderer, text=1)
        self.treeview.append_column(str_column)

        self.add(self.treeview)

win = MyWindow()
win.connect("delete-event", Gtk.main_quit)
win.show_all()
Gtk.main()

The documentation for GTK3 pixbuf is here:

Older examples for PyGTK are here, but something has really changed in how this is handled:

Solution

  • This problem can resolve similar as PyGTK2.0, you need to attach two objects of CellRendererText and CellRendererPixbuf on the one object of TreeViewColumn and then call set_cell_data_func method of column to set data returner function of cells. this is tiny complex(see below code):

    from gi.repository import Gtk, Gdk, GdkPixbuf

class MyWindow(Gtk.Window):
    def __init__(self):
        Gtk.Window.__init__(self)
        self.set_default_size(200, 200)

        self.liststore = Gtk.ListStore(str, str)
        self.treeview = Gtk.TreeView(model=self.liststore)

        self.liststore.append(["icon.png", "This is a symbol1"])

        px_renderer = Gtk.CellRendererPixbuf()
        px_column = Gtk.TreeViewColumn('')
        px_column.pack_start(px_renderer, False)
        str_renderer = Gtk.CellRendererText()
        px_column.pack_start(str_renderer, False)
        # set data connector function/method
        px_column.set_cell_data_func(px_renderer, self.get_tree_cell_pixbuf)
        px_column.set_cell_data_func(str_renderer, self.get_tree_cell_text)
        self.treeview.append_column(px_column)

        self.add(self.treeview)

    def get_tree_cell_text(self, col, cell, model, iter, user_data):
        cell.set_property('text', model.get_value(iter, 1))

    def get_tree_cell_pixbuf(self, col, cell, model, iter, user_data):
        cell.set_property('pixbuf', GdkPixbuf.Pixbuf.new_from_file(model.get_value(iter, 0)))

if __name__ == '__main__':
    win = MyWindow()
    win.connect("delete-event", Gtk.main_quit)
    win.show_all()
    Gtk.main()

    you can use documents of pygtk2.0 about TreeViewColumn.set_cell_data_func method and read important page about CellRenderers and special properties of PyGTK2.0 that can useful on version 3 of PyGTK :)