This file shows how to use a custom cell renderer in a Gtk Treeview to build complex layouts

CellRenderer-treeview.vala

class MyCellRenderer : Gtk.CellRenderer {
	// icon property set by the tree column
	public Gdk.Pixbuf icon { get; set; }
	public string text { get; set; }
	public int progress { get; set; }

	public int Padding;

	private Gtk.CellRendererPixbuf icon_renderer;
	private Gtk.CellRendererText text_renderer;
	private Gtk.CellRendererProgress progress_renderer;

	public MyCellRenderer () {
		GLib.Object ();
		icon_renderer = new Gtk.CellRendererPixbuf();
		text_renderer = new Gtk.CellRendererText();
		progress_renderer = new Gtk.CellRendererProgress();
	}

	// get_size method, always request a 50x50 area
	public override void get_size (Gtk.Widget widget, Gdk.Rectangle? cell_area,
								   out int x_offset, out int y_offset,
								   out int width, out int height)
	{
		x_offset = 0;
		y_offset = 0;
		width = 100;
		height = 50;
		Padding = 10;
	}

	// render method
	public override void render (Cairo.Context ctx, Gtk.Widget widget,
								 Gdk.Rectangle background_area,
								 Gdk.Rectangle cell_area,
								 Gtk.CellRendererState flags)
	{
		Gdk.Rectangle icon_area = Gdk.Rectangle();
		Gdk.Rectangle text_area = Gdk.Rectangle();
		Gdk.Rectangle prog_area = Gdk.Rectangle();
		Gdk.Rectangle fill_area;
		Gtk.Requisition size;

		/* individual size */
		text_renderer.@set("text", text);
		text_renderer.get_preferred_size(widget, null, out size);

		text_area.width = size.width;
		text_area.height = size.height;

		icon_renderer.@set("pixbuf", icon);
		icon_renderer.get_preferred_size(widget, null, out size);

		icon_area.width	= size.width;
		icon_area.height = size.height;

		progress_renderer.@set("value", progress);
		progress_renderer.get_preferred_size(widget, null, out size);

		prog_area.width	= size.width;
		prog_area.height = size.height;

		/* cell layout */
		fill_area = cell_area;
		fill_area.x += (int) xpad;
		fill_area.y += (int) ypad;

		fill_area.width -= (int) xpad *2;
		fill_area.height -= (int) ypad *2;

		icon_area.x = fill_area.x;
		icon_area.y = fill_area.y + (fill_area.height - icon_area.height) /2;

		text_area.x = icon_area.x + icon_area.width + Padding;
		text_area.y = fill_area.y;
		text_area.width = fill_area.width - icon_area.width - Padding;

		prog_area.x = icon_area.x + icon_area.width + Padding;
		prog_area.y = text_area.y + text_area.height + Padding;
		prog_area.width = fill_area.width - icon_area.width - Padding;

		/* render the cell */
		text_renderer.render(ctx, widget, background_area, text_area, flags);
		icon_renderer.render(ctx, widget, background_area, icon_area, flags);
		progress_renderer.render(ctx, widget, background_area, prog_area, flags);

	}
}

enum  Columns {
	ICON,
	TEXT,
	PROGRESS,
	N_COLUMNS
}

public static int main (string[] args) {
	Gtk.init (ref args);

	var icon_theme = Gtk.IconTheme.get_default();
	
	// The TreeView:
	Gtk.TreeView tv = new Gtk.TreeView ();
	Gtk.ListStore tm = new Gtk.ListStore (Columns.N_COLUMNS, typeof (Gdk.Pixbuf), typeof (string), typeof(int));
	tv.headers_visible = false;
	tv.set_model (tm);

	Gtk.CellRenderer renderer = new MyCellRenderer ();
	Gtk.TreeViewColumn col = new Gtk.TreeViewColumn ();
	col.pack_start (renderer, true);
	col.set_title ("1st column");
	col.add_attribute (renderer, "icon", Columns.ICON);
	col.add_attribute(renderer, "text", Columns.TEXT);
	col.add_attribute(renderer, "progress", Columns.PROGRESS);
	tv.append_column (col);

	// Append data to our model:
	Gtk.TreeIter ti;
	
	tm.append (out ti);
	tm.set (ti, Columns.ICON, icon_theme.load_icon("stock_lock-broken", 48, Gtk.IconLookupFlags.FORCE_SVG),
				Columns.TEXT, "asd",
				Columns.PROGRESS, 90,
				-1); 

	tm.append (out ti);
	tm.set (ti, Columns.ICON, icon_theme.load_icon("gnome-mime-application-ogg", 48, Gtk.IconLookupFlags.FORCE_SVG),
				Columns.TEXT, "lkj",
				Columns.PROGRESS, 45,
				-1); 

	tm.append (out ti);
	tm.set (ti, Columns.ICON, icon_theme.load_icon("gnome-mime-application-pdf", 48, Gtk.IconLookupFlags.FORCE_SVG),
		    Columns.TEXT, "kukduu",
		    Columns.PROGRESS, 20,
		    -1); 

	// The main window:
	Gtk.Window win = new Gtk.Window ();
	win.set_default_size (400, 100);
	win.destroy.connect (Gtk.main_quit);
	win.add (tv);
	win.show_all ();

	Gtk.main ();
	return 0;
}

image preview http://imgur.com/pXqmaqn