Contents
# What is Image control and how to load an image into it?
# What is Timer control and how to use it?
# How to use scrollbars?
# Sample application using Timer, Image and Scrollbar control.
What Is Image Control?
Image control is one of the intrinsic
controls. It is used to display an image that is in any of the graphics formats
supported by it (listed below)
Image control is a lightweight control,
means occupies less amount of system resources, used to display a graphics
image from any of the following types of files:
¨
Bitmap (.bmp)
¨
Icon (.ico)
¨
Metafile (.wmf)
¨
GIF file
¨
JPEG file
Properties of Image Control
The following are the important properties
of an Image control.
Property
|
Meaning
|
Picture
|
Specifies a graphic.
You can load the graphic from the Properties Window at design time. At run time, you can also set this property
using the LoadPicture function by
passing either .bmp, .ico, .wmf, .gif or .JPEG file as parameter.
|
Stretch
|
If it is set
to true, then graphic resizes to fit the size of an image control otherwise
control is resized to the size of the graphic.
|
Table 6.1: Properties
that are specific to Image control.
Loading a picture at design time
Follow the procedure given below to load a
picture into an Image control at design time.
1.
Place an Image control on the
Form
2.
If you want the picture of
Image control to be resized to the size of the Image control then set Stretch property to true.
3.
Select Image control and
invoke Properties Windows using F4.
4.
Select Picture property in Properties Window and click on “…” (three dots) displayed at the right corner.
5.
Visual Basic displays Load Picture dialog box allowing you to select a picture file.
6.
Select picture file and then
click on Open button to load the
picture into image control.
Visual Basic loads the picture that is in
the selected file. If you have set Stretch
property to true, then image us
resized to the size of the control. If Stretch
property is false then image
control is resized to the size of the picture.
Loading a picture at runtime
You can also place a picture into an image
control at runtime using LoadPicture function.
The following is the syntax of this
function.
LoadPicture([filename],
[size], [colordepth],[x,y])
The meaning of each option is discussed
below.
Option
|
Description |
Filename
|
The name of
the file from where the picture is to be taken. If no filename is given then
picture is cleared. It may contain the complete path.
|
Size
|
Specifies the
size in which cursor or icon is to be displayed. Valid options are:
0 – System small icon, 1 – System large icon
and 4 – custom size, where width and height are specified by X and Y parameters.
|
ColorDepth
|
Specifies the
desired color depth for icon and cursor files. The valid options are:
0- default, 1- 2 color (monochrome), 2 – 16 colors,
3 - 256 colors.
|
X, Y
|
Specify the
size to be used for icon and cursor files when Size is set to 4 – Custom.
|
To
load a picture from file sateesh.bmp,
enter:
Image1.picture = LoadPicture( “sateeshh.bmp”)
To
load picture which is in a different directory, enter:
Image1.picture = LoadPicture(
“c:\pictures\sateesh.bmp”)
To
unload picture from an image control, enter:
Image1.picture = LoadPicture()
What Is Timer Control?
Timer control is one of the standard
controls. Unlike other standard controls, Timer control is not used to build
user interface. Timer control is always invisible at runtime. Timer control is
used to generate Timer event at
regular interval. It is very useful control if you ever have to perform certain
operation at regular interval such as for every second or every minute etc.
Interval Property of Timer control
For Timer control there is only one unique
property – INTERVAL. This property
contains interval in milliseconds. Timer control
generates TIMER event after the
given number of milliseconds elapsed.
To
get TIMER event for every one second, enter:
Timer.interval = 1000
Note: Timer is the only event supported by Timer control.
Displaying a digital clock using Timer control
Let us develop a small program to display a
running digital clock using Timer control. The following are the required
steps:
1.
Start a new project using File->New Project
2.
Change Caption property of form to “Digital Clock”
3.
Place a Label at the center of the form
4.
Place a Timer on the form
5.
Change the following properties
of the label control
Name
|
Lbltime |
Caption
|
“” (Null
string)
|
Autosize
|
True
|
Borderstyle
|
1-Fixed Single
|
Fontsize
|
14
|
6.
Set Interval property of Timer1
to 1000.
7.
Write the following code
for Timer event of Timer1
Private
Sub Timer1_Timer()
'change
time for every second
lbltime = Time
End Sub
Listing 6.1: Code for
Timer event of Timer control
8.
Place current time in label
control at Load event of form so
that as soon as the form starts time is displayed in label control. If it is
not done, label will be empty for one second since form starts.
Private
Sub Form_Load()
lbltime = Time
End Sub
Listing
6.2: Code for Load event of the Form
Run the project using F5.
Note: Timer event doesn’t occur when either Interval property is set to 0 or when Enabled property of Timer is set to false.
Scrollbar control
Scrollbar is used to represent a number
internally. Scrollbar may be any of the two types:
¨
Horizontal
¨
Vertical
Properties and events are same for both the
scrollbars. The only difference is in the way they are displayed. Horizontal
scrollbar is displayed horizontally and vertical scrollbar is displayed
vertically.
A scrollbar represents a number between
given minimum and maximum values. The position of the scroll box represents the
number. If the scroll box is at the extreme left, it represents the minimum
value, if it is at right most, it represents maximum value. User can move
scroll box right and left (or up and down if it is vertical scrollbar) using
arrow displayed at each edge of the control.
User can also drag scroll box or click on
the scrollbar to move scroll box.
The following are the important properties
of scrollbar control.
Property
|
Meaning |
Min
|
Specifies the
minimum value. Default is 0.
|
Max
|
Specifies the
maximum value. Default is 32767.
|
Value
|
Sets or
returns the current position of the scrollbar. The Value property must be
between Min and Max values.
|
Smallchange
|
Sets the
increment value that is to be used when user moves scrollbar using scroll
arrows.
|
LargeChange
|
Set the
increment value that is to be used when user clicks on the area between
scroll box and scroll arrow.
|
Table 6.2: Properties
that are specific to Scrollbar control.
Scrollbar Events
The following are important events related
to Scrollbar control
Event
|
When does it occur? |
Change
|
Occurs when
the user scrolls the scroll box or when you change the Value property setting through code.
|
Scroll
|
Occurs when
user is dragging the scroll box.
|
Table 6.3: Scrollbar
Events.
Note: You have to use Scroll
event if you want to take any action during scrolling of scroll box. Change
event doesn’t occur during scrolling. Change
event occurs only after the scrolling is completed.
Sample Project using Image, Timer and Scrollbar
controls
Now, let us develop a sample application
that uses all three controls that we have discussed so far in this chapter.
This sample project moves an image from left corner of the form to right
corner. User is allowed to control the speed of movement using a scrollbar. The
movement is automatic and handled by a timer.
Timer control generates Timer event for every 200 milliseconds and at
that event Image control is moved by the specified number of units.
The usage of each control is given in the
table 6.4.
Controls being used
The following are the controls being used
in this project.
Control
|
What it does?
|
Image
|
Displays an
image. I have loaded my son’s picture. You load any picture that is available
to you. You will find some pictures in windows folder.
|
Scrollbar
|
Allows user
to specify by how much the picture should move. As the labels suggest, the
more you move towards right the faster the movement will be. This scrollbar
effects the number of units by which image is moved.
|
Timer
|
Generates
Timer event for every 200 milliseconds. The actual code goes in Timer event.
Picture is also moved in Timer event.
|
Labels
|
Two labels
are used to indicate to user that the more the scroll box moves right the
faster the movement will be.
|
Table
6.4: Controls and their usage in sample project.
Steps to create project
The following are the steps to create
sample project.
1.
Start a new project using File-> New Project.
2.
Place an Image control, Timer,
horizontal scrollbar and two labels on the form.
3.
Place control
4.
Change properties as follows.
Object
|
Property
|
Value |
Form1
|
Caption
|
Move Picture
|
Label1
|
Caption
|
Slow
|
Lable2
|
Caption
|
Fast
|
Hscroll1
|
Min
|
100
|
Max
|
1000
|
|
Smallchange
|
25
|
|
LargeChange
|
100
|
|
Value
|
200
|
|
Timer1
|
Interval
|
200
|
Image1
|
Stretch
|
True
|
Load a picture into Image control. For
details please see Loading a picture at design time section earlier in this
chapter.
Writing code for Timer event
Timer event is the event where the image is
moved. To move the image (or any control) horizontally, change the value of Left property. Because Left and Top properties identify the position of the form at which the
control is placed. So by changing either of the properties you can change the
physical location of the control.
As we go on moving at some point the
control will go out of the boundaries of the form. So we check whether image
will be within the boundaries of the form using ScaleWidth property of the form. ScaleWidth returns the width of the form and Scaleheight returns
height of the form.
Note: Height and Width
properties of the form return the height and width of the form by including
border, title bar and menu bar. Whereas Scalewidth
and Scaleheight properties return
the width and height of usable area, also called as client area or work area.
Writing Code
Here is the code for Timer event of Timer control.
Private
Sub Timer1_Timer()
With
Image1
newleft = .Left + hscroll.value
'
move image right if space is sufficient otherwise display it
'
extreme left
If
newleft + .Width <= Me.ScaleWidth Then
Image1.Left = newleft
Else
Image1.Left = 0
End
If
End
With
End Sub
Listing
6.3: Code for Timer event of the Timer control,
which is used to move image.
After writing the code given in listing,
run the project. You should see picture moving from left to right.
That’s all that you have in this project.
Picture control could also be used to
display an image but picture control is too powerful to use it just to display
an image. Picture control is a container that means it can host an other
control, and has properties & methods that are available for form.
Exercises
1.
Enhance the sample project
developed to move an image by providing support for bi-directional movement.
Provide two options buttons. One labeled Left
to right and the second one labeled Right
to left. When user selects Right to
left option button, move image from right to left. Default is left to right.
Ensure image never crosses the boundary.
2.
What are the ways to stop Timer
event from occurring?
3.
Which property of an Image control determines
whether image is resized to control or control is resized to image.
4.
Which function can be used to
load picture at runtime.
5.
How do you remove picture from
image control at runtime?
6.
What is the difference between
change event and scroll event of a scrollbar?
7.
Is it possible to set the size
of Scroll box?
8.
How do you set the initial
position of scroll box in a scrollbar?
No comments:
Post a Comment