C# Hello World (Graphic User Interface)

We are going to create a Hello World with GUI (Graphic User Interface) in C#. Like in previous post we start by creating new project.

Click on "File"->"New"->"Project" or shortcut "CTRL+SHIFT+N".

Again, we click on Visual C# on left side, but this time we need to select Windows Forms Application on the right side of screen. Under name type HelloWorldGUI and click OK button. It should look like this:

This creates new project and a screen with a window appears. On the left side there is also Toolbox which contains different elements that can be dragged and dropped on window. If you don't see toolbox on left side go to "View"->"Toolbox" and it will appear.

Select a Button from toolbox and drag and drop it on the window. Then select Label from toolbox and drag and drop it on the window under button. It should look like this:

Now click once on the window and take a look at lower right part of screen where it says Properties. Find where it says Text in list and write down My First GUI. This will change the text in upper left corner of your window from default text (which is usually Form1) to whatever you write in Text field.

Select button that is inside window, go to properties again, and under Text type Click me! in order to change text on the button.

Now select label that is inside window, go to properties again, and under Text type Button not clicked in order to change text on the label. Now go to (Name) property and change it to myLabel. This will set the name of label which we can use in our code. After renaming GUI should look like this:

Next step is double click on button. This will create a function for clicking on a button (click event). Here we get a code that looks something like this:

 using System;  
 using System.Collections.Generic;  
 using System.ComponentModel;  
 using System.Data;  
 using System.Drawing;  
 using System.Linq;  
 using System.Text;  
 using System.Windows.Forms;  
 namespace HelloWorldGUI  
 {  
   public partial class Form1 : Form  
   {  
     public Form1()  
     {  
       InitializeComponent();  
     }  
     private void button1_Click(object sender, EventArgs e)  
     {  
     }  
   }  
 }  

In order to change text on our label we add a line myLabel.Text = "Hello World!"; so that our code looks something like this:

 using System;  
 using System.Collections.Generic;  
 using System.ComponentModel;  
 using System.Data;  
 using System.Drawing;  
 using System.Linq;  
 using System.Text;  
 using System.Windows.Forms;  
 namespace HelloWorldGUI  
 {  
   public partial class Form1 : Form  
   {  
     public Form1()  
     {  
       InitializeComponent();  
     }  
     private void button1_Click(object sender, EventArgs e)  
     {  
       myLabel.Text = "Hello World!";  
     }  
   }  
 }  

Now run it by pressing F5 and try clicking the button.

Finally let's create a counter for our button that counts how many times it has been pressed. First we initialize an integer by putting int counter=0; before public Form1(). This creates a variable that has initial value 0. Inside our button click function - private void button1_Click we need to increase value of counter. This can be done by typing counter++; or counter = counter + 1; - either one will increase value of counter each time button is pressed. Now instead of "Hello World!" we put "Button has been clicked "+counter+" times!" - this will type out text "Button has been clicked" and "times!", but thanks to + sign it will also print out value of counter between those two parts.

Final code should look like this:

 using System;  
 using System.Collections.Generic;  
 using System.ComponentModel;  
 using System.Data;  
 using System.Drawing;  
 using System.Linq;  
 using System.Text;  
 using System.Windows.Forms;  
 namespace HelloWorldGUI  
 {  
   public partial class Form1 : Form  
   {  
     int counter = 0;  
     public Form1()  
     {  
       InitializeComponent();  
     }  
     private void button1_Click(object sender, EventArgs e)  
     {  
       counter++;  
       myLabel.Text = "Button has been clicked " + counter + " times";  
     }  
   }  
 }  

Try running it and keep clicking the button. Your results should look like this: