CODEWITHSUNDEEP
pythonuser-interfacegtkgtk3
Dusan J.
Dusan J.

Reputation: 303

How to create list-like gui in python with gtk3?

I am trying to create this kind of list-like user interface gui (without Glade) within my InputPage object, that can be seen throughout gnome3 user interface:

Gtk3 list-like gui

and all I have is this (note that I would only like to add the buttons + and - with the same style they appear in the first image, I would like to keep columns of my list just as it is):

my gui interface

for some reason buttons are wider than expected and the toolbar doesnt fill the horizontal space. here is my code:

class InputPage(Gtk.Box):

def __init__(self):
    Gtk.Box.__init__(self)
    self.grid = Gtk.Grid()
    self.grid.set_column_homogeneous(True)
    self.grid.set_row_homogeneous(True)
    self.add(self.grid)
    #Creating the ListStore model
    self.software_liststore = Gtk.ListStore(str, str, int)
    for software_ref in software_list:
        self.software_liststore.append(list(software_ref))

    #creating the treeview, making it use the filter as a model, and adding the columns
    self.treeview = Gtk.TreeView()
    for i, column_title in enumerate(["Name", "Frequency", "Amplitude"]):
        renderer = Gtk.CellRendererText()
        column = Gtk.TreeViewColumn(column_title, renderer, text=i)
        self.treeview.append_column(column)

    #button.connect("clicked", self.on_selection_button_clicked)

    #setting up the layout, putting the treeview in a scrollwindow, and the buttons in a row
    self.scrollable_treelist = Gtk.ScrolledWindow()
    self.scrollable_treelist.set_vexpand(True)
    self.grid.attach(self.scrollable_treelist, 0, 0, 10, 7)

    #Toolbar
    list_add = Gtk.Button()
    list_add.add(Gtk.Image(icon_name='list-add-symbolic', visible=True))
    list_insert_object = Gtk.Button()
    list_insert_object.add(Gtk.Image(icon_name='insert-object-symbolic', visible=True))
    list_remove = Gtk.Button()
    list_remove.add(Gtk.Image(icon_name='list-remove-symbolic', visible=True))
    self.toolbar = Gtk.ButtonBox(spacing=5)
    self.toolbar.get_style_context().add_class('inline-toolbar')
    self.toolbar.add(list_add)
    self.toolbar.add(list_remove)
    self.toolbar.add(list_insert_object)
    self.toolbar.set_hexpand(True)
    self.grid.attach(self.toolbar, 0,7,4,1)
    #self.grid.attach_next_to(self.toolbar, self.scrollable_treelist, Gtk.PositionType.BOTTOM, 1, 1)
    # for i, button in enumerate(self.buttons[1:]):
        #self.grid.attach_next_to(button, self.buttons[i], Gtk.PositionType.RIGHT, 1, 1)
    self.scrollable_treelist.add(self.treeview)


    self.show_all()

Upvotes: 1

Views: 1929

Answers (1)

andlabs
andlabs

Reputation: 11578

What you see on the bottom of the first screenshot is a standard GtkToolbar with the inline-toolbar style class.

A GtkToolbar does not necessarily need to be on the top of a window. You can place them anywhere, just like regular widgets. All widgets have a style context that defines how the widget looks; each style context has one or more classes applied to it. These classes are CSS classes; styling a widget is just like saying class="classname" in HTML.

Here is one possible way to do this:

  1. Create a vertical GtkBox with no spacing.

  2. Place the GtkTreeView as the first child of the GtkBox.

  3. Create a GtkToolbar and place it as the second child of the GtkBox.

  4. Call the get_style_context() method on the GtkToolbar.

  5. Call the add_class() method of the style context, passing the string "inline-toolbar". (I believe there is a symbolic constant for this; I do not know what this is in Python.)

  6. Recreate your buttons as GtkToolButtons (NOT regular GtkButtons!) that are children of the GtkToolbar.

If that doesn't result in the buttons looking connected, you can add the "linked" class to the toolbar in the same way.

Good luck!

Upvotes: 2

Related Questions