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



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

Step 2: Creating the GUI

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



a) Adding containers empty Main window design



Click to the view menu open Pads and select ToolBox 



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



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

 

b) Adding Widgets from ToolBox

Add four buttons and textView to the Main Window

 

Step 3: Add functionality

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

Step 5: Run

Output : For  Lower case



After pressing lower case button

 You can use same for other buttons also.