Search code examples
gtk3

How do I make these GTK buttons that are drawn together in a group?

GTK has a way to draw a group of buttons together so they look like one big button with a divider between them, rather than buttons that are drawn apart. It's useful for drawing buttons together that have a similar function.

Here's an example from the GTK inspector, where they appear to be specifically toggle buttons where only one can be selected:

enter image description here

Another example, from Glade, where each button represents a category of widgets and opens a menu:

enter image description here

What is this style of buttons called, and how do I make them?

Solution

  • GTK Inspector example shows GtkStackSwitcher, a special widget used to control the GtkStack (for page switching).

    Generally, to achieve this visual effect for a group of buttons, GtkButtonBox is used with the layout style set to GTK_BUTTONBOX_EXPAND.

    Buttons expand to fill the box. This entails giving buttons a "linked" appearance, making button sizes homogeneous, and setting spacing to 0

    You can also manually add a "linked" style to any container with buttons:

    GtkStyleContext *context;
...
context = gtk_widget_get_style_context(button_box);
gtk_style_context_add_class(context, GTK_STYLE_CLASS_LINKED);

    HowDoI/Buttons (paragraph "Linked buttons")