GTK components for UI like Control Center

I’m trying to build an application which UI would be based on the same UI than in Gnome Control Center :

  1. a left vertical bar with main application options
  2. when an option is chosen : in the left vertical bar, the main application options are replaced by the specific options of the choice done. A left arrow on top left allow to go back to 1)
  3. a center/right place for details of the specific option

This is what we see in Gnome Control Center with

  1. main parameters categories

  2. list of applications when option “applications” is chosen in 1)
    example :

  3. parameters specific to the application chosen in 2)

I believe that it’s using GtkStack, GtkStackSideBar but I don’t find a tutorial to learn how to implement those components and looking at Gnome Control Center UI files weren’t really helpful.
Does somebody knows of a good tutorial of how to implement that kind of UI ? Or a easy-to-understand XML UI code ? Thanks in advance.


It seems that this is libhandy library that I would need to use in order to generate the like of Gnome Control Center UI.


Sounds like you want to have scrolling, use GtkViewport.

Or for simple paging use a GtkHBox and do GtkWidget::show() or GtkWidget::hide()


Hi Joël,

Yes i will have to use that kind of container components but my question was more about the global UI concept : I want to use the same kind of UI than in Gnome Control Center. Now, i understand that this is done via the libhandy library that is developed for librem5 and with objective of be usable in mobiles and laptops thanks to adaptive components.

I try to use the libhandy library but again i meet an issue :

  • It’s working fine in a standalone python script launch with command line “python3”.
  • But it’s ko when I use the same script inside an IDE (tested with Builder and PyCharm) I get the error message “ValueError: Namespace Handy not available”.
    The line refered to this error is the first line of following block :
    gi.require_version(‘Handy’, ‘0.0’)
    from gi.repository import Handy

I didn’t find how to resolve that issue so far.

Finally, as I didn’t find how to use libhandy, i’m using stacksidebar and stackswitcher.