Home | Gaming | Programming | Play Online | Submit Article | Submit BETA | Advertise | Contact | Keyword Query
Games++ Games & Game Programming

GAMES++
Home
Games++
Games++ Programming
Beta Testing Games
Free Online Games
Hints & Cheats

BROWSER UTILITIES
E-mail This Page
Add to Favorites

SITE SEARCH

Web Games++

AFFILIATES
Cheat Codes Galore
GameRatio.Com
Gameboy Cheats
BlackBerry Games

ADVERTISEMENT

An Introduction to C# GUIs by Example

C# Programming

In this article we will introduce ourselves to C# GUI development by creating a small application that converts temperature from Celsius to Fahrenheit and vice versa. The only required prerequisite is a basic familiarity with C# and object oriented programming. If you would like to brush up on C#, you can check out the article titled An Introduction to C#. If you would like to compile and run the example application you will need .NET Framework SDK. At the time this article was written Beta 1 could be found here.
http://download.microsoft.com/download/VisualStudioNET/Install/2204/NT5/EN-US/setup.exe.

Creating a windowed application typically involves these basic steps. Creating an appropriate form, adding controls to the form, and finally adding code to react to user events. With C# and the .NET framework, the tools we will require to accomplish these steps are found in the System.WinForms namespace.

The first step, creating a form, is extremely simple. We just create a class that derives from the class System.WinForms.Form and initialize the appropriate properties. In our example the class definition starts like this.

public class TempConverter : System.WinForms.Form {
	.
	.
	.
}

This is what we want the main window (form) to look like.

  • the size will be 180 by 90 pixels
  • we do not want to give the user the ability to change the size of the window
  • we want the title in the title bar to be displayed as C->F / F->C
  • we want the form to be initially displayed in the center of the screen
  • we do not want a help button (our application will be too simple to require a help button)
  • we do not want to give the user the ability to maximize the application (there will be no need to maximize the application because everything will be viewable within the given size)

Initializing our form to the given specifications involves setting the appropriate properties of our TempConverter object. Some properties have methods to change their values while other properties are modified directly by updating the appropriate instance variable. Below is the code that accomplishes this. If you would like more information about the properties and methods of the WinForms class, the documentation provided with .NET Framework SDK makes a good reference.

this.SetSize(180,90);
this.BorderStyle = FormBorderStyle.FixedDialog;
this.Text = "C->F / F->C";
this.StartPosition = FormStartPosition.CenterScreen;
this.HelpButton = false;
this.MaximizeBox = false;

So, lets tie all this code together so that we can compile and run our application and see what the form looks like. To do this we use our class definition, create a constructor (which will contain the code above to initialize the look of the main window), and we must create a main method that creates an instance of our class. Heres the code to do all this.

public class TempConverter : System.WinForms.Form {

	   public TempConverter() {
   	   this.SetSize(180,90);
   	      this.BorderStyle = FormBorderStyle.FixedDialog;
   	      this.Text = "C->F / F->C";
   	      this.StartPosition = FormStartPosition.CenterScreen;
   	      this.HelpButton = false;
   	      this.MaximizeBox = false;
	   }

	   public static void Main() {
   	      Application.Run( new TempConverter() );
	   }
}

The only new part here is the single line in the Main() method.

Application.Run(new TempConverter());

As youve probably guessed, this line means start the application with our new form.

Assuming our source file is called TempConverter.cs we compile the code by executing the following command:

csc /r:System.dll  /r:Microsoft.Win32.Interop.dll
   /r:System.WinForms.dll TempConverter.cs

I wont go into the details of the compile command because when Visual Studio .NET is available, issuing command line compile commands will not be necessary.

The next step is to add controls to the form. We will do this by creating an instance variable for each control, initializing these new instance variables, and finally placing each control on the form. Heres the updated code, and this is what our form will look like after we add the controls.

public class TempConverter : System.WinForms.Form {

