Simple sidebar implementation in C for GTK4

[fromtheeast710]

How should I create a simple sidebar containing symbolic icons? I’ve tried GtkListBox but unable to properly implement it due to my inexperience and lack of documentations.

Thank you.

[andyholmes]

Gtk.ListBox is about as simple as it gets, which part specifically are you having trouble with?

GtkWidget *list, *box, *icon, *label;

list = gtk_list_box_new ();

// Row 1
box = gtk_box_new (GTK_ORIENTATION_HORIZONTAL, 6);
gtk_list_box_append (GTK_LIST_BOX (list), box);
icon = gtk_image_new_for_icon_name ("dialog-information-symbolic");
gtk_box_append (GTK_BOX (box), icon);
label = gtk_label_new ("Item 1");
gtk_box_append (GTK_BOX (box), label);

// Row 2
box = gtk_box_new (GTK_ORIENTATION_HORIZONTAL, 6);
gtk_list_box_append (GTK_LIST_BOX (list), box);
icon = gtk_image_new_for_icon_name ("dialog-warning-symbolic");
gtk_box_append (GTK_BOX (box), icon);
label = gtk_label_new ("Item 2");
gtk_box_append (GTK_BOX (box), label);

[fromtheeast710]

@andyholmes Thank you for your response! I’m having troubles due to being new to programming and the best guide I could find only works for GTK2.

I’m also confused between using a .ui file and building it locally.

[fromtheeast710]

Thanks to your guide I was able to implement a simple sidebar

I want to know how to:

1. Reposition a button to the bottom corner of the toolbox.
2. Stop the first button from being highlighted
3. Force focus on the button only.

Again, thank you!

[fromtheeast710]

Here’s the code

[andyholmes]

@fromtheeast710

I’m having troubles due to being new to programming and the best guide I could find only works for GTK2.

There are some tutorials for GTK4 on the GNOME Developer website.

@fromtheeast710

I’m also confused between using a .ui file and building it locally.

That’s just a choice you’ll have to make for yourself. Most people use .ui files if the widget gets reasonably complex. There is also a tutorial for that in the developer documentation.

@fromtheeast710

I want to know how to:

1. Reposition a button to the bottom corner of the toolbox.

Sounds like you want to read up about alignment in GTK4, and set the Gtk.Widget:valign and Gtk.Widget:vexpand properties on the buttons to suite your needs.

@fromtheeast710

2. Stop the first button from being highlighted

In that case, you might not want a Gtk.ListBox, but just a plain Gtk.Box instead (with the Gtk.Orientable:orientation set to GTK_ORIENTATION_VERTICAL).

@fromtheeast710

3. Force focus on the button only.

If you want to force focus onto an item, you can use Gtk.Widget.grab_focus(), although you don’t usually need to that. That should generally be left to the user.

[fromtheeast710]

@andyholmes

In that case, you might not want a Gtk.ListBox, but just a plain Gtk.Box instead (with the Gtk.Orientable:orientation set to GTK_ORIENTATION_VERTICAL).

GtkBox does not produce the effect that I wanted.

I prefer to have it all in a bar or pane that GtkListBox produce. Is there a way to change how the button is highlighted or should I use GtkPaned?

@andyholmes

Sounds like you want to read up about alignment in GTK4, and set the Gtk.Widget:valign and Gtk.Widget:vexpand properties on the buttons to suite your needs.

I am aware of these but not sure how to implement it. Can you please post an example?

[gilboonet (Gilbert Duval)]

Hello, this could produce the effect you want

gtk_widget_add_css_class (list, "linked");

[fromtheeast710]

@gilboonet Thank you for your help but that’s not it. Ideally I want the sidebar to look similar to this

[andyholmes]

I’d recommend you look through the Widget Gallery to get an idea of what’s available.

You’re probably wanting a series of Gtk.ToggleButtons in a Gtk.ToggleButton:group. If you want it to be blue, you’ll want to read into CSS in GTK4. Or you might want to look at a stack switcher.

[danialbehzadi]

I’m afraid it doesn’t confront well with GNOME HIG. You may consider using ViewSwitcher for up to five views or StackSidebar for more than five stacks.

[fromtheeast710]

There seems to be many different ways to implement a sidebar. For now, I’m sticking with GtkListBox but will move to StackSidebar.