GTK Listview AKA TreeView
Need to build a list using GTK? Maybe you’re turned on by physical pain? How about the mental anguish? Well I hate to break it to you, lists in GTK# are pretty straight forward, so put that thing away and lets get into it.
Create a new Gtk# app with dotnet core.
- > dotnet new gtkapp <your app name>
- > dotnet build — Just to see that it is actually working.
Now that the app is created open it up in Visual Studio Code or an editor of your choice. Also note that gui is written in glade, which looks just like Xml (it is Xml).
First lets open MainWindow.glade and change it to look like this, we are going to cheat a little bit.
Its fairly straight forward. We are setting some margins inside of a GtkBox widget. We give it an ID and some orientation data. The Box is nested inside of the GtkWindow class, which we are providing a default height and width and title to. The rest we will do programatically.
So lets take a look at the MainWindow.cs file.
Update the MainWindow class to look like this. You don’t need to include the setWindow method. I forgot to remove that. You will notice that the FileTreeWidget is giving an error in your editor. It doesn’t exist yet. So lets fix that.
Add a new glade file and call it FileTreeWidget.glade. Add the following:
Again, we are going to cheat. At some point I might try to explain the markup, but not now. Above you can see that we are literally only instantiating the GtkTreeView widget and leaving the <child> tags empty. Now add the code behind class, create FileTreeWidget.cs and open it up. Now change the code to include the following:
So this class was a little larger. We start by inheriting from TreeView, the class takes a min and max width and a title. In the private constructor the class runs the InitGui() function, which sets up the column labels and sets the widths we provided in the public contructor. After the InitGui function completes we run the recursive builder.
Recursive Builder Function: recursively detects and builds a file tree and stores each item inside the iter. In this case we are building a nested list. We are getting every single file and folder inside our current projects directory at runtime.
Note that there are 2 columns described by the code, but only one is showing. Thats on purpose, I hid the actual file path, after getting a substring from it, so later when you add an onClick function you can easily call that directory/file without having to build a bunch of strings or build the list again. It isn’t as pretty as data binding a model to a view but hey, it worked.
If everything has worked out so far and the project is compiling successfully it should look something like this:
Now you can click on each item and see what is nested inside. I hope this was helpful to someone, I know these are never very thoroughly explained, I just don’t know how to explain how I am making a button do something? lol. Anyways thats the jist of making a list in Gtk#. Pretty straight forward eh?
Until next time take care!