   Label   lTempFah = new Label();
   Label   lTempCel = new Label();
   TextBox tTempFah = new TextBox();
   TextBox tTempCel = new TextBox();
   Button  bnCtoF = new Button();
   Button  bnFtoC = new Button();

   public TempConverter() {
      this.SetSize(180,90);
      this.BorderStyle = FormBorderStyle.FixedDialog;
      this.Text = "C->F / F->C";
      this.StartPosition = FormStartPosition.CenterScreen;
      this.HelpButton = false;
      this.MaximizeBox = false;
      tTempCel.TabIndex = 0;
      tTempCel.SetSize(50,25);
      tTempCel.SetLocation(13,5);
      lTempCel.TabStop = false;
      lTempCel.Text = "C";
      lTempCel.SetSize(25, 25);
      lTempCel.SetLocation(65,5);
      tTempFah.TabIndex = 1;
      tTempFah.SetSize(50,25);
      tTempFah.SetLocation(90,5);
      lTempFah.TabStop = false;
      lTempFah.Text = "F";
      lTempFah.SetSize(25,25);
      lTempFah.SetLocation(142,5);
      bnCtoF.TabIndex = 2;
      bnCtoF.Text = "C to F";
      bnCtoF.SetSize(70,25);
      bnCtoF.SetLocation(13,35);
      bnFtoC.TabIndex = 3;
      bnFtoC.Text = "F to C";
      bnFtoC.SetSize(70,25);
      bnFtoC.SetLocation(90,35);
      this.Controls.Add(tTempCel);
      this.Controls.Add(lTempCel);
      this.Controls.Add(tTempFah);
      this.Controls.Add(lTempFah);
      this.Controls.Add(bnCtoF);
      this.Controls.Add(bnFtoC);
}

So, we created two labels, two text boxes and two buttons. Then we initialized each control and added it to the form.

  • SetSize() initializes the size of a control
  • SetLocation() initializes the location of the control on the form
  • Setting the TabStop property of a control to false means that focus will not be set here when tab is pressed any number of times
  • Setting the TabIndex to X means that after hitting TAB x number of times focus will be set on this control
  • The text property of a control is the text that is displayed by this control.
  • this.Controls.Add() places a control on the form (a shortcut to adding each control would be to write this.Controls = new Control[] { tTempCel, lTempCel, tTempFar..};

One last step and we are finished. We just have to add methods to capture the button click events. Heres the code for the Celsius to Fahrenheit button click:

private void bnCtoF_Click(Object sender, EventArgs e) {
   double dTempCel = 0;
   double dTempFah = 0;
   try { dTempCel = tTempCel.Text.ToDouble(); }
   catch(Exception) {
      tTempCel.Clear();
      tTempFah.Clear();
      return;
   }
   dTempFah = 1.8*dTempCel+32;
   tTempFah.Text = dTempFah.ToString();
   tTempFah.Focus();
   tTempFah.SelectionStart = 0;
   tTempFah.SelectionLength = 0;
   tTempCel.Focus();
   tTempCel.SelectionStart = 0;
   tTempCel.SelectionLength = 0;
}
Lines 3 to 8 (everything in the try block) attempt to gather the value in the Celsius text box. If it is a double value then we store the value in dTempCel, otherwise we clear both text boxes and exit. Next, using the value in dTempCel we use the formula on line 9 to store the same temperature in Fahrenheit. This new value is displayed in the Fahrenheit text box then focus is place on each text box so that the cursor can be set to the beginning. (If we didnt set the cursor to the beginning we would see the end of long numbers and have to scroll over to see the beginning). The code for Fahrenheit button accomplishes the same task, just in reverse:

private void bnFtoC_Click(Object sender, EventArgs e) {
   double dTempCel = 0;
   double dTempFah = 0;
   try { dTempFah = tTempFah.Text.ToDouble(); }
   catch(Exception) {
      tTempCel.Clear();
      tTempFah.Clear();
      return;
   }
   dTempCel = (dTempFah-32)/1.8;
   tTempCel.Text = dTempCel.ToString();
   tTempCel.Focus();
   tTempCel.SelectionStart = 0;
   tTempCel.SelectionLength = 0;
   tTempFah.Focus();
   tTempFah.SelectionStart = 0;
   tTempFah.SelectionLength = 0;
}
The very last step is to associate the appropriate click event capture method with the Click event of our buttons. To do this we place the following two lines in the constructor of our class.

bnCtoF.Click += new EventHandler(this.bnCtoF_Click);
bnFtoC.Click += new EventHandler(this.bnFtoC_Click);
The complete code looks like this:

using System;
using System.WinForms;

public class TempConverter : System.WinForms.Form {

   Label   lTempFah = new Label();
   Label   lTempCel = new Label();
   TextBox tTempFah = new TextBox();
   TextBox tTempCel = new TextBox();
   Button  bnCtoF = new Button();
   Button  bnFtoC = new Button();

   public TempConverter() {
      this.SetSize(180,90);
      this.BorderStyle = FormBorderStyle.FixedDialog;
      this.Text = "C->F / F->C";
      this.StartPosition = FormStartPosition.CenterScreen;
      this.HelpButton = false;
      this.MaximizeBox = false;
      tTempCel.TabIndex = 0;
      tTempCel.SetSize(50,25);
      tTempCel.SetLocation(13,5);
      lTempCel.TabStop = false;
      lTempCel.Text = "C";
      lTempCel.SetSize(25, 25);
      lTempCel.SetLocation(65,5);
      tTempFah.TabIndex = 1;
      tTempFah.SetSize(50,25);
      tTempFah.SetLocation(90,5);
      lTempFah.TabStop = false;
      lTempFah.Text = "F";
      lTempFah.SetSize(25,25);
      lTempFah.SetLocation(142,5);
      bnCtoF.TabIndex = 2;
      bnCtoF.Text = "C to F";
      bnCtoF.SetSize(70,25);
      bnCtoF.SetLocation(13,35);
      bnCtoF.Click += new EventHandler(this.bnCtoF_Click);
      bnFtoC.TabIndex = 3;
      bnFtoC.Text = "F to C";
      bnFtoC.SetSize(70,25);
      bnFtoC.SetLocation(90,35);
      bnFtoC.Click += new EventHandler(this.bnFtoC_Click);
      this.Controls.Add(tTempCel);
      this.Controls.Add(lTempCel);
      this.Controls.Add(tTempFah);
      this.Controls.Add(lTempFah);
      this.Controls.Add(bnCtoF);
      this.Controls.Add(bnFtoC);
   }

   public static void Main() {
      Application.Run( new	TempConverter() );
   }

   private void bnCtoF_Click(Object sender, EventArgs e) {
      double dTempCel = 0;
      double dTempFah = 0;
      try { dTempCel = tTempCel.Text.ToDouble(); }
      catch(Exception) {
         tTempCel.Clear();
         tTempFah.Clear();
         return;
      }
      dTempFah = 1.8*dTempCel+32;
      tTempFah.Text = dTempFah.ToString();
      tTempFah.Focus();
      tTempFah.SelectionStart = 0;
      tTempFah.SelectionLength = 0;
      tTempCel.Focus();
      tTempCel.SelectionStart = 0;
      tTempCel.SelectionLength = 0;
   }

   private void bnFtoC_Click(Object sender, EventArgs e) {
      double dTempCel = 0;
      double dTempFah = 0;
      try { dTempFah = tTempFah.Text.ToDouble(); }
      catch(Exception) {
         tTempCel.Clear();
         tTempFah.Clear();
         return;
      }
      dTempCel = (dTempFah-32)/1.8;
      tTempCel.Text = dTempCel.ToString();
      tTempCel.Focus();
      tTempCel.SelectionStart = 0;
      tTempCel.SelectionLength = 0;
      tTempFah.Focus();
      tTempFah.SelectionStart = 0;
      tTempFah.SelectionLength = 0;
   }
}
Copyright 1998-2005, Games++ All rights reserved. | Privacy Policy