Visual Programming Using C#

By Dr. Waheed Anwar

 Introduction to
Windows Forms Applications

2
 1. GUI
Introduction

GUI = Graphical User Interface

Allows the user to interact visually with a
program

This is the “make it pretty” part

3
 Building GUI


GUI's are built from GUI controls
 Also known as components or widgets
 They are objects that can:
 Display information on the screen, or
 Enable users to interact with an application via
the mouse, keyboard or other form of input
 Examples - commonly used types of GUI
controls

Label, TextBox, Button, CheckBox ComboBox,
ListBox
4
 GUI in MS Visual Studio for C#: Windows
Forms

Windows Forms (or “Forms”) - used to
create GUI's for C# programs

Create graphical elements that appear on
the desktop (dialog, window, etc.)

5
 Components for GUI

For future use:
Component is an instance of a class that implements the IComponent
interface
 We’ll cover interfaces later – they define what operations can
happen but not how they are performed


GUI controls are components
 Some have graphical representation
 E.g., Form, Button, Label
 Others do not
 E.g., Timer

6
 2. Using Toolbox in Visual Studio to Create
GUIs

The controls and components of C# are found in the C#
Toolbox in Visual Studio

Organized by functionality


To open Toolbox (takes time!):

Menu/Item: View>>Toolbox:


To add a component to a Form:
-
Select that component in Toolbox
-
Drag it onto the Form

7
 8

Using the Toolbox - Basics

• (After you open it with:

View>>Toolbox), the
toolbox is located on the
left-hand side of the VS
screen

• Click on the control you

want to add and drag it
to the form
3. Properties and Methods for GUI Controls

Each control has properties (and some methods)

Example properties:
 Enable
 Font
 Text
 Visible

Example methods:
 Hide
 Select
 Show

9
 10

Editing the Properties

• Click on the control for

which you want to change
the properties
– E.g., click on form, button,
label, etc.
• You can make these
changes in the Properties
window located on the
bottom right
 4. Naming Controls

• In C#, default names for

controls/components are:
– button1, label1, textbox1, etc.
• not very descriptive (“generic”)

• Use better, descriptive names

– Names to have meanings that make
sense

11
 Conventions for Naming Controls - Start the
control name with...
• Control • Begin name with
– Button – btn
– TextBox – txt
– ListBox – lbox
– Label – lbl
– SaveFileDialog – sfd

• Examples of Naming Controls

– A button used to calculate a total:
– btnCalcTotal
– A textbox that allows a user to enter her name:
– txtEnterName

12
The following slides are based on textbook
slides

NOTE:
Formatting changed, some other changes made by L. Lilien

13
 5. In-class Exercise:
Using Visual Programming to
Create a Simple Program that Displays Text
and an Image
• This section based on textbook slides for Section 2.6
(p. 40-ed.4; p.51-ed.3)

• We will follow (most of) the steps shown on the

following slides for this lecture section

14
Using Visual Programming to Create a Simple Program that
Displays Text and an Image (Cont.)
• This program just displays such window:

Label control

PictureBox control

Fig. 2.25 | Output of the

simple program.

• Controls that will be used for this programs;

– A Label — contains the descriptive text
– A PictureBox — displays the image
• Such as the Deitel bug mascot

15
 Using Visual Programming to
Create a Simple Program that Displays Text
and an Image (Cont.)

• Start your Visual Studio.

16
 Using Visual Programming to Create … (Cont.)

• Select File > New
Project… and
select Windows
Forms
Application
template (Fig. 2.27)
• Name the project
ASimpleProgram
• Click Browse to
select directory for
saving this project.
Template types
Type the project name

Fig. 2.27-ed.3 | New Project dialog (updated by

LL).
17
 Using Visual Programming to
Create a Simple Program that …(Cont.)
• The following Project Location dialog shows up (Fig. 2.28).

Fig. 2.28-ed.3 | Project

Location dialog
(updated by LL).

• Select (or create) folder for the project.

• Click OK when done.

18
 Using Visual Programming to
Create a Simple Program that … (Cont.)

• Click OK again when

the New Project
dialog shows up

Template types
Type the project name

Fig. 2.27-ed.3 | New Project dialog (updated by

LL).
19
 Using Visual Programming to Create … (Cont.)
• Right-click anywhere on the Form to display the Form’s properties
in the Properties window.
• Click in the textbox to the right of the Text property box and type
“A Simple Program” (Fig. 2.30)
Name and type of control

Fig. 2.30-ed.3 | Setting the Selected property Property value

Form’s Text property in

the Properties Property description

window.
• Press Enter
– See the Form’s title Title bar

bar updated immedia-

tely (Fig. 2.31-ed.3).

Fig. | Form with the updated Text

property. 20
 Using Visual Programming to Create … (Cont.)

• Resize the Form by clicking and dragging one

of the enabled sizing handles (Fig. 2.31).

Enabled sizing
handles

Fig. 2.31 | Form with enabled sizing handles.

21
 Using Visual Programming to
Create a Simple Program that … (Cont.)

• Make the Form larger

– Select the bottom-right sizing handle and drag it
down and to the right to (Fig. 2.32).
– Watch that the Size property changes after
dragging
– Note: You can also resize a Form by typing new
value for the Size property.

Fig. 2.32 | Resized Form.

22
 Using Visual Programming to Create a Simple Program
Program that …(Cont.)
• In the Properties window, click BackColor
– A down-arrow button to appears to the right of BackColor(Fig. 2.33).
• Click on the down-arrow button
– The arrow displays for Custom, Web and System tabs
• For Custom, Web and System colors
• Click the Custom tab
– Displays the palette Current color

– Select light blue (in the top row).

Down-arrow button
Custom palette

Light blue

Fig. 2.33 | Changing the Form’s BackColor property. 23

 Using Visual Programming to
Create a Simple Program that Displays Text and an Image
(Cont.)

• Once you select the color, the Form’s

background changes to light blue (Fig. 2.34).

New background color

Fig. 2.34-ed.3 | Form with new BackColor property applied.

24
 Using Visual Programming to
Create a Simple Program that Displays Text and an Image
(Cont.)
• If the toolbox is not open, open it
– View>>Toolbox (might be slooow, be patient)
• Add a Label (will contain “Welcome to Visual C#!”)
– Find and drag the Label control from the Toolbox to the
Form (Fig. 2.35)
OR: Label control

– Double click the

Label control
in the Toolbox

Fig. 2.35 | Adding a Label to the Form.

25
 Using Visual Programming to Create … (Cont.)

• Click on the Label to make its properties appear in the

Properties window (Fig. 2.36).
• Click on the Label’s Text property, then on the down-arrow
that shows up.
• Replace the text label1 with the text Welcome to Visual
C#!
– See new text showing up in the label

26
 Using Visual Programming to Create … (Cont.)
• Move the Label by dragging it
– OR: by selecting it, and then using the left and right arrow keys
• Select the Label and center it
– Format>>Center in Form >> Horizontally

• Now the form looks like this:

Sizing Label centered with

handle updated Text property
s

Fig. 2.37 | GUI after the Form and Label have been customized. 27
 Using Visual Programming to Create … (Cont.)

• Set the AutoSize property to False

– If the AutoSize property is set to True, it
automatically resizes the Label to fit its text
• We will change it, and we don’t want automatic
resizing

AutoSize
property

Fig. 2.36 | Changing the

label1’s AutoSize
property to False.
28
 Using Visual Programming to Create … (Cont.)

• Change the font of the Label’s text

– Click on the Font property (Fig. 2.38).
– The ellipsis button appears
– Click on the ellipsis button
• The Font dialog appears (next slide)

Ellipsis button

Fig. 2.38 | Properties window displaying the Label’s properties.

29
 Using Visual Programming to
Create a Simple Program that … (Cont.)
• The Font dialog (Fig. 2.39) allows you to select the font
name, style and size.
– Under Font, select Segoe UI.
– Under Size, select 24 points
– Click OK.
• Resize the Label if it’s not large enough to hold the text.

Current font

Font sample

Fig. 2.39 | Font dialog for selecting fonts, styles and sizes. 30
 Using Visual Programming to
Create a Simple Program that Displays Text and an Image
(Cont.)

• Select the Label’s TextAlign property

(Fig. 2.40)
– Set it to MiddleCenter

Text alignment
options

MiddleCenter
alignment option

Fig. 2.40 | Centering the Label’s text.

31
 Using Visual Programming to Create …(Cont.)

• Make sure that text in the label is in two rows

(see Fig. below).
– If not, adjust label size to have text in 2 rows as
shown
• Drag PictureBox from the Toolbox to
the Form (Fig. 2.41). Updated
Label

PictureBox

Fig. 2.41 | Inserting and aligning a PictureBox.

32
 Using Visual Programming to
Create a Simple Program that Displays Text and an Image
(Cont.)
• Click the PictureBox to display its properties in the
Properties window (Fig. 2.42).
• The Image property displays a preview of the image, if one
exists.

Image property value

(no image selected)

Fig. 2.42 | Image property of the PictureBox.

33
 Using Visual Programming to Create … (Cont.)

• From the instructor’s web page, get the file with the image of
the happy bug
Lect.5b--bug Fig 2.44 for Sect.2.6__ bug.PNG file
.
• Save it (e.g., on the desktop).

34
 Using Visual Programming to Create … (Cont.)

• Click the Image property.

– The ellipsis button appears
• Click the ellipsis button
– The Select Resource
dialog appears (Fig. 2.43)

• Select Local resource radio

button
• Click the Import… button
Fig. 2.43 | Select Resource
dialog to select an image for the
PictureBox.

35
 Using Visual Programming to Create … (Cont.)
• In the dialog that appears, locate the image
file, select it and click Open ( or OK).
• The image should show up in the Select
Resource dialog (Fig. 2.44).
• Click OK
– The image (or its part) shows up in your program
window.

Image file name

Fig. 2.44 | Select Resource dialog displaying a preview of selected image. 36

 Using Visual Programming to Create … (Cont.)

• Size the image to the PictureBox:

– Click on the SizeMode property
• Down-arrow shows up to the right
– Use the down-arrow to select StretchImage
(Fig. 2.45).
SizeMode
SizeMode
property set to
property
StretchImage

Fig. 2.45 | Scaling an image to the size of the PictureBox.

37
 Using Visual Programming to Create … (Cont.)

• Adjust the size of the image to visually match

the following figure
– Use the sizing handles of the PictureBox

Newly
inserted
image

Fig. 2.46 | PictureBox displaying an image.

38
 Using Visual Programming to Create … (Cont.)

• We have created form not by programming, but by

drawing it
– But code exists!
– Code has been generated for you automatically

• How to see the code generated for the form you

drew?
– Go to Solution Explorer window
– Click on small triangle next
to Form1.cs
– Double-click on Form1.Designer.cs
39
• Detailed code for Form1 shows up
 Using Visual Programming to Create … (Cont.)

• How to see the rest of the code generated for the

form you drew?
– You are in the Design View -------->
• It is the Form1.cs [Design] window
• You used it to draw the form

– Switch from the Design View to

the Code View as follows:
• View >> Code
(or use F7)
- You will be shown the Form1.cs window (next slide)
- Not the Form1.cs [Design] window

Slide added by L. Lilien 40

 Using Visual Programming to Create …(Cont.)
• You are now in the Code View -------->
– It is the Form1.cs window
– It shows the rest of the code
automatically generated for Form1

• You can switch from Code View to Design(er) View as follows:

View >> Designer
(or use SHIFT+F7)

Slide added by L. Lilien

41
 Using Visual Programming to Create … (Cont.)

• Select File >> Save All to save the entire solution

• Select Build>>Build Solution

Build menu

42
 Using Visual Programming to Create … (Cont.)
• Select Debug >> Start Debugging to compile and
execute the program (Fig. 2.48).
IDE displays text Running, which
signifies that the program is executing

Close box

Form

Running program

Fig. 2.48 | IDE in run mode, with the running program in the foreground. 43