Introduction to Using C# for

Graphics and GUIs

Learning Objectives:
• C# - Getting Started with Forms
• Simple Gui Components: Buttons, Labels,
TextBoxes
• MessageBoxes
• Debugging in C#

1
 Using Visual Studio 2010 Development Platform:
Try this along with me
1. Starting the program: Select Start | All Programs | Microsoft
Visual Studio 2010 | Microsoft Visual Studio 2010
2. You may have to select the default environment settings. If
so, select “Visual C# Development Settings.” Then select
the Start Visual Studio button. You may have to wait awhile
for it to start.
3. Select File | New | Project. Under Installed Templates:
Select Visual C#. Then to the right: select Windows Forms
Application. Enter a project name towards the bottom,
Example: FirstForm. For the location field, type H: then click
the Browse button. Select the H: drive under My Computer
then select your CS101 folder. Click OK.
4. An error message may appear. Click OK – we’ll deal with
that later, if necessary.
2
 Creating Basic GUIs in VS 2010
5. A default form will appear. Right-click in the form and select View
Code. Notice the code isn’t in a .cpp file, it is in Form1.cs. This is
the code that creates the form. It is also where you will add your
code.
6. Go back to the Form1.cs [Design] tab. (Look above the code to see
the tabs.) On the right side of the screen you may see properties of
that form. (If it isn’t there right-click on the form and select
Properties.) Scroll down in the properties window and see what you
can change about this form.
7. Let’s change the name of the form that appears in the blue at the
top: In the Text field, change Form1 to MyForm. (Note – do not
change the Name field).
8. See if you can change the size to 600 x 500 pixels. Also change
the background color to Khaki.
9. Select the green play button to compile and run the program or go
to the menu: Debug | Start Debugging.

3
 Adding Components
1. On the far right-hand or left-hand side of the screen, you
should see a tab that says Toolbox. (If not, select View and
Toolbox.) Select the toolbox and a list of components should
appear (Common Controls holds most of what we’ll use).
Select a label then use the mouse to drag an area on your form
where you want the label to appear.
2. With the label selected, in the properties window (lower right of
screen), find the (Name) field. Change this to labelTitle. The
name is what you will use to refer to this label within your code.
If you are going to have more than one label, it is good to make
these descriptive. If you are going to change the name, you
should do it before you make any functions that use that
component. (The earlier the better.)
3. Make other changes to your label using the properties window,
such as font, color, etc.
4. Now add a button and change its properties to look like you
want it to look.
5. Finally, add a TextBox and mess with its properties.
Note that all of the things you do here are reflected in the code. 4
(VS2010 writes this code for you in Form1Designer.cs)
 Methods in C#
When using C# or Java, functions are called
Methods.

When using Visual Basic or FORTRAN, functions

are called subroutines.

Math Methods and Constants in C#

To use methods from math, such as sin and cos, use
“Math.” Methods use parentheses, constants
don’t.
Examples: y=Math.Cos(x);
A=2.0*Math.PI*r*r; 5
 Creating a method to do something when
you select a button
Make sure button is selected, then find the lightning-bolt icon at the top of
your properties window. Then double click in the white area next to
Click (where it says button1_Click).

This will create a function that will do something (whatever you program)
when the user clicks the button. Notice that you could have chosen
to do something when the user does something else to the button,
like drags it.

To get back to the properties window, click the little toolbar button that
looks like a bullet list next to the lightning bolt.

You’ll put your code in this method to make the button do

something.
6
 Getting/Changing Text in a TextBox
All of the text used in your form’s components are in the form of
a String object. (note the capital s)

To Get what a user has typed in your TextBox:

String s = textBox1.Text; //now s contains the text from textBox1
The Text property holds whatever is in the textBox
Declares s as a String
The . brings up methods and properties for the textBox
Name of the textBox

To Set what is typed in a TextBox:

textBox1.Text=“some stuff”;

You can do the same thing with labels. Note there are no
parentheses. Text is a property of textBox1 (like a field in a
structure). If Text was a method of textBox1, it would have
parentheses.
7
 Try This
Make sure you have a button, a label, and a textbox on your
form. Make a program that works as follows:

When you click the button, the label text becomes whatever was
in your textbox. Experiment with it by changing the text in
the textbox and watching the label change.

Hint – Even though you are changing the label and using the
textbox, it is the button that should start the process.
Therefore, you make the method for the button_click, not
label_click or textBox_change. Think about what the user
will do and when you want the code to be executed before
creating the method. If you accidentally click on the wrong
component or the form and get an extra method, let me
know and I’ll show you how to fix it.

When you get error messages at the bottom, click on them

to take you to the line with the error!
8
 Message Boxes
Now that you have a form, you can’t use printf to write stuff to
the screen.
To debug, you can use breakpoints and the watch window
which I’ll show you later. You can also write messages to
yourself to a message box.
A message box can also be used to tell the user something,
possibly an error message.

Here is how to make a message box:

MessageBox.Show(“Your message”,”Optional Title”);

Try It. When you click on your button, have a message

appear.
9
 Converting String values to numbers and
numbers to Strings
Example: This code converts the value in the textbox from a String to a
double and assigns the double value to x:
double x;
x=System.Convert.ToDouble(textBox1.Text); //String to double

textBox2.Text=x.toString(); //double to String

//The following is another way to do the same thing:

textBox2.Text = System.Convert.ToString(x);

//There are similar conversions to integers, etc.

Note: Remember textBox1 represents the box with all of its properties.
You need textBox1.Text to get to the text inside the box. This is
wrong: textBox1 = “Hey”; It should be textBox1.Text = “Hey”;10
 Debugging Your Programs
1. If you have compiler errors, double-click on the first error. Normally, this
should take you either to the line with the error, or one or two lines below
the error. Fix this, then re-compile. Many times, the subsequent errors
were caused by this first error and will disappear when you recompile.
2. To test for logic errors:
• Figure out what your variables should equal at various places in the
code
• You can use a MessageBox or label to write values to the screen that
you want to monitor. Compare these to what they should equal at
different parts of the code to figure out what is wrong. One that I use a
lot:
MessageBox.Show(“Inside if”); //this tells me if I ever got inside
//a particular if statement
• You can narrow down problem areas by commenting out sections of
code
• Use the Visual Studio debugging Features (see web sites such as
http://www.odetocode.com/Articles/425.aspx or
http://content4.catalog.video.msn.com/e2/ft/share13/89ea/0/winvideo-
11
LINQ-DebuggingTipsNTricks.wmv)
 Visual Studio Debugging Features
1. Breakpoints  click in gray bar next to line where you want
the program to stop. Run the program using Start
( button) (not Start without Debugging), the program
stops at each breakpoint. Once stopped, you can see what
all of your variables equal at that point in the program. Hit
to continue after it’s stopped. To remove breakpoints,
just click on the dots that indicate where they are. To see
the value of a variable, use the windows at the bottom of the
screen.
2. More features and details on the web site.

12
 Some tips
1. If you copy a program from one computer to another, you
usually have to delete the Debug folders from both the
Solution directory and the Project directory. If you get a
linker error, try deleting all Debug folders.
2. The program is automatically saved every time you
compile and run it. Never use “Save As.” If you want to
copy your project, start a new one and copy and paste the
text.
3. You can have more than one Visual Studio open at the
same time. Just use Start | Programming | Visual Studio
2010 | Visual Studio 2010 to open a new one.
4. To build without running (which is like typing make),
right click on your project name and select Build
5. You can execute your program from My Computer:
Find the file that is the executable within your project
directory and double-click it. It should run your program.13