161
Tutorial 3
Welcome
A
pplica
t
io
n
43
simplyvb2008_03.fm
January 28, 2008 5:12 pm
© 2008 by Deitel & Associates, Inc. All Rights Reserved.
There are several ways to resize the
Form
. If the resizing does not have to be
precise, you can click and drag one of the
Form
’s enabled sizing handles (the small
white squares that appear around the
Form
, as shown in Fig. 3.10). When the mouse
cursor is over an enabled sizing handle, the appearance of the mouse pointer
changes to a pointer with two arrows indicating the directions in which you can drag
the handle to resize the
Form
.
Figure 3.10 0 Form
w
i
th s
i
z
i
n
g
h
a
n
dle
s.
Form
s also can be resized by using the
Size
property, which specifies the
Form
’s
width and height in units called pixels (picture elements). A pixel is a tiny point on
your computer screen that displays a color. The
Size
property has two mem-
bers—the
Width
and
Height
properties. The
Width
property indicates the width of
the
Form
in pixels, and the
Height
property specifies the height in pixels. Next, you
learn how to set the
Form
’s width and height.
S
e
ttin
g
th
e
Form
’s
Size
Pr
ope
rty
Figure 3.9
Ti
t
le
ba
r f
o
r th
e
Welcome
applica
t
io
n.
4.
Saving the project. Select File >Save All to save your modified project.
(cont.)
U
pda
t
ed
t
i
t
le
ba
r
En
abled
s
i
z
i
n
g
h
a
n
dle
s
W
id
th
H
eig
ht
1.
Setting the
Form
’s width and height. For your Welcome application GUI to
look exactly like Fig. 3.5, you need to resize the
Form
and its controls. Click
the
Form
. Locate the
Form
’s
Size
property in the Properties window
(Fig. 3.11). Click the plus box, , next to this property to expand the node.
Type
616
for the
Width
property value, and press Enter. Type
440
for the
Height
property value and press Enter. Note that the
Size
property value
(
616,
440
) updates when either the
Width
or the
Height
is changed. You
also can enter the width and height (separated by a comma) in the
Size
property’s value field.
2.
Saving the project. Select File >Save All to save your modified project.
178
44
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.
Now that you have set the
Form
’s size, you customize the
Form
further by
changing its background color from gray to yellow.
S
e
ttin
g
th
e
Form
’s
B
ac
k
g
r
o
un
d
C
o
l
o
r
Figure 3.11 1 Size
p
r
ope
rty v
al
u
e
s f
o
r th
e
Form
.
Size
p
r
ope
rty v
al
u
e
s
1.
Exploring the available colors. Click the
Form
to display its properties in
the Properties window. The
BackColor
property specifies an object’s back-
ground color. When you click the BackColor property’s value in the Proper-
ties window, a down-arrow ( )
Button
appears (Fig. 3.12). When clicked,
the down-arrow
Button
displays three tabs:
System
(the default),
Web
and
Custom
. Each tab offers a series of colors called a palette. The System tab
displays a palette containing the colors used in the Microsoft Windows GUI.
This palette includes the colors for Windows controls and the Windows
desktop. The System tab’s colors are based on the Windows color settings.
To change these settings in Windows Vista, right click the desktop and select
Personalize. Click the Window Color and Appearance item to view the
colors used by Windows. To access these settings in Windows XP, right click
the desktop and select Properties. Click the Appearance tab to view the
colors used by Windows. The Web tab displays a palette of web-safe col-
ors—colors that display the same on different computers. The Custom tab
palette allows you to choose from a series of predefined colors or to create
your own color. Click the Custom tab to display its palette as shown in
Fig.3.12.
Figure 3.12
V
ie
w
i
n
g
th
e
Custom
pale
tt
e
i
n th
e
Form
’s
BackColor
p
r
ope
rty
v
al
u
e
f
ield
.
D
o
wn-
a
rr
o
w
Button
Cust
o
m
colo
rs
ca
n
be
added
t
o
th
e
wh
i
t
e
bo
x
e
s
Curr
e
nt
colo
r
Custom
pale
tt
e
Tab
s
VB.NET PDF - Convert PDF with VB.NET WPF PDF Viewer Highlight Text. Add Text. Add Text Box. Drawing Markups. PDF Print. Work PDF to image file formats with high quality, support converting PDF to PNG, JPG, BMP and
create a pdf form online; create a fillable pdf form from a pdf
213
Tutorial 3
Welcome
A
pplica
t
io
n
45
simplyvb2008_03.fm
January 28, 2008 5:12 pm
© 2008 by Deitel & Associates, Inc. All Rights Reserved.
Now that you’ve finished customizing the
Form
, you can add a control to the
Form
—a customized
Label
that displays a greeting.
2.
Changing the
Form
’s background color. Right click any one of the 16 white
boxes at the bottom of the Custom palette to display the Define Color dia-
log (Fig. 3.13). Colors can be created either by entering three values in the
Hue:, Sat: and Lum:
TextBox
es or by providing values for the Red:, Green:
and Blue:
TextBox
es. The values for the Red:, Green: and Blue:
TextBox
es
describe the amount of red, green and blue needed to create the custom
color and are commonly called RGB values. Each red, green and blue value
is in the range
0
–
255
, inclusive. We use RGB values in this book. Set the
Red: value to
255
, the Green: value to
237
and the Blue: value to
169
. Click-
ing the Add Color
Button
closes the dialog, changes the
Form
’s background
color and adds the color to the Custom palette (Fig.3.14).
Figure 3.13
A
ddi
n
g
a
colo
r t
o
th
e
Custom
pale
tt
e
.
Figure 3.14 4 Properties
w
i
n
do
w
a
ft
e
r th
e
n
e
w
c
ust
o
m
colo
r h
a
s
bee
n
added
.
3.
Saving the project. Select File >Save All to save your modified project.
(cont.)
GUI Design Tip
Us
e
colo
rs
i
n y
o
ur
applica
t
io
ns,
b
ut
n
o
t t
o
th
e
poi
nt
o
f
di
str
ac
t
i
n
g
th
e
us
e
r.
R
ed
co
m
po
n
e
nt (255)
Gr
ee
n
co
m
po
n
e
nt (237)
B
l
u
e
co
m
po
n
e
nt (169)
A
dd
s
a
colo
r t
o
Custom
pale
tt
e
C
olo
r
p
r
e
v
ie
w
Cust
o
m
colo
r
added
t
o
pale
tt
e
Form
bac
k
g
r
o
un
d
s
e
t t
o
n
e
w
c
ust
o
m
colo
r
319
46
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.
A
dd
in
g
a
Label
t
o
th
e
Form
1.
Adding a
Label
control to the
Form
. Click the Common Controls group in
the Toolbox (Fig.3.15). If the Toolbox is not visible, select View > Toolbox.
Double click the
Label
control in the Toolbox. A
Label
appears in the
upper-left corner of the
Form
(Fig. 3.16). You also can drag the
Label
from
the Toolbox and drop it on the
Form
. You use this
Label
control to display
the welcome message. The
Label
displays the text Label1 by default.
Note that the
Label
’s background color is the same as the
Form
’s back-
ground color. When a control is added to the
Form
, the IDE initially sets the
control’s
BackColor
property value to the
Form
’s
BackColor
property value.
Figure 3.15
C
lic
k
i
n
g
th
e
Windows Forms
t
ab
i
n th
e
Toolbox
.
Figure 3.16
A
ddi
n
g
a
Label
t
o
th
e
Form
.
2.
Setting the
Label
’s
AutoSize
property. Click the
Label
to select it. Notice
that the
Label
’s properties now appear in the Properties window. Visual
Basic by default does not provide sizing handles (Fig. 3.16) for you to resize
a
Label
. To enable resizing, you must set the
Label
’s
AutoSize
property to
False
(Fig. 3.17). You can do this by double clicking this property’s value or
by selecting
False
from the drop down list.
Figure 3.17
S
e
tt
i
n
g
a
Label
’s
AutoSize
p
r
ope
rty t
o
False
.
3.
Customizing the
Label
’s appearance. The
Label
’s
Text
property specifies
the text (Label1) that the
Label
displays. Type
Welcome
to
Visual
Basic
2008!
for the
Label
’s
Text
property value and press Enter. Note that this
text does not fit in the
Label
(Fig. 3.18). Use the sizing handles to enlarge
the
Label
so all the text is displayed (Fig. 3.19)
Figure 3.18 8 Label
a
ft
e
r u
pda
t
i
n
g
i
ts
Text
p
r
ope
rty.
GUI Design Tip
Us
e
Label
s t
o
di
s
pla
y t
e
xt th
a
t us
e
rs
ca
nn
o
t
c
h
a
n
ge
.
Common Controls
g
r
o
u
p
Label
co
ntr
ol
Label
co
ntr
ol
N
e
w
bac
k
g
r
o
un
d
colo
r
S
i
z
i
n
g
h
a
n
dle
(
e
n
abled
)
AutoSize
p
r
ope
rty
GUI Design Tip
Ensur
e
th
a
t
all
Label
co
ntr
ol
s
a
r
e
la
r
ge
e
n
o
u
g
h t
o
di
s
pla
y th
ei
r t
e
xt.
U
pda
t
ed
Text
p
r
ope
rty v
al
u
e
t
oo
la
r
ge
f
o
r
Label
198
Tutorial 3
Welcome
A
pplica
t
io
n
47
simplyvb2008_03.fm
January 28, 2008 5:12 pm
© 2008 by Deitel & Associates, Inc. All Rights Reserved.
Figure 3.19 9 Label
a
ft
e
r
i
t h
a
s
bee
n r
e
s
i
z
ed
.
4.
Aligning the
Label
. Drag the
Label
to the top center of the
Form
. You also
can center the
Label
by selecting Format > CenterInForm > Horizontally
(Fig. 3.20).
Figure 3.20
C
e
nt
e
r
ed
Label
.
5.
Setting the
Label
’s font. Click the value of the
Font
property to cause an
ellipsis
Button
to appear (Fig. 3.21). Click the ellipsis
Button
to display the
Font
dialog (Fig.3.22). The ellipsis is a convention used for each property
that displays a dialog to help you set the property’s value. In this dialog,
you can select the font name (Tahoma, Times New Roman, etc.), font
style (Regular, Italic, etc.) and font size (16, 18, etc.) in points (one point
equals 1/72 of an inch). The text in the Sample
Label
displays the selected
font. Under the Size: category, select 24 points. Under the Font category,
select Segoe UI, and click OK. If the
Label
’s text does not fit on a single
line, it wraps to the next line. Use the sizing handles to enlarge the
Label
vertically so that the text appears on two lines.
Figure 3.21 1 Properties
w
i
n
do
w
di
s
pla
y
i
n
g
th
e
Label
’s
p
r
ope
rt
ie
s.
Figure 3.22 2 Font
dialog
f
o
r s
elec
t
i
n
g
f
o
nts, sty
le
s
a
n
d
s
i
z
e
s.
(cont.)
Label
r
e
s
i
z
ed
h
o
r
i
z
o
nt
all
y
C
e
nt
e
r
ed
Label
GUI Design Tip
Us
e
Segoe UI
f
o
nt t
o
i
m
p
r
o
v
e
r
ead
-
abili
ty f
o
r
co
ntr
ol
s th
a
t
di
s
pla
y t
e
xt.
E
llip
s
i
s
Button
F
o
nt s
a
m
ple
Curr
e
nt f
o
nt
Font
dialog
191
48
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.
To finish this first Visual Basic Windows application, you need to insert an
image and execute the application. We use a
PictureBox
control to add an image
to the
Form
before running the application. The following box guides you step-by-
step through the process of adding an image to your
Form
.
Ins
e
rtin
g
a
n Im
age
a
n
d
Runnin
g
th
e
Welcome
A
pp
li
ca
ti
o
n
6.
Aligning the
Label
’s text. To align text inside a
Label
, use the
Label
’s
TextAlign
property. Clicking the
TextAlign
property displays a down-
arrow
Button
. Click the down-arrow
Button
to display a three-by-three grid
of
Button
s (Fig.3.23). The position of each
Button
shows where the text
appears in the
Label
. Click the middle-center
Button
in the three-by-three
grid to align the text at the middle-center position in the
Label
. The value
MiddleCenter
is assigned to property
TextAlign
. You may also set this
property’s value by repeatedly clicking the property value to the right of the
property’s name. This enables you to cycle through all the allowed
Text-
Align
property values. This technique works for any property that provides
a set of options via a down arrow to the right of the property value in the
Properties window.
Figure 3.23
C
e
nt
e
r
i
n
g
th
e
Label
’s t
e
xt.
7.
Saving the project. Select File > Save All to save your modified project.
(cont.)
Te
xt
alig
nm
e
nt
op
t
io
ns
M
iddle
-
ce
nt
e
r
alig
nm
e
nt
op
t
io
n
1.
Adding a
PictureBox
control to the
Form
. The
PictureBox
allows you to
display an image. To add a
PictureBox
control to the
Form
, double click the
PictureBox
control icon
in the
ToolBox
. When the
PictureBox
appears, click and drag it to a posi-
tion centered below the
Label
(Fig.3.24).
Figure 3.24
I
ns
e
rt
i
n
g
a
n
d
alig
n
i
n
g
th
e
PictureBox
.
PictureBox
U
pda
t
ed
Label
Documents you may be interested
Documents you may be interested