c# pdfsharp pdf to image : Add an image to a pdf form Library SDK component .net wpf windows mvc 01360530331-part13

Tutorial 3
Welcome
A
pplica
t
io
n
49
simplyvb2008_03.fm
January 28, 2008 5:12 pm
© 2008 by Deitel & Associates, Inc. All Rights Reserved.
2.
Setting the 
Image
property. Click the 
PictureBox
to display its properties in
the Properties window. Locate the 
Image
property, which displays a preview
of the image (if one exists). No picture has yet been assigned to the 
Image
property, so its value is 
(none)
(Fig.3.25) and an empty white box to the left
of 
(none)
. You can use any of several popular image formats, including
PNG (Portable Network Graphics)
GIF (Graphic Interchange Format)
JPEG (Joint Photographic Experts Group)
BMP (Windows Bitmap)
For this application, you use a PNG-format image. Creating new images
requires image-editing software, such as Corel
®
Paint Shop Pro
®
Photo X2
(
www.corel.com
), Adobe
®
Photoshop
®
(
www.adobe.com
), Adobe
®
Fire-
works
®
(
www.adobe.com
) or Microsoft
®
Paint (provided with Windows).
You do not create images in this book; instead, you’re provided with the
images used in the tutorials.
Figure 3.25 Image
p
r
ope
rty 
o
f th
e
PictureBox
.
3.
Displaying an image. In the Properties window, click the value of the 
Pic-
tureBox
’s 
Image
property to display an ellipsis 
Button
(Fig. 3.25). Click the
ellipsis button to display the Select Resource dialog (Fig. 3.26). You can
also display the dialog by clicking the Choose Image link in the property
description. The Select  Resource dialog is used  to import  files, such as
images, to any application. Click the Import… button to browse for an image
to  insert.  In  our  case,  the  picture is 
bug.png
. In  the  Open  dialog that
appears, navigate to the 
C:\Examples\Tutorial03\CompletedApplica-
tion
directory. Select 
bug.png
and click the Open 
Button
. (Fig. 3.27). The
image is previewed in the Select Resource dialog (Fig. 3.28). Click OK to
place the image in your application. Note that the 
PictureBox
does not dis-
play the entire image (Fig. 3.29). You solve this problem in the next step. 
Figure 3.26 Select
Resource
dialog
t
o
s
elec
a
i
m
age
f
o
r th
e
PictureBox
.
(cont.)
GUI Design Tip
Us
e
PictureBox
e
s t
o
e
nh
a
n
ce
GU
I
s
w
i
th 
g
r
ap
h
ic
 th
a
 us
e
rs 
ca
nn
o
t
c
h
a
n
ge
.
Image
p
r
ope
rty v
al
u
e
(n
o
i
m
age
s
elec
t
ed
)
E
llip
s
i
Button
Choose Image
li
nk
I
m
age
p
r
e
v
ie
bo
x (n
o
i
m
age
c
urr
e
nt
l
di
s
pla
y
ed
)
Add an image to a pdf form - C# PDF Field Edit Library: insert, delete, update pdf form field in C#.net, ASP.NET, MVC, Ajax, WPF
Online C# Tutorial to Insert, Delete and Update Fields in PDF Document
pdf create fillable form; add fillable fields to pdf online
Add an image to a pdf form - VB.NET PDF Field Edit library: insert, delete, update pdf form field in vb.net, ASP.NET, MVC, Ajax, WPF
How to Insert, Delete and Update Fields in PDF Document with VB.NET Demo Code
pdf form creation; cannot edit pdf form
50
I
ntr
od
u
c
t
io
n t
o
V
i
su
al
Pr
og
r
a
mm
i
n
g
Tutorial 3
simplyvb2008_03.fm
January 28, 2008 5:12 pm
© 2008 by Deitel & Associates, Inc. All Rights Reserved.
Figure 3.27 Open
dialog
us
ed
t
o
b
r
o
ws
e
f
o
a
PictureBox
i
m
age
.
Figure 3.28 Select
Resource
dialog
di
s
pla
y
i
n
g
a
p
r
e
v
ie
o
f s
elec
t
ed
i
m
age
.
4.
Sizing the image to fit the PictureBox. We want the image to fit in the
PictureBox
PictureBox
property SizeMode specifies how an image is
displayed in a 
PictureBox
. To size the image to fit in the 
PictureBox
,
change the 
SizeMode
property to StretchImage, which scales the image
(changes its width and height) to the size of the 
PictureBox
. To resize the
PictureBox
, double click the 
Size
property and enter 
500
250
. Center
the image horizontally by clicking the 
PictureBox
and selecting Format >
Center in Form > Horizontally. The 
Form
should now look like Fig.3.30.
[Note: You may need to move the 
PictureBox
up or down at this point to
make your 
Form
appear as it does in Fig. 3.30. To do this, you can simply
click the 
PictureBox
, then use the up and down arrow keys.]
Figure 3.29
N
e
w
l
i
ns
e
rt
ed
i
m
age
.
bug.png
f
ile
(m
a
di
s
pla
y
bug
depe
n
di
n
g
o
n wh
e
th
e
r
y
o
ur 
co
m
p
ut
e
i
s s
e
t t
o
di
s
pla
y f
ile
n
a
m
e
e
xt
e
ns
io
ns)
(cont.)
GUI Design Tip
I
m
age
s sh
o
u
ld
f
i
i
ns
ide
th
ei
Pic-
tureBox
e
s. 
T
h
i
ca
be
ac
h
ie
v
ed
b
y
s
e
tt
i
n
g
PictureBox
p
r
ope
rty 
Size-
Mode
t
o
StretchImage
.
PictureBox
t
oo
sm
all
f
o
i
m
age
C# PDF insert image Library: insert images into PDF in C#.net, ASP
Insert images into PDF form field. Access to freeware download and online C#.NET class source code. How to insert and add image, picture, digital photo, scanned
add fields to pdf; best program to create pdf forms
VB.NET PDF insert image library: insert images into PDF in vb.net
Add images to any selected PDF page in VB.NET. attributes adjust functionalities, such as resize image by zooming Insert images into PDF form field in VB.NET.
changing font size in pdf form; convert word doc to pdf with editable fields
Tutorial 3
Welcome
A
pplica
t
io
n
51
simplyvb2008_03.fm
January 28, 2008 5:12 pm
© 2008 by Deitel & Associates, Inc. All Rights Reserved.
Figure 3.30 PictureBox
di
s
pla
y
i
n
g
a
i
m
age
.
5.
Locking the 
Form
controls. Often, programmers accidentally alter the size
and location of controls on the 
Form
. To ensure that the controls remain in
position, select Format > Lock Controls (Fig. 3.31). This locks all the con-
trols on the 
Form
. You can lock individual controls by setting the control’s
Locked
property to 
True
.
Figure 3.31
Loc
k
i
n
g
co
ntr
ol
b
y us
i
n
g
th
e
Format
m
e
nu.
6.
Saving the project. Select File > Save All to save your modified project.
You should save your files to your 
C:\SimplyVB2008
directory frequently.
Note, however, that it’s not necessary to save project files if you’re about to
run the application. When a Visual Basic application is run in the IDE, the
project files are automatically saved for you.
7.
Running  the application.  The text Welcome.vb  [Design] in the IDE’s
project tab (Fig. 3.6) indicates that we’ve been working in the IDE design
mode. (That is, the application being created is not executing.) While in
design mode, you have access to all the IDE windows (for example, Tool-
box, Properties), menus and toolbars. In run mode, the application is run-
ning, and you can interact with fewer IDE features. Features that are not
available are disabled (“grayed out”). Select Debug >Start Debugging to
run the application. Figure 3.32 shows the IDE in run mode. Note that
many toolbar icons and menus are disabled.
(cont.)
N
e
w
l
i
ns
e
rt
ed
i
m
age
Lock Controls
op
t
io
n
C# PDF Image Extract Library: Select, copy, paste PDF images in C#
Scan image to PDF, tiff and various image formats. Get image information, such as its location, zonal information Able to edit, add, delete, move, and output PDF
cannot save pdf form; change tab order in pdf form
C# PDF Form Data Read Library: extract form data from PDF in C#.
featured PDF software, it should have functions for processing text, image as well can help you have a quick evaluation of our PDF SDK. Add necessary references
create a pdf form that can be filled out; pdf form save in reader
52
I
ntr
od
u
c
t
io
n t
o
V
i
su
al
Pr
og
r
a
mm
i
n
g
Tutorial 3
simplyvb2008_03.fm
January 28, 2008 5:12 pm
© 2008 by Deitel & Associates, Inc. All Rights Reserved.
SE
L
F
-
REVIEW
1.
The 
Form
’s 
property specifies the text that is displayed in the 
Form
’s title bar.
2.
Property 
specifies how text is aligned within a 
Label
’s boundaries.
Answers: 1)
b.  
2)
d.
3.3 O
b
j
ec
ts Us
ed
in th
e
Welcome
A
pp
li
ca
ti
o
n
In Tutorials 1 and 2, you learned that controls are reusable software components
called objects. The Welcome application used a 
Form
object, a 
Label
object and a
PictureBox
object to create a GUI that displayed text and an image. Each of these
objects is an instance of a class defined in the .NET Framework Class Library
(FCL). The 
Form
object was created by the Visual Basic IDE. The 
Label
and 
Pic-
tureBox
objects were created when you double clicked their respective icons in the
Toolbox. 
We used the  Properties window  to  set the properties (attributes) for each
object. Recall that the 
ComboBox
—also called the component object box—at the
top of the Properties window displays the names and class types of 
Form
and con-
trol objects (Fig.3.33). In Fig. 3.34, the component object box displays the name
(
Welcome
) and class type (
Form
) of the 
Form
object. In the FCL, classes are orga-
nized by functionality into directory-like entities called namespaces. The class types
used in this application have namespace 
System.Windows.Forms
. This namespace
contains  control  classes  and  the 
Form
class.  You’ll be  introduced to additional
namespaces in later tutorials. Close the project by selecting File > Close Project.
Figure 3.32
I
DE 
i
n run m
ode
w
i
th th
e
applica
t
io
n runn
i
n
g
i
n th
e
f
o
r
eg
r
o
un
d
8.
Closing the application. Close the running application by clicking its close
box, 
. This action returns the IDE to design mode.
9.
Closing the IDE. Close the IDE by clicking its close box.
(cont.)
Form
Runn
i
n
g
applica
t
io
n
I
DE t
i
t
le
ba
di
s
pla
y
i
n
g
(Running)
a)
Title
b)
Text
c)
(Name)
d)
Name
a)
Alignment
b)
AlignText
c)
Align
d)
TextAlign
VB.NET PDF Form Data Read library: extract form data from PDF in
featured PDF software, it should have functions for processing text, image as well can help you have a quick evaluation of our PDF SDK. Add necessary references
change font on pdf form; add form fields to pdf online
VB.NET PDF Image Extract Library: Select, copy, paste PDF images
multiple types of image from PDF file in VB.NET, like XObject Image, XObject Form, Inline Image DLLs for PDF Image Extraction in VB.NET. Add necessary references
allow users to save pdf form; change font size pdf form
Tutorial 3
Welcome
A
pplica
t
io
n
53
simplyvb2008_03.fm
January 28, 2008 5:12 pm
© 2008 by Deitel & Associates, Inc. All Rights Reserved.
Figure 3.33
C
o
m
po
n
e
nt 
objec
bo
e
x
pa
n
ded
t
o
sh
o
w th
e
Welcome
applica
t
io
n’s 
objec
ts.
Figure 3.34
T
h
e
n
a
m
e
a
n
d
cla
ss 
o
a
objec
a
r
e
di
s
pla
y
ed
i
n th
e
Properties
w
i
n
do
w’s 
co
m
po
n
e
nt 
objec
bo
x.
SE
L
F
-
REVIEW
1.
The 
ComboBox
at the top of the Properties window is the 
.
2.
The Framework Class Library (FCL) organizes classes into 
.
Answers: 1)
a.  
2)
c.
3.4 Wr
ap-
U
p
This tutorial introduced you to visual programming in Visual Basic. You learned
that visual programming helps you to design and create the graphical user interface
portions of applications quickly and easily, by dragging and dropping controls onto
Form
s.
In creating your Welcome application, you used the Properties window to set
the 
Form
’s title-bar text, size (width and height) and background color using prop-
erties 
Text
Size
and 
BackColor
, respectively. You learned that 
Label
s are con-
trols that display text and that 
PictureBox
es are controls that display images. You
displayed text in a 
Label
by setting its 
Text
and 
TextAlign
properties, and you dis-
played an image by setting a 
PictureBox
control’s 
Image
and 
SizeMode
properties.
You also examined the relationship between controls and classes. You learned
that FCL classes are grouped into directory-like entities called namespaces and that
controls are instances (objects) of FCL classes. The FCL classes used in this tutorial
(
Form
Label
and 
PictureBox
 belong  to namespace 
System.Windows.Forms
.
You used the Properties window’s component object box to view an object’s name,
namespace and class type.
In the next tutorial, you continue learning visual programming. In particular,
you’ll create an application with controls that are designed to accept user input.
SKI
LL
S SUMMARY
Cr
ea
tin
g
GUIs Qui
c
kly 
a
n
d
Effi
c
i
e
ntly
Use visual programming techniques.
Pl
ac
in
g
a
C
o
ntr
o
o
n th
e
Form
Double click the control in the Toolbox to place the control in the upper-left corner of the
Form
, or drag the control from the Toolbox onto the 
Form
.
Ali
g
nin
g
C
o
ntr
o
ls
Use the Format menu’s commands.
Welcome
applica
t
io
n GU
I
objec
ts
N
a
m
e
s
pace
(
System.Windows.Forms
)
C
la
ss ty
pe
o
objec
t (
Form
)
N
a
m
e
o
objec
t
(
Welcome
)
a) component object box
b) control box
c) control object box
d) component box
a) collections
b) name boxes
c) namespaces
d) class spaces
VB.NET PDF Password Library: add, remove, edit PDF file password
passwordSetting.IsAnnot = True ' Allow to fill form. passwordSetting document. passwordSetting.IsAssemble = True ' Add password to PDF file. PDFDocument
pdf form creator; change font size pdf fillable form
C# PDF Password Library: add, remove, edit PDF file password in C#
passwordSetting.IsAnnot = true; // Allow to fill form. passwordSetting document. passwordSetting.IsAssemble = true; // Add password to PDF file. PDFDocument
changing font size in pdf form field; adding text to pdf form
54
I
ntr
od
u
c
t
io
n t
o
V
i
su
al
Pr
og
r
a
mm
i
n
g
Tutorial 3
simplyvb2008_03.fm
January 28, 2008 5:12 pm
© 2008 by Deitel & Associates, Inc. All Rights Reserved.
R
e
sizin
g
th
e
Form
o
r C
o
ntr
o
l with Sizin
g
H
a
n
d
l
e
s
Click and drag one of the object’s enabled sizing handles.
S
e
ttin
g
th
e
Dim
e
nsi
o
ns 
o
f th
e
Form
o
r C
o
ntr
o
b
y Usin
g
Pr
ope
rty 
Size
Use the Properties window to enter the width and height of the 
Form
or control in the
Size
field.
S
e
ttin
g
th
e
Wi
d
th 
a
n
d
H
e
i
g
ht 
o
f th
e
Form
o
r C
o
ntr
o
l
Use the Properties window to enter values in the 
Width
and 
Height
property fields (or
use the 
Size
property field).
S
e
ttin
g
th
e
Form
’s B
ac
k
g
r
o
un
d
C
o
l
o
r
Use the Properties window to set the 
Form
’s 
BackColor
property.
A
dd
in
g
a
Label
C
o
ntr
o
l t
o
th
e
Form
Double click the 
Label
control in the Toolbox to place the control in the upper-left corner
of the 
Form
S
e
ttin
g
a
Label
’s 
Text
Pr
ope
rty
Use the Properties window to set the 
Label
’s 
Text
property.
S
e
ttin
g
a
Label
’s 
Font
Pr
ope
rty
Click the value of the 
Font
property in the Properties window, which causes an ellipsis
Button
to appear next to the value. Click the ellipsis 
Button
to display the Font dialog.
Change the font name, style and size of the 
Label
’s text.
Ali
g
nin
g
Te
xt in 
a
Label
Use the Properties window to set the 
Label
’s 
TextAlign
property.
R
e
sizin
g
a
Labe
l
Use the Properties window to set the 
AutoSize
property to 
False
, then use the sizing
handles in the 
Form
Designer.
A
dd
in
g
a
n Im
age
t
o
th
e
Form
Use a 
PictureBox
control to display the image. In the Properties window, click the ellip-
sis 
Button
next to the 
PictureBox
Image
property’s value or the Choose Image link in
the property description to browse for an image to insert using the Select Resource dia-
log.
Scale the image to the size of the 
PictureBox
by setting property 
SizeMode
to value
StretchImage
.
Dis
p
l
a
yin
g
a
Form
o
r C
o
ntr
o
l’s Pr
ope
rti
e
s in th
e
Properties
Win
do
w
Click the 
Form
or a control on the 
Form
.
KEY 
T
ERMS
BackColor
property—Specifies the background color of the Form or a control.
design mode—IDE mode that allows you to create applications using Visual Studio 2008’s
windows, toolbars and menu bar.
Font
property—Specifies the font name, style and size of any displayed text in the 
Form
or one
of its controls.
Height
property—This property, a member of property 
Size
, indicates the height of the 
Form
or one of its controls in pixels.
Image
property—Indicates the file name of the image displayed in a 
PictureBox
.
Label
—Control that displays text the user can’t modify.
Locked 
property—Prevents a control from being moved or resized.
namespace—Classes in the FCL are organized by functionality into these directory-like
entities.
palette—A set of colors.
PictureBox
—Control that displays an image.
pixel—A tiny point on your computer screen that displays a color.
RGB value—The amount of red, green and blue needed to create a color.
C# Create PDF from images Library to convert Jpeg, png images to
List<Bitmap> images = new List<Bitmap>(); images.Add(new Bitmap(Program.RootPath + "\\" 1.gif")); / Build a PDF document with GIF image.
create pdf form; add email button to pdf form
C# PDF Sticky Note Library: add, delete, update PDF note in C#.net
C#.NET PDF SDK - Add Sticky Note to PDF Page in C#.NET. Able to add notes to PDF using C# source code in Visual Studio .NET framework.
pdf form save with reader; add form fields to pdf without acrobat
Tutorial 3
Welcome
A
pplica
t
io
n
55
simplyvb2008_03.fm
January 28, 2008 5:12 pm
© 2008 by Deitel & Associates, Inc. All Rights Reserved.
run mode—IDE mode indicating that the application is executing.
Select Resource dialog—used to import files, such as images, to any application.
Size
property—Property that specifies the height and width, in pixels, of the 
Form
or one of
its controls.
SizeMode
property—Property that specifies how an image is displayed in a 
PictureBox
.
sizing handle—Square that, when enabled, can be used to resize the 
Form
or one of its controls.
StretchImage
—Value of 
PictureBox
property 
SizeMode
that scales an image to fill the
PictureBox
.
Text
property—Specifies the text displayed by the 
Form
or a 
Label
.
TextAlign
property—Specifies how text is aligned within a 
Label
.
web-safe colors—Colors that display the same on different computers.
Width
property—This setting, a member of property 
Size
, indicates the width of the 
Form
or
one of its controls, in pixels. 
GUI DESIGN
GUIDE
L
INES
Ov
e
r
a
ll D
e
si
g
n
Use colors in your applications, but not to the point of distracting the user.
Form
s
Choose short, descriptive 
Form
titles. Capitalize words that are not articles, prepositions
or conjunctions. Do not use punctuation.
Use 9pt 
Segoe UI
font to improve readability for controls that display text.
Label
s
Use 
Label
s to display text that users cannot change.
Ensure that all 
Label
controls are large enough to display their text.
PictureBox
e
s
Use 
PictureBox
es to enhance GUIs with graphics that users cannot change.
Images should fit inside their 
PictureBox
es. This can be achieved by setting 
PictureBox
property 
SizeMode
to 
StretchImage
.
CON
T
RO
L
S, EVEN
T
S,
PROPER
T
IES &
ME
T
HODS
Label 
This control displays on the 
Form
text that the user can’t modify.
In action
Properties
Text
—Specifies the text displayed in the 
Label
.
Font
—Specifies the font name, style and size of the text displayed in the 
Label
.
TextAlign
—Determines how the text is aligned in the 
Label
.
AutoSize
—Allows for automatic resizing of the 
Label
.
PictureBox 
This control displays an image on the 
Form
.
In action
Properties
Image
—Specifies the image that is displayed in the 
PictureBox
.
SizeMode
—Specifies how the image is displayed in the 
PictureBox
.
Size
—Specifies the height and width (in pixels) of the 
PictureBox
.
56
I
ntr
od
u
c
t
io
n t
o
V
i
su
al
Pr
og
r
a
mm
i
n
g
Tutorial 3
simplyvb2008_03.fm
January 28, 2008 5:12 pm
© 2008 by Deitel & Associates, Inc. All Rights Reserved.
MU
LT
IP
L
E
-
CHOICE
QUES
T
IONS
3.1
Property 
determines the 
Form
’s background color. 
3.2
To save all the project’s files, select 
.
3.3
When  the  ellipsis 
Button
to  the right  of  the  Font property value  is  clicked, the
is displayed.
3.4 PictureBox
property 
contains a preview  of the image displayed in the
PictureBox
.
3.5
The 
tab allows you to create your own color.
3.6
The 
PictureBox
class has namespace 
.
3.7
Label
control displays the text specified by property 
3.8
In 
mode, the application is executing.
3.9
The 
command prevents programmers from accidentally altering the size and
location of the 
Form
’s controls.
3.10
Pixels are 
.
EXERCISES
For Exercises 3.11–3.16, you are asked to create the GUI shown in each exercise. You
use the visual programming techniques presented in this tutorial to create a variety of
GUIs. You are creating only GUIs, therefore your applications are not fully opera-
tional. For example, the Calculator GUI in Exercise 3.11 does not behave like a cal-
culator when its 
Button
s are clicked. You learn how to make your applications fully
operational in later tutorials. Create each application as a separate project. If you
accidentally double click a control in design view, the IDE displays the 
Form
’s source
code. To return to design view, select View > Designer.
3.11
(Calculator GUI) Create the GUI for the calculator shown in Fig.3.35. 
a) Creating  a  new  project.  Create  a  new  Windows  Forms  Application  named
Calculator
.
b) Renaming the 
Form
file. Name the 
Form
file 
Calculator.vb
.
a)
BackColor
b)
BackgroundColor
c)
RGB
d)
Color
a) Save > Solution > Save Files 
b) File > Save 
c) File > Save All 
d) File > Save As… 
a) Font Property dialog
b) New Font dialog
c) Font Settings dialog
d) Font dialog
a)
Picture
b)
ImageName
c)
Image
d)
PictureName
a) Custom 
b) Web 
c) System 
d) User 
a)
System.Windows.Forms
b)
System.Form.Form
c)
System.Form.Font
d)
System.Form.Control
a)
Caption
b)
Data
c)
Text
d)
Name
a) start
b) run
c) break
d) design
a) Lock Controls 
b) Anchor Controls 
c) Lock 
d) Bind Controls 
a) picture elements
b) controls in the Toolbox
c) a set of fonts
d) a set of colors on the Web tab
Tutorial 3
Welcome
A
pplica
t
io
n
57
simplyvb2008_03.fm
January 28, 2008 5:12 pm
© 2008 by Deitel & Associates, Inc. All Rights Reserved.
Figure 3.35
Calculator
GU
I
.
c) Manipulating the 
Form
’s properties. Change the 
Text
property of the 
Form
to 
Cal-
culator
. Change the 
Font
property to 9pt 
SegoeUI
. Change the 
Size
property of
the 
Form
to 
272
204
. Note that Visual Studio resizes a 
Form
when you change its font
size. Be sure to set the font size before setting the 
Form
’s size.
d) Adding a 
TextBox
to the 
Form
. Add a 
TextBox
control by double clicking it in the
Toolbox. A 
TextBox
control enables the user to enter input into applications. Set the
TextBox
’s 
Text
property 
0
. Change the 
Size
property to 
240
21
. Set the 
TextAlign
property to 
Right
; this right aligns text displayed in the 
TextBox
. Finally, set the
TextBox
’s 
Location
property to 
8
16
—this property specifies where the upper-left
corner of the control is placed on the form.
e) Adding the first 
Panel
to the 
Form
Panel
controls are used to group other controls.
Double click the 
Panel
icon (
) in the Toolbox to add a 
Panel
to the 
Form
.
Change the 
Panel
’s 
BorderStyle
property to 
Fixed3D
to make the inside of the
Panel
appear recessed. Change the 
Size
property to 
88
112
. Finally, set the 
Loca-
tion
property to 
8
48
. This 
Panel
will contain the calculator’s numeric keys.
f) Adding the second 
Panel
to the 
Form
. Click the 
Form
. Double click the 
Panel
icon in
the Toolbox to add another 
Panel
to the 
Form
. Change the 
Panel
’s 
BorderStyle
property to 
Fixed3D
. Change the 
Size
property to 
72
112
. Finally, set the 
Location
property to 
112
48
. This 
Panel
will contain the calculator’s operator keys.
g) Adding the third (and last) 
Panel
to the 
Form
. Click the 
Form
. Double click the
Panel
icon in the Toolbox to add another 
Panel
to the 
Form
. Change the 
Panel
’s
BorderStyle
property to 
Fixed3D
. Change the 
Size
property to 
48
72
. Finally, set
the 
Location
property to 
200
48
. This 
Panel
will contain the calculator’s C (clear)
and C/A (clear all) keys.
h) Adding 
Button
s to the 
Form
. There are 20 
Button
s on the calculator. To add a 
But-
ton
to a 
Panel
, double click the 
Button
control (
) in the Toolbox. Then
drag and drop the 
Button
onto the 
Panel
. Change the 
Text
property of each 
Button
to the calculator key it represents. The value you enter in the 
Text
property appears
on the face of the 
Button
. Finally, resize the 
Button
s, using their 
Size
properties.
Each 
Button
labeled 
0–9
x
/
-
=
and 
.
should have a size of 
24,
24
. The 00 and
OFF 
Button
s have size 
48
24
. The + 
Button
is sized 
24
64
. The C (clear) and C/A
(clear all) 
Button
s are sized 
38
24
. To align the numeric 
Button
s as they appear in
Fig.3.35, select the 1 
Button
and set its 
Location
property to 
30
6
and its 
Lock
property to 
True
. Place the 2 and 3 
Button
s to the right of the 1 
Button
. Select the
three 
Button
s in the top row (1, 2 and 3). Use the Format > Horizontal Spacing >
Remove option to remove the space between the 
Button
s. Use the Format > Align >
Middles option to place them in a straight row. Repeat the process to vertically align
Button
s 1, 4, 7 and 0 using the Format > Vertical Spacing > Remove and Format >
Align > Centers options. You can drag and drop the rest of the numeric 
Button
s into
position—the IDE “snaps” each 
Button
into alignment with those around it. The
Format menu contains many useful options. You can display many of the Format
menu options in a Visual Studio toolbar—right click the toolbar in the IDE and
select Layout.
i) Saving and closing the project. Select File > Save All to save your changes. Then
select File > Close Project to close the project for this application.
Button
Panel
(
co
nt
ai
ns 6 
Button
s)
Panel
(
co
nt
ai
ns 2 
Button
s)
D
eci
m
al
poi
nt 
Button
Su
b
tr
ac
t
io
Button
TextBox
Panel
(
co
nt
ai
ns 11 
Button
s
f
o
r th
e
num
e
r
ic
k
e
ys)
58
I
ntr
od
u
c
t
io
n t
o
V
i
su
al
Pr
og
r
a
mm
i
n
g
Tutorial 3
simplyvb2008_03.fm
January 28, 2008 5:12 pm
© 2008 by Deitel & Associates, Inc. All Rights Reserved.
3.12
(Alarm Clock GUI) Create the GUI for the alarm clock in Fig.3.36.
Figure 3.36 Alarm Clock
GU
I
.
a) Creating  a  new  project.  Create  a  new  Windows  Forms  Application  named
AlarmClock
.
b) Renaming the 
Form
file. Name the 
Form
file 
AlarmClock.vb
.
c) Manipulating the 
Form
’s properties. Change the 
Font
property of the 
Form
to 9pt
SegoeUI
. Change the 
Text
property to 
AlarmClock
. Change the 
Size
property of
the 
Form
to 
276
176
. Remember to change the 
Font
property’s size before you set
the 
Form
’s 
Size
property.
d) Adding 
Button
s to the 
Form
. Add six 
Button
s to the 
Form
. Change the 
Text
prop-
erty of each 
Button
to the appropriate text. Change the 
Size
properties of the Hour,
Minute and Second 
Button
s to 
60
23
. The ON and OFF 
Button
s get size 
40
23
. The
Timer 
Button
gets size 
48
32.
Use the Format > Horizontal Spacing > Remove
option to align the 
Button
s in the top row so the 
Button
s appear as shown in
Fig.3.36.
e) Adding a 
Label
to the 
Form
. Add a 
Label
to the 
Form
. Change the 
Text
property to
SNOOZE. Set its 
AutoSize
property to 
False
and its 
Size
to 
248
23
. Set the
Label
’s 
TextAlign
property to 
MiddleCenter
. Finally, to draw a border around the
edge of the SNOOZE
Label
, change the 
BorderStyle
property of the SNOOZE
Label
to 
FixedSingle
.
f) Adding a 
GroupBox
to the 
Form
GroupBox
es are like 
Panel
s, except that 
GroupBox
es
can display a title. To add a 
GroupBox
to the 
Form
, double click the 
GroupBox
control
(
) in the Toolbox. Change the 
Text
property to 
AM/PM
, and set the 
Size
property to 
72
72
. To place the 
GroupBox
in the correct location on the 
Form
, set the
Location
property to 
104
29
.
g) Adding AM/PM 
RadioButton
s to the 
GroupBox
. Add two 
RadioButton
s to the 
Form
by dragging the 
RadioButton
control (
) in the Toolbox and dropping it
onto the 
GroupBox
twice. Change the 
Text
property of one 
RadioButton
to 
AM
and
the other to 
PM
. Then place the 
RadioButton
s as shown in Fig.3.36 by setting the
Location
of the AM 
RadioButton
to 
16
16
and that of the PM 
RadioButton
to 
16
,
40
. Set the 
AutoSize
property to 
False
and set their 
Size
properties to 
48
24
.
h) Adding the time 
Label
to the 
Form
. Add a 
Label
to the 
Form
and change its 
Text
property to 
00:00:00
. Change the 
BorderStyle
property to 
Fixed3D
and the 
Back-
Color
to 
Black
. Set the 
AutoSize
property to 
False
and set the 
Size
property to
64,
23
. Use the 
Font
property to make the time bold. Change the 
ForeColor
to
Silver
(located in the Web tab) to make the time stand out against the black back-
ground. Set 
TextAlign
to 
MiddleCenter
to center the text in the 
Label
. Position the
Label
as shown in Fig.3.36.
i) Saving and closing the project. Select File > Save All to save your changes. Then
select File > Close Project to close the project for this application.
3.13
(Microwave Oven GUI) Create the GUI for the microwave oven shown in Fig.3.37.
a) Creating  a  new  project.  Create  a  new  Windows  Forms  Application  named
Microwave
.
b) Renaming the 
Form
file. Name the 
Form
file 
Microwave.vb
.
c) Manipulating  the 
Form
’s  properties.  Change  the 
Form
’s 
Font
property  to  9pt
SegoeUI
and the 
Text
property to 
Microwave
Oven
. Change the 
Size
property to
552
288
.
Button
s
Label
RadioButton
GroupBox
Documents you may be interested
Documents you may be interested