Lecture 21




Log into Windows/ACENET.
Start MS Visual Studio, but do not create a
project. Today we will start writing Windows
GUI programs instead of console programs.
Reading material is in Chapters 9 and 10.
Questions?
Monday, February 28
CS 205 Programming for the Sciences - Lecture 21
1
Outline

Creating Windows GUI projects

Windows GUI designer


Forms, properties

Control elements - labels, textboxes, buttons
Code view


Events, event handling
Designer code
Monday, February 28
CS 205 Programming for the Sciences - Lecture 21
2
Creating a Windows GUI Project



In the New Project dialog, choose "Windows
Forms Application"
As usual, give the Project a reasonable name
like "CircumferenceForm"
A Windows GUI Project starts out with code
files "Program.cs" and "Form1.cs". Change the
name of "Form1.cs" (the main form file) to
"CircumferenceForm.cs" (and the class name
from "Form1" to "CircumferenceForm"). This is
the file our code will go into.
Monday, February 28
CS 205 Programming for the Sciences - Lecture 21
3
MS VS New Project Dialog
Monday, February 28
CS 205 Programming for the Sciences - Lecture 21
4
MS VS Changing Class Name
right-click on
"Form1.cs"
Monday, February 28
CS 205 Programming for the Sciences - Lecture 21
5
Windows Form



When a Windows GUI Project is started in MS
VS, it shows the designer view of the main
form. This is what the application will look like
when it is run.
A form is a container of GUI (control) objects.
MS VS has a built-in GUI designer that allows
us to create graphical user interface (GUI) by
selecting, placing, and sizing GUI objects.
The main form is automatically created when a
GUI project is created. Click and drag on the
handles to change its size.
Monday, February 28
CS 205 Programming for the Sciences - Lecture 21
6
Properties


Every GUI object has many properties (just like
arrays have a Length property). Many of these
properties can be set in the designer using the
Properties window.
If the Properties window is not visible, go to
View->Properties Window, and the Properties
window should appear in the lower left.
Monday, February 28
CS 205 Programming for the Sciences - Lecture 21
7
Properties Window
Properties
Window
Monday, February 28
CS 205 Programming for the Sciences - Lecture 21
8
Properties


Many GUI objects have the same named
properties, though sometimes they mean
different things in different objects.
Our first example is the Text property. This
property is a string and is usually visible in the
designer. For example, changing this property
in a Form object sets the title bar of the form.
Monday, February 28
CS 205 Programming for the Sciences - Lecture 21
9
Changing Form Text Property
Text property
of a form is its
title bar
Monday, February 28
CS 205 Programming for the Sciences - Lecture 21
10
Toolbox
Toolbox tab

Select Label

Monday, February 28
GUI control objects are
selected from the
Toolbox, which is
usually available by
rolling over the Toolbox
tab on the left side.
Our first GUI object will
be a Label. Click on it,
then click on the form.
CS 205 Programming for the Sciences - Lecture 21
11
Labels


Monday, February 28
Place the label where
you want it.
The Text property is
the label's text.
Change it to "Radius:"
CS 205 Programming for the Sciences - Lecture 21
12
Renaming GUI Objects


The designer creates GUI
objects with default (Name)
property like "button1".
You should always change
the Name property of a
GUI object to something
meaningful. Usually we
prefix them with what they
are, e.g. "lbl" for label.
Change this label's Name
to "lblRadius"
Monday, February 28
CS 205 Programming for the Sciences - Lecture 21
13
Textboxes



A textbox
Monday, February 28
User input often is
obtained through the
use of a Textbox.
Select Textbox from the
Toolbox and place it
next to the radius label
as shown on the left.
The prefix for textboxes
is "txt". Change this
textbox's Name to
"txtRadius".
CS 205 Programming for the Sciences - Lecture 21
14
In-class Exercise, Part 1



Add another label and
another textbox to the form
as shown on the right.
Change the label's Name
to "lblCircumference" and
its Text to
"Circumference:"
Change the textbox's
Name to
"txtCircumference"
Monday, February 28
CS 205 Programming for the Sciences - Lecture 21
15
In-class Exercise, Part 2


Select and place a Button below the labels and
textboxes.
The prefix for buttons is "btn". Change the
button's Name to "btnComputeCircumference"
and its Text to "Compute Circumference". The
Text is what is put inside the button. Usually it
is says what will happen when the button is
clicked. You will need to pull on the button
handles to make it big enough to see all of the
text.
Monday, February 28
CS 205 Programming for the Sciences - Lecture 21
16
Changing Fonts


Monday, February 28
Another common
property is Font. To
change this property,
click on the ... button
at the end of its value.
The usual Font dialog
appears. This change
is applied to the Text
property when it is
displayed.
CS 205 Programming for the Sciences - Lecture 21
17
In-class Exercise, Part 3



Change the font of the
labels, textboxes, and
button. (You need to
change the textboxes
so their text matches
the labels.)
Resize and rearrange
the objects as needed.
The example to the
right uses Comic Sans
MS, bold, 16pt.
Monday, February 28
CS 205 Programming for the Sciences - Lecture 21
18
Adding Code



Next class we will discuss events and event
handlers in detail. For today, we will just write a
simple event handler.
Now that the GUI for the application has been
designed, we want it to do a computation and
display a result.
To get the code view of our application, the
easiest way is to double-click on the button.
This also will create a stub for the event handler
connect to the button.
Monday, February 28
CS 205 Programming for the Sciences - Lecture 21
19
Code View
Code view tab
Designer view tab
Handler code
goes in here
Event handler stub
Monday, February 28
CS 205 Programming for the Sciences - Lecture 21
20
Code View



The code view is shown in a separate tab from
the designer view, and you can switch between
them as needed.
The event handler stub created when doubleclicking on a GUI object in the designer view, is
named <objectName>_<defaultEventName>.
For a button, the default event name is "Click",
so our handler's name is
"btnComputeCircumference_Click".
We will discuss the parameters on Wednesday.
Monday, February 28
CS 205 Programming for the Sciences - Lecture 21
21
Handler Code


A handler is a method that is run in response to
an event like a mouse click on a button. As
such it is sort of like the Main method in a
console application. We want to get the user
input, compute a result, and display the result.
The user input will come from the txtRadius
textbox. Whatever the user types in becomes
the value of its Text property. Since Text is a
string (like the user input from the console), we
use the Parse methods as appropriate.
Monday, February 28
CS 205 Programming for the Sciences - Lecture 21
22
Handler Code

Here is the code for getting the user input:
double radius = double.Parse(txtRadius.Text);

Computing the circumference is exactly the
same as before:
double circumference = 2 * Math.PI * radius;

Finally, to display the result, we will set the Text
property of the txtCircumference. In order to do
so, we need to convert the circumference
number into a string.
Monday, February 28
CS 205 Programming for the Sciences - Lecture 21
23
ToString Method


Every C# object defines a ToString method that
returns a string that represents the object
suitable for displaying. For console
applications, this is used automatically by
Console.WriteLine( ).
For GUI applications, we have to do this
explicitly. For numeric types, the format
specifiers may also be used as arguments.
txtCircumference = radius.ToString("F4");

"F4" is fixed point format with precision 4
Monday, February 28
CS 205 Programming for the Sciences - Lecture 21
24
Final Program
Monday, February 28
CS 205 Programming for the Sciences - Lecture 21
25
Running a GUI Program


To run the program,
use Debug->Start with
Debugging (or Start
without Debugging)
The user is expected
enter a number of the
radius. Clicking the
button will compute and display the
circumference. If the input is blank or not a
number, an error will occur.
Monday, February 28
CS 205 Programming for the Sciences - Lecture 21
26
Designer Code


Generally, you will never have to look at the
code generated by the GUI designer, but for the
curious, we will look at it just this once.
The designer generated code is stored in the
file named "<formName>Designer.cs". To see
today's program's designer code, click on the
mark next to "CircumferenceForm.cs" in the
solution window, then double-click on
"CircumferenceFormDesigner.cs"
Monday, February 28
CS 205 Programming for the Sciences - Lecture 21
27
Designer Code
Designer
code tab
Double-click
designer code file
under the form file
GUI variable
declarations
Monday, February 28
CS 205 Programming for the Sciences - Lecture 21
28
Designer Code


The designer code is all the code necessary to
create and set up the GUI control objects. The
first thing shown is the default method for when
the form is destroyed, which is to destroy all of
its component objects.
Also shown are the declaration GUI control
object variables. They are class variables
(declared inside the class, but outside any
method), which is why user code can access
them.
Monday, February 28
CS 205 Programming for the Sciences - Lecture 21
29
Designer Code


Hidden under the "Windows Form Designer
generated code" region is all of the code that
creates and sets up the properties of each GUI
element in the InitializeComponent method.
Clicking on the plus sign will unhide it.
Note that the syntax for something like creating
a font object is fairly complex, so sometimes we
look at this code to see what we would need to
do if we wanted to change something like a font
during program execution.
Monday, February 28
CS 205 Programming for the Sciences - Lecture 21
30
Designer Code
Code that creates
the GUI objects
Code that sets
up txtRadius
textbox
Monday, February 28
CS 205 Programming for the Sciences - Lecture 21
31