Creating an application using the Stetic GUI Designer with MonoDevelop


Introduction

GUI development with Stetic (MonoDevelop's integrated GTK# visual designer). It will demonstrate how to create the layout of the GUI, how to add interactive elements to the layout and how to add functionality to the GUI.

Step 1: Create a new project

Open monodevelop-->file menu-->new project  then

1.gif

For designer mode click right on solution MainWindow from the Solution Pad and select Open

d.gif

Step 2: Creating the GUI

To the Designer by pressing the "Designer" button located at the bottom

3.gif

a) Adding containers empty Main window design

4.gif

Click to the view menu open Pads and select ToolBox 

1.1.gif

Drag and drop the Vbox from the ToolBox,the main window looks like

1.2.gif

Drag and drop the Hbox from the ToolBox,the main window looks like


1.3.gif

 

b) Adding Widgets from ToolBox

Add four buttons and textView to the Main Window

B.gif

 

Step 3: Add functionality

5.gif

Coding:

using
System;
using System.IO;
using Gtk;
public partial class MainWindow : Gtk.Window
{
    public MainWindow()
        : base(Gtk.WindowType.Toplevel)
    {
        Build();
    }
    protected void OnDeleteEvent(object sender, DeleteEventArgs a)
    {
        Application.Quit();
        a.RetVal = true;
    }
    protected virtual void clear(object sender, System.EventArgs e)
    {
        textview1.Buffer.Text = "";
    }
    protected virtual void lower(object sender, System.EventArgs e)
    {
        textview1.Buffer.Text = textview1.Buffer.Text.ToLower();
    }
    protected virtual void upper(object sender, System.EventArgs e)
    {
        textview1.Buffer.Text = textview1.Buffer.Text.ToUpper();
    }
    protected virtual void save(object sender, System.EventArgs e)
    {
        StreamWriter sw = new StreamWriter("file.txt");
        sw.Write(textview1.Buffer.Text);
        sw.Close();
    }
}

Step 4: Build All

6.gif

Step 5: Run

Output : For  Lower case

OUT.gif

After pressing lower case button

O2.gif

 You can use same for other buttons also.