INTRODUCTION TO C# GUI
Objectives
2
Create a Form in the Visual Studio IDE
Use the Toolbox to add a Button to a Form
Add Labels and TextBoxes to a Form
Name Forms and controls
Correct errors
Decide which interface to use
2
Creating a Form in the IDE
3
Forms are GUI objects that provide an interface for
collecting, displaying, and delivering information
Select New Project after starting Visual Studio
Then choose Windows Forms Application
After you click OK in the New Project window, you
see the IDE main window
3
Creating a Form in the IDE (cont’d.)
4
4
Creating a Form in the IDE (cont’d.)
5
Creating a Form in the IDE (cont'd.)
6
The name of the application shows in three places:
the title bar, the Solution Explorer, and the
Properties window
The main menu lies horizontally across the top
The Toolbox tab provides a list of controls you
can drag onto a Form
The Form Designer appears in the center of the
screen
The Solution Explorer allows viewing and
managing project files and settings
Creating a Form in the IDE (cont'd.)
7
The Properties window is for configuring
properties and events on controls in your user
interface
The error list displays messages about compiler
errors in your code
Creating a Form in the IDE (cont'd.)
8
The Program.cs file contains the automatically
generated Main() method of the application
Form1.cs contains other automatically generated
code
The code describes what tasks you will assign to the
controls in your application
When you create a Windows Form project, Visual
C# adds a Form to the project and calls it Form1
Creating a Form in the IDE (cont'd.)
9
Creating a Form in the IDE (cont'd.)
10
In the Properties window, you can change the
appearance, size, and color of a window
The Form class contains around 100 properties
Property names appear in alphabetical order
(except for Name)
Creating a Form in the IDE (cont'd.)
11
Using the Toolbox to Add a Button
12
to a Form
When you open the IDE, the left border displays a
Toolbox tab
◦ Open the toolbox, and a list of tool groups is displayed
◦ The tool groups includes the controls you have seen
when using a Windows application
You can drag controls (such as a Button) onto a
Form
You can relocate a control by dragging it or delete
it by selecting it and pressing the Del key
Using the Toolbox to Add a Button
13
to a Form (cont'd.)
A Button is a clickable object that allows a user
to interact with a GUI program
By default, the first button dragged on is named
button1
You should probably change the name to something
meaningful
When you click on a control, the Properties
window shows its properties
Using the Toolbox to Add a Button
14
to a Form (cont'd.)
Using the Toolbox to Add a Button
15
to a Form (cont'd.)
Using the Toolbox to Add a Button
16
to a Form (cont'd.)
Adding functionality to a Button is easy with the
IDE
After dragging the button on to a Form, you double-
click on it to create a method that executes when the
user clicks the Button
You can view the code by selecting View and then
Code from the main menu
Using the Toolbox to Add a Button
17
to a Form (cont'd.)
Using the Toolbox to Add a Button
18
to a Form (cont'd.)
You will see many generated statements, some
confusing
To make a Button perform an action, you can
ignore most of these
Write code between the curly braces of the
button1_Click() method
If you change the Name property of the button1
object, the name of its subsequently created
Click() method will also change automatically
You can write anything you want in the Click()
methods
Adding Labels and TextBoxes to a
19
Form
Labels are controls that you use to display text to
communicate with an application’s user
You can drag a Label onto a Form, just like a
Button
You can change its Text property to display any
text you like
◦ Depending on the amount of text, you may need to
resize the label
In Figure 3-7, “Enter a number” has been assigned
to label1’s Text property
Adding Labels and TextBoxes to a
20
Form (cont'd.)
Adding Labels and TextBoxes to a
21
Form (cont'd.)
TextBoxes are controls through which a user can
enter input data in a GUI application
If a user is supposed to enter data in a TextBox, you
frequently want to start with its Text property empty
When a user types a value into a TextBox, it
becomes the value of the Text property
It is a string by default
If the user is supposed to enter a number, you’ll have to
convert it, just as in a console application
Adding Labels and TextBoxes to a
22
Form (cont'd.)
Adding Labels and TextBoxes to a
23
Form (cont'd.)
The form on the next slide is meant to have the user
enter two numbers in the TextBoxes
When the user clicks the Button, the sum of the
two numbers will be displayed in label3
You must create the code to do the addition
It goes in the button1_Click() method
Adding Labels and TextBoxes to a
24
Form (cont'd.)
Adding Labels and TextBoxes to a
25
Form (cont'd.)
Adding Labels and TextBoxes to a
26
Form (cont'd.)
Adding Labels and TextBoxes to a
27
Form (cont'd.)
Naming Forms and Controls
28
Provide reasonable Name property values for all the
controls you place on a Form
Conventionally, start control names with a lowercase letter
and use camel casing
Start Form names with an uppercase letter and use camel
casing
A Form is a class, and C# class names conventionally start with
an uppercase letter
Use the type of object in the name
To rename a control after you have generated code for it,
use the code refactoring feature
Naming Forms and Controls (cont'd.)
29
Naming Forms and Controls (cont'd.)
30
When you click Rename, a dialog box opens
Type the new method name
A Preview Changes dialog box will highlight the
change
Confirm the change by clicking Apply
Naming Forms and Controls (cont'd.)
31
Correcting Errors
32
As in console-based programs, you will often generate
syntax errors
If you build or run a program with an error, you will
see “Build failed” in the lower-left corner of the IDE
You will also see an error dialog box
◦ Always click No in response to “Would you like to
continue and run the last successful build?”
Errors will be listed in the error list at the lower-left
corner of the screen
Double-clicking an error message will take you to the
location in the code where the error was found
Correcting Errors (cont'd.)
33
Correcting Errors (cont'd.)
34
Correcting Errors (cont'd.)
35
When you are working in the Form Designer, it is easy
to inadvertently double-click a control and create an
event-handling method you don’t want
◦ You can leave the event-handling method empty, but that’s
considered bad form
◦ You cannot just delete the method because, behind the
scenes, other code will have been created that refers to the
method
◦ Instead, go to the Properties window of the control, and
then click on its Events button, select the button you want
to eliminate, and delete the method name
Correcting Errors (cont'd.)
36
Deciding Which Interface to Use
37
You have learned to create:
Console applications
GUI applications
Both types contain basic building blocks
GUI applications
Look “snazzier” and are easy to use
GUI applications take longer to develop
Console applications
Simpler; may be better when learning new logical
constructs
You Do It
38
Working With the Visual Studio IDE
Providing Functionality for a Button
Adding a Second Button to a Form
Summary
39
Forms are GUI objects that provide an interface
for collecting, displaying, and delivering
information
The Toolbox displays a list of available controls
you can add to a Form
◦ This list includes Button, CheckBox, and Label
Labels are controls that you use to display text to
communicate with an application’s user
Provide reasonable Name property values for all
the controls you place on a Form
Summary (cont’d.)
40
If you build or run a program that contains a syntax
error, you see “Build failed” in the lower-left
corner of the IDE and an error dialog box
Both console and GUI applications can contain
variables and constants, decisions, loops, arrays,
and calls to other methods
◦ GUI applications
Look “snazzier”
Contain controls that a user can manipulate with a mouse
Usually take longer to develop
