DevCentral - An Introduction to C# GUIs by Example

The original article for this PDF can be found on DevCentral.

http://devcentral.iticentral.com

An Introduction to C# GUIs by Example

by Joey Mingrone

Comment on this article

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.

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";

http://devcentral.iticentral.com/articles/CSharp/Csharp_GUIs/default.php (1 of 5) [7/9/2001 2:53:33 PM]

DevCentral - An Introduction to C# GUIs by Example

this.StartPosition = FormStartPosition.CenterScreen;
this.HelpButton = false;
this.MaximizeBox = false;

So, let’s 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. Here’s 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 you’ve 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 won’t 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. Here’s 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";

http://devcentral.iticentral.com/articles/CSharp/Csharp_GUIs/default.php (2 of 5) [7/9/2001 2:53:33 PM]

DevCentral - An Introduction to C# GUIs by Example

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. Here’s 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 didn’t set the cursor to the beginning we would see the end of long numbers and have to scroll over to see the
beginning).

http://devcentral.iticentral.com/articles/CSharp/Csharp_GUIs/default.php (3 of 5) [7/9/2001 2:53:33 PM]

DevCentral - An Introduction to C# GUIs by Example

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";

http://devcentral.iticentral.com/articles/CSharp/Csharp_GUIs/default.php (4 of 5) [7/9/2001 2:53:33 PM]

DevCentral - An Introduction to C# GUIs by Example

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;
}
}

© 2001 Interface Technologies, Inc. All Rights Reserved

Questions or Comments? [email protected]
PRIVACY POLICY

http://devcentral.iticentral.com/articles/CSharp/Csharp_GUIs/default.php (5 of 5) [7/9/2001 2:53:33 PM]