Gtk.HeaderBar()

Tags: Gtk.HeaderBar Gtk.Image Gtk.IconSize Gtk.ToolButton Gtk.SearchEntry

Images: Screenshot 1

Attention, before you start
This tutorial will only work if your using the Gtk >= 3.10. Therefore it will not work if you are running Elementary OS Luna. Right now I'm programming on Linux Mint 17 which is based on Ubuntu 14.04 LTS. If you are running an unreleased version of Elementary OS Isis (Freya) this tutorial should work for you.

This is a simple tutorial, but it will be useful since placing items in the headerbar of a program is a new concept for most operating systems. Lets get started. Start with the template from the homepage, like usual. So lets jump in.

private Gtk.HeaderBar header() {
	var header = new Gtk.HeaderBar();
	
	/*
	 * Set properties of the Header Bar
	 */
	header.set_title("Header");
	header.set_show_close_button(true);
	header.set_subtitle("Subtitle here");
	header.spacing = 0;

	//Get image from icon theme
	Gtk.Image img = new Gtk.Image.from_icon_name ("document-new", Gtk.IconSize.MENU);
	Gtk.ToolButton button2 = new Gtk.ToolButton (img, null);
	
	//Add Icon to header
	header.pack_start(button2);

	//Get another Icon.
	img = new Gtk.Image.from_icon_name ("document-open", Gtk.IconSize.MENU);
	Gtk.ToolButton button3 = new Gtk.ToolButton (img, null);
	
	//Add it again
	header.pack_start(button3);

	//Add a search entry to the header
	header.pack_start(new Gtk.SearchEntry());

	//Return it to be included somewhere else.
	return header;

}

A simple piece of code that makes a new method within our AppWindow class and it will return Gtk.HeaderBar(). Its adding 2 buttons and a Gtk.SearchEntry() GUI element to the header. Next the window manager has to be told it has to use a custom header bar.

 this.set_titlebar(this.header());

Should be done inside the constructor. The difficulty comes from fine toning the layout of the headerbar. For example you can place items on the right side by using the method header.pack_end(Widget);. I did not know that you could show a close button by default using the built in method.

Excercise

As an exercise set the show_close_button to false and make your own close button that will show in the top right corner of the window. Then connect the signal so that it closes when the button is clicked.

comments powered by Disqus