CODEWITHSUNDEEP
gtk
kaStevie
kaStevie

Reputation: 93

Mac style joined buttons (segmented control) with Gtk

I've seen it done in the ubuntu software center, and with a few gnome apps.

Where two buttons look like a single rectangle with a line through it, how is this being done?

Upvotes: 0

Views: 727

Answers (2)

underscore_d
underscore_d

Reputation: 6792

Fwiw, since I recently had the same question, here's another answer with an up-to-date citation and using C instead of some wrapper. (I use GTKmm, but I feel we should refer to the native C API unless a wrapper is explicitly stated.)

I wanted to achieve the same thing and eventually stumbled upon the answer, at the official page HowDoI: Buttons. This effect is achieved by putting the targeted Buttons in a Container and giving the latter the CSS class linked. (That page says using a Box is normal, but asBox will probably be deprecated soon and Grid is superior anyway... use a Grid.)

So:

GtkWidget *const grid = gtk_grid_new ();
GtkStyleContext *const context = gtk_widget_get_style_context (grid);
gtk_style_context_add_class (context, "linked");
/* Add your Buttons to the Grid */

That link also discusses some other handy embellishments we can make to GtkButtons, including the classes suggested-action and destructive-action.

For similar questions, it's very illustrative to browse the source of (A) an application that does what you want to replicate and (B) the Adwaita theme CSS.

Upvotes: 0

ptomato
ptomato

Reputation: 57880

In GTK 3.0 and later, use the INLINE_TOOLBAR style class or LINKED style class.

#!/usr/bin/env python

from gi.repository import Gtk

button_names = [
    Gtk.STOCK_ABOUT,
    Gtk.STOCK_ADD,
    Gtk.STOCK_REMOVE,
    Gtk.STOCK_QUIT]
buttons = [Gtk.ToolButton.new_from_stock(name) for name in button_names]

toolbar = Gtk.Toolbar()
for button in buttons:
    toolbar.insert(button, -1)
style_context = toolbar.get_style_context()
style_context.add_class(Gtk.STYLE_CLASS_INLINE_TOOLBAR)

window = Gtk.Window()
window.set_size_request(200, 50)
window.add(toolbar)
window.connect('delete-event', Gtk.main_quit)
window.show_all()

Gtk.main()

Upvotes: 1

Related Questions