Gtkmm: how to add static column headers to a Gtk::ListBox

Question

I have a Gtk::ListBox in my application which currently holds Gtk::ListBoxRow objects which themselves hold:

1. A Gtk::Entry (otherwise known as an editbox).
2. A Gtk::ColorButton .

The current visual layout for the widget is as such:

-------------------------
| Entry1 | ColorButton1 |
-------------------------
| Entry2 | ColorButton2 |
-------------------------
...

I would like to add a static header (I don't need it to change during execution) to both of the columns. Something like:

-------------------------
| Title1 |    Title2    | <-- Notice how the headers are aligned to the columns below.
-------------------------
| Entry1 | ColorButton1 |
-------------------------
| Entry2 | ColorButton2 |
-------------------------
...

where Title1 and Title2 are simply some sort of labels. I have not found any example of how to do this online and the documentation lacks clarity (in my opinion) when it comes to Gtk::ListBox es.

How can I do this?

PS I will accept answers in C or Python as well, or a link to a clear example online.

Answer 1

I had the same problem. I figured it out using vala, and I am sure the same approach can be easily implemented using c++, since all oop features used here are also available in c++:

A ListBoxRow can have a header, so we can add a header at the first row. Define a derived class from ListBoxRow, and polulate your row widgets in it.

public class ListBoxRowWithData: ListBoxRow{

    public int id;
    public int email;
    public int name;

    public Gtk.Label label_id;
    public Gtk.Entry entry_email;
    public Gtk.Entry entry_name;

    // these static variables will hold widths of your widgets in your row
    public static int id_width;
    public static int em_width;
    public static int nm_width;
    ...

    public ListBoxRowWithData (int _id, string _email, string _name) {
        id = _id; // you can also use an initializer list in c++
        email = _email;
        name = _name;

        //create your widgets
        label_id = new Gtk.Label(id.to_string());
        entry_email = new Gtk.Entry(); entry_email.set_text(email);
        entry_name = new Gtk.Entry(); entry_name.set_text(name);

        // pack your widgets in a box
        Gtk.Box rbox = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 0);
        rbox.pack_start (label_id, true, true, 0); // trues and falses must match with headers' trues and falses
        rbox.pack_start (entry_email, true, true, 0);
        rbox.pack_start (entry_name, true, true, 0);
        ...
        this.add(rbox);
    }
    // using below method, we will get widths of the first row, and set them
    // as widths of the header labels.

    public void init_widths(){
        // in vala and c++ static ints are automatically set to 0 when you declare them
        if(id_width == 0){
            id_width = label_id.get_allocated_width();
            em_width = entry_email.get_allocated_width();
            nm_width = entry_name.get_allocated_width();
        }
    }
}

and define below method in the window class containing your listbox:

        public void align_my_header(){
        // listbox has no built-in something like a table header
        // my solution is to set a row header to the first row,
        // by updating title sizes based on row contents.

        // an arrow function is used here. you can use class methods.
        listbox.set_header_func((_row, _before)=>{
            // Dynamic Type Casting from base class to derived class
            var row = _row as ListBoxRowWithData;

            // create your "fake" header here.
            var fake_header = new Gtk.Box(Gtk.Orientation.HORIZONTAL, 0);

            // those below are header labels
            var id = new Gtk.Label("id");
            var em = new Gtk.Label("email");
            var nm = new Gtk.Label("name");

            fake_header.pack_start (id, true, true, 0); // trues and falses must match with row widgets' trues and falses
            fake_header.pack_start (em, true, true, 0);
            fake_header.pack_start (nm, true, true, 0);

            //check if the row is the first one (invariant to sort operations which is nice), we don't want other rows having headers
            if(row.get_index()==0){
                            // When realize signal is emmitted, widgets allocates their widths already
                fake_header.realize.connect(()=>{ 
                    // we get widgets' widths, and set them as header widths here
                    row.init_widths();
                    id.set_size_request(ListBoxRowWithData.id_width, -1);// access static varibles here
                    em.set_size_request(ListBoxRowWithData.em_width, -1);
                    nm.set_size_request(ListBoxRowWithData.nm_width, -1);

                });

                row.set_header(fake_header);
                fake_header.show_all();

            }else{
                row.set_header(null);
            }

        });
    }
// populate your listbox in your window class where you need, in a loop for instance:
listbox.add (new ListBoxRowWithData(id, email, name));

and finally call align_my_header() method in your constructor of window class after creation of your listbox.

A full implementation can be seen here: https://gitlab.com/aferust/sqlitewtview/blob/master/src/window2.vala https://gitlab.com/aferust/sqlitewtview/blob/master/win_res/sshot2.png