In this post we will cover how to make a basic GUI application using Mono along with Monodevelop. If you haven’t already, you will want to read part 1 and part 2 of this series before this article.

Monodevelop
Monodevelop is the tool we are using as our editor. This is Linux’s equivalent of Visual Studio. It can be used to code, debug and design your application, and can link in with revision control systems. This article was written using version 2.0, if your version is not 2.0 you may see slight differences.

Create your project
After starting Monodevelop, go to File -> New -> Solution. You will be presented with a prompt asking which kind of solution we are starting. Click on C# -> Gtk# 2.0 Project as shown below:

new-solution

Go ahead and click “Forward”. This will drop us at the default Monodevelop screen, and bring up a boilerplate to work from. For this guide we will mainly be working in the Designer mode. In the above picture we named our project helloWorldGraphical. I suggest you name yours the same unless you are already familiar with C#. Navigate to Solution helloWorldGraphical -> helloWorldGraphical -> User Interface -> MainWindow. Here you will see the designer window. If it shows source code, click the Designer tab as shown:

designer

So now we have a window. By default, there does not appear to be any buttons to do anything fun with it. We need to change that by going to View -> Toolbox. This will allow us to place buttons, boxes, whatever we want.

toolbox

Now that we have a bunch of different buttons, what we need is a VBox. This is a vertical box that will help us position our elements. Gtk graphical interfaces use containers to figure out what goes where. For now lets just drag a VBox and leave it with the defaults (just click and drag it on to your window):

vbox

Now that we have a container, we can drag a Label. A label just allows us to display some arbitrary text, nothing too special. Go ahead and drag it inside the VBox we just dragged:

label

Now that we have a label we can set it’s text to HelloWorld and get a glympse of how to customize GUI elements. To do this we need to open the properties window. To open the properties window go to View -> Properties as shown below:

properties

Properties is where the magic really happens in the designer. You can click on your VBox or Label and set a bunch of different values that will change the way your program behaves. For the purpose of this article, we just want to change the label text:

label-edit

Where it says ‘label2′ (yours may say different label #), go ahead and change the text to “Hello World”. Your final dialog should look like this:

final-designer

Now we are ready to test the program. Navigate on the top toolbar to the gears icon, which should say ‘Debug’:
buildit

After clicking the icon, your program will launch and you will see a window as below:

final

And now you have your Hello World program. It doesn’t do anything, but I am sure in future tutorials we will address that. For now just play with the designer properties and keep clicking Debug to see your changes. Good luck!

Related posts:

  1. Annoying people with code: A gentle introduction to C# and Mono This is meant to be an introduction to C# and...
  2. Annoying people with code: A gentle introduction to C# and Mono Part 2 – Data Types In part one of this series we covered making a...
  3. Quick tip: Counting lines of code I wanted to count the lines of code on a...
  4. Connecting to Ubuntu from Windows Recently I needed to connect to a Ubuntu box from...
  5. Python and real time graphical analysis I have a camera which has a motor attached which...