Search code examples
cgtkgtk3glade

GTK+ How to make notebook's tab bar resizable


I want to make a tab-bar on the left in GTK app with GLade. And I want to get the resizable tab-bar area like this:

enter image description here

But I couldn't find the Resize option of Notebook widget.

Anybody knows how I can do this with GLade or has any ideas?


Solution

  • The tabs area of a GtkNotebook is not user resizable. There are workarounds though. A solution would be to remove the tabs from the GtkNotebook and simulate a tab bar with buttons. This way you can separate both and contain them inside a GtkPaned.

    A simple glade file following this approach (named myui.glade):

    <?xml version="1.0" encoding="UTF-8"?>
    <!-- Generated with glade 3.19.0 -->
    <interface>
      <requires lib="gtk+" version="3.16"/>
      <object class="GtkWindow" id="window1">
        <property name="can_focus">False</property>
        <property name="default_width">440</property>
        <property name="default_height">250</property>
        <child>
          <object class="GtkPaned" id="paned1">
            <property name="visible">True</property>
            <property name="can_focus">True</property>
            <child>
              <object class="GtkBox" id="box1">
                <property name="visible">True</property>
                <property name="can_focus">False</property>
                <property name="orientation">vertical</property>
                <child>
                  <object class="GtkButton" id="page1">
                    <property name="label" translatable="yes">Page 1</property>
                    <property name="visible">True</property>
                    <property name="can_focus">True</property>
                    <property name="receives_default">True</property>
                  </object>
                  <packing>
                    <property name="expand">False</property>
                    <property name="fill">True</property>
                    <property name="position">0</property>
                  </packing>
                </child>
                <child>
                  <object class="GtkButton" id="page2">
                    <property name="label" translatable="yes">Page 2</property>
                    <property name="visible">True</property>
                    <property name="can_focus">True</property>
                    <property name="receives_default">True</property>
                  </object>
                  <packing>
                    <property name="expand">False</property>
                    <property name="fill">True</property>
                    <property name="position">1</property>
                  </packing>
                </child>
                <child>
                  <object class="GtkButton" id="page3">
                    <property name="label" translatable="yes">Page 3</property>
                    <property name="visible">True</property>
                    <property name="can_focus">True</property>
                    <property name="receives_default">True</property>
                  </object>
                  <packing>
                    <property name="expand">False</property>
                    <property name="fill">True</property>
                    <property name="position">2</property>
                  </packing>
                </child>
              </object>
              <packing>
                <property name="resize">False</property>
                <property name="shrink">True</property>
              </packing>
            </child>
            <child>
              <object class="GtkNotebook" id="notebook1">
                <property name="visible">True</property>
                <property name="can_focus">True</property>
                <property name="show_tabs">False</property>
                <child>
                  <object class="GtkLabel" id="label4">
                    <property name="visible">True</property>
                    <property name="can_focus">False</property>
                    <property name="label" translatable="yes">This is Page 1</property>
                  </object>
                </child>
                <child type="tab">
                  <object class="GtkLabel" id="label1">
                    <property name="visible">True</property>
                    <property name="can_focus">False</property>
                    <property name="label" translatable="yes">page 1</property>
                  </object>
                  <packing>
                    <property name="tab_fill">False</property>
                  </packing>
                </child>
                <child>
                  <object class="GtkLabel" id="label6">
                    <property name="visible">True</property>
                    <property name="can_focus">False</property>
                    <property name="label" translatable="yes">This is Page 2</property>
                  </object>
                  <packing>
                    <property name="position">1</property>
                  </packing>
                </child>
                <child type="tab">
                  <object class="GtkLabel" id="label2">
                    <property name="visible">True</property>
                    <property name="can_focus">False</property>
                    <property name="label" translatable="yes">page 2</property>
                  </object>
                  <packing>
                    <property name="position">1</property>
                    <property name="tab_fill">False</property>
                  </packing>
                </child>
                <child>
                  <object class="GtkLabel" id="label5">
                    <property name="visible">True</property>
                    <property name="can_focus">False</property>
                    <property name="label" translatable="yes">This is Page 3</property>
                  </object>
                  <packing>
                    <property name="position">2</property>
                  </packing>
                </child>
                <child type="tab">
                  <object class="GtkLabel" id="label3">
                    <property name="visible">True</property>
                    <property name="can_focus">False</property>
                    <property name="label" translatable="yes">page 3</property>
                  </object>
                  <packing>
                    <property name="position">2</property>
                    <property name="tab_fill">False</property>
                  </packing>
                </child>
              </object>
              <packing>
                <property name="resize">True</property>
                <property name="shrink">True</property>
              </packing>
            </child>
          </object>
        </child>
      </object>
    </interface>
    

    To switch between GtkNotebook pages we must handle button clicks and switch to the corresponding page.

    A simple implementation for the behavior can be (named main.c):

    #include <gtk/gtk.h>
    
    void on_page1_button_clicked (GtkButton *button, gpointer user_data) {
       GtkNotebook *notebook = GTK_NOTEBOOK(user_data);
       gtk_notebook_set_current_page(notebook, 0);
    }
    
    void on_page2_button_clicked (GtkButton *button, gpointer user_data) {
       GtkNotebook *notebook = GTK_NOTEBOOK(user_data);
       gtk_notebook_set_current_page(notebook, 1);
    }
    
    void on_page3_button_clicked (GtkButton *button, gpointer user_data) {
       GtkNotebook *notebook = GTK_NOTEBOOK(user_data);
       gtk_notebook_set_current_page(notebook, 2);
    }
    
    
    int main(int argc, char *argv[]) {
       GtkWidget *page1;
       GtkWidget *page2;
       GtkWidget *page3;
       GtkWidget *window;
       GtkWidget *notebook;
       GtkBuilder *builder;
    
       gtk_init (&argc,&argv);
    
       builder = gtk_builder_new_from_file("myui.glade");
    
       page1 = GTK_WIDGET(gtk_builder_get_object(builder, "page1"));
       page2 = GTK_WIDGET(gtk_builder_get_object(builder, "page2"));
       page3 = GTK_WIDGET(gtk_builder_get_object(builder, "page3"));
       window = GTK_WIDGET(gtk_builder_get_object(builder, "window1"));
       notebook = GTK_WIDGET(gtk_builder_get_object(builder, "notebook1"));
    
       g_signal_connect (page1, "clicked", G_CALLBACK(on_page1_button_clicked), notebook);
       g_signal_connect (page2, "clicked", G_CALLBACK(on_page2_button_clicked), notebook);
       g_signal_connect (page3, "clicked", G_CALLBACK(on_page3_button_clicked), notebook);
    
       g_signal_connect (window, "destroy", G_CALLBACK(gtk_main_quit), NULL);
    
       gtk_widget_show_all(GTK_WIDGET(window));
    
       gtk_main();
    
       return 0;
    }
    

    Compile with:

    gcc -o notebook main.c `pkg-config --cflags --libs gtk+-3.0`
    

    The result:

    enter image description here