ListView with CheckButtons

Source Code

// ListViewCheckButtons.vala

public class Item : GLib.Object {
    public string name { get; set; }
    public bool checked { get; set; }

    public Item (string name, bool checked) {
        Object (
            name: name,
            checked: checked
        );
    }
}

public class ListViewCheckButtonsSample : Gtk.Application {
    public ListViewCheckButtonsSample () {
        Object (application_id: "com.example.ListViewCheckButtonsSample");
    }

    public override void activate () {
        var window = new Gtk.ApplicationWindow (this) {
            title = "ListView CheckButtons Sample",
            default_width = 280,
            default_height = 200
        };

        var items = new GLib.ListStore (typeof (Item));
        var selection_model = new Gtk.SingleSelection (items) {
            autoselect = true
        };

        items.append (new Item ("Item 1", true));
        items.append (new Item ("Item 2", false));

        var list_view_factory = new Gtk.SignalListItemFactory ();
        list_view_factory.setup.connect (on_list_view_setup);
        list_view_factory.bind.connect (on_list_view_bind);

        var list_view = new Gtk.ListView (selection_model, list_view_factory);

        window.child = list_view;
        window.present ();
    }

    private void on_list_view_setup (Gtk.SignalListItemFactory factory, GLib.Object list_item_obj) {
        var vbox = new Gtk.Box (Gtk.Orientation.HORIZONTAL, 0);
        var checkbox = new Gtk.CheckButton ();
        var name_label = new Gtk.Label ("");
        name_label.halign = Gtk.Align.START;

        vbox.append (checkbox);
        vbox.append (name_label);
        ((Gtk.ListItem) list_item_obj).child = vbox;
    }

    private void on_list_view_bind (Gtk.SignalListItemFactory factory, GLib.Object list_item_obj) {
        var list_item = (Gtk.ListItem) list_item_obj;
        var item_data = (Item) list_item.item;
        var vbox = (Gtk.Box) list_item.child;
        var checkbox = (Gtk.CheckButton) vbox.get_first_child ();
        var name_label = (Gtk.Label) checkbox.get_next_sibling ();

        checkbox.active = item_data.checked;
        name_label.label = item_data.name;
    }

    public static int main (string[] args) {
        var app = new ListViewCheckButtonsSample ();
        return app.run (args);
    }
}

Compile and Run

Compile:

valac --pkg gtk4 ListViewCheckButtons.vala

Run:

./ListViewCheckButtons.vala

Blueprint Version

The same sample, with the UI described in Blueprint instead of being built in code.

The item layouts are defined in Blueprint using BuilderListItemFactory, so the Vala setup and bind handlers are no longer needed.

Source Code

list-view-check-buttons.blp

using Gtk 4.0;

template $ListViewCheckButtonsWindow: ApplicationWindow {
  title: "ListView CheckButtons Sample";
  default-width: 280;
  default-height: 200;

  child: ListView {
    model: SingleSelection selection_model {
      autoselect: true;
    };

    factory: BuilderListItemFactory {
      template ListItem {
        child: Box {
          orientation: horizontal;

          CheckButton {
            active: bind template.item as <$Item>.checked;
          }

          Label {
            halign: start;
            label: bind template.item as <$Item>.name;
          }
        };
      }
    };
  };
}

ListViewCheckButtonsBlueprint.vala

// ListViewCheckButtonsBlueprint.vala

public class Item : GLib.Object {
    public string name { get; set; }
    public bool checked { get; set; }

    public Item (string name, bool checked) {
        Object (
            name: name,
            checked: checked
        );
    }
}

[GtkTemplate (ui = "/com/example/ListViewCheckButtonsSample/list-view-check-buttons.ui")]
public class ListViewCheckButtonsWindow : Gtk.ApplicationWindow {
    [GtkChild]
    private unowned Gtk.SingleSelection selection_model;

    public ListViewCheckButtonsWindow (Gtk.Application app) {
        Object (application: app);
    }

    construct {
        var items = new GLib.ListStore (typeof (Item));

        items.append (new Item ("Item 1", true));
        items.append (new Item ("Item 2", false));

        selection_model.model = items;
    }
}

public class ListViewCheckButtonsSample : Gtk.Application {
    public ListViewCheckButtonsSample () {
        Object (application_id: "com.example.ListViewCheckButtonsSample");
    }

    public override void activate () {
        new ListViewCheckButtonsWindow (this).present ();
    }

    public static int main (string[] args) {
        var app = new ListViewCheckButtonsSample ();
        return app.run (args);
    }
}

list-view-check-buttons.gresource.xml

<?xml version="1.0" encoding="UTF-8"?>
<gresources>
  <gresource prefix="/com/example/ListViewCheckButtonsSample">
    <file>list-view-check-buttons.ui</file>
  </gresource>
</gresources>

Compile and Run

Install blueprint-compiler, then compile the Blueprint file into a UI file:

blueprint-compiler compile list-view-check-buttons.blp --output list-view-check-buttons.ui

Compile the UI file into a resource:

glib-compile-resources list-view-check-buttons.gresource.xml --target=list-view-check-buttons.gresource.c --generate-source

Compile:

valac --pkg gtk4 --gresources list-view-check-buttons.gresource.xml ListViewCheckButtonsBlueprint.vala list-view-check-buttons.gresource.c

Run:

./ListViewCheckButtonsBlueprint