GTK TreeViewColumn with icon and text

The other day I wanted to put both an icon and text in the same GTK+ TreeViewColumn, and I had absolutely no idea how to do that. So I Google’d and Google’d but had trouble finding any examples. I even downloaded the source code of the Gnome System Monitor – where exactly what I wanted exist – but that was mostly written in C++ which I know very little of.

But I’m stubborn, and after a while I found and example in Python which I managed to interpret. Even though I know very little Python it’s not that hard to follow, and the example was short.

In short what’s needed is packing two CellRenderers in the same TreeViewColumn. Quite logical when you know about it. The example below is in Vala:

15 lines of Vala
  1. var tree_view = new TreeView ();
  3. var col = new TreeViewColumn ();
  4. col.title = title;
  5. col.resizable = true;
  7. var crp = new CellRendererPixbuf ();
  8. col.pack_start (crp, false);
  9. col.add_attribute (crp, “pixbuf”, 0);
  11. var crt = new CellRendererText ();
  12. col.pack_start (crt, false);
  13. col.add_attribute (crt, “text”, 1);
  15. tree_view.insert_column (col, –1);

I hacked up a simple application that shows all installed programs – that has a .desktop entry I guess – in a list (the screenshot above). The sources is available at my Github repository.

Happy coding!