Adding a simple ListBox widget in your GTK application is easier than you think. This tutorial will show you how to create ListBox-like functionality in GTK using Glade3. GTK uses the TreeView control as their do-all list control. You can create simple lists, tree-like lists and all sorts of various list views. What is really cool about the TreeView widget is that your columns can be almost any other widget type. You can put a Button in one column, and an entry widget in another, or even a progress bar! This example is only going to cover a basic 1 column listbox using the TreeView widget.

Requirements & Notes:
1. This tutorial expects that you have a little experience creating basic GUI’s in glade3. If not, please read a Glade3 tutorial.

2. I use Anjuta as my IDE.

3. The code in here is for reference. It is not necessarily a copy/paste working example, however, it does come from a working test project of mine….

4. This code only shows you how to populate a listbox (TreeView). The next one I write will be how to get a selected value and how to use signals (events).

Lets get started.
1. Open up your Glade3 User Interface. You should already have an interface with a TreeView object called “treeview1″.

2. Right click on your TreeView object from the left window pane and click “Edit Separately” and goto the “Hierarchy” tab.

3. Create a new Tree View column. Call it whatever you want.

4. Create a new Cell Renderer and call it anything.

Note the numbers on the picture below.

This is pretty much it for the gui stuff. Save your gui and open up your GTK code. (callback.h, main.cpp etc etc) Here is my callback.h file. The GtkTreeModel is what stores your actual data. The other stuff is just some other junk I was playing with.

#include <gtk/gtk.h>
GtkEntry *myEntry;
GtkTextView *myTextView;
GtkTextIter iter;
GtkTreeModel *myStore;

void destroy (GtkWidget *widget, gpointer data);

Now for my main.cpp file. Here is some example source code of how I populate my TreeView control. This code is a little messy but it should give you a good idea of how it works.

GtkWidget* create_window (void)
{
	GtkWidget *window;
	GtkBuilder *builder;
	GError* error = NULL;
    GtkTreeIter iter;
	GtkTreeView *view;
   enum
  {
   COL_NAME = 0
  };	

	builder = gtk_builder_new ();
	if (!gtk_builder_add_from_file (builder, UI_FILE, &error))
	{
		g_warning ("Couldn't load builder file: %s", error->message);
		g_error_free (error);
	}

	/* This is important */
	gtk_builder_connect_signals (builder, NULL);
	window = GTK_WIDGET (gtk_builder_get_object (builder, "window"));
            myEntry = GTK_ENTRY (gtk_builder_get_object (builder, "entry1"));
	myTextView = GTK_TEXT_VIEW (gtk_builder_get_object (builder, "textview1"));

Here I define myStore so that I can use it. I am defining 1 column which will hold data of a G_TYPE_STRING type. I then get a reference to my treeview1 (called view in this case) which is eventually used with the gtk_tree_view_set_model function. The gtk_list_store_append function is what creates the new row and gtk_list_store_set is what actually sets my value. In this case I just use two static char variables (*t1 and *t2) and pass those in. The we use gtk_tree_view_set_model to set the model (store) in our TreeView object (view).

	myStore = gtk_list_store_new (1, G_TYPE_STRING);
             view = GTK_TREE_VIEW(gtk_builder_get_object(builder,"treeview1"));
	gchar *t1 = "text1";
	gchar *t2 = "text2";
             gtk_list_store_append (myStore, &iter);
	gtk_list_store_set(myStore,&iter,0,t1,-1);

	gtk_list_store_append (myStore, &iter);
	gtk_list_store_set(myStore,&iter,0,t2,-1);

   gtk_tree_view_set_model (GTK_TREE_VIEW (view), myStore);

  //gtk_list_store_set (store, &iter,    COL_NAME, "Heinz El-Mann", COL_AGE, 51, -1);
	gtk_entry_set_text (myEntry, t2);

	g_object_unref (builder);

	return window;
}

int main (int argc, char *argv[])
{
 	GtkWidget *window;

	gtk_set_locale ();
	gtk_init (&argc, &argv);

	window = create_window ();

	gtk_widget_show (window);

	gtk_main ();
	return 0;
}

You should eventually be able to get a Listbox like widget showing “text1″ and “text2″ in 2 different columns.