Images, Timer and Scrollbars

Images, Timer and Scrollbars

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
  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.



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 srikanth.bmp, enter:


Image1.picture = LoadPicture( “srikanth.bmp”)


To load picture which is in a different directory, enter:


Image1.picture = LoadPicture( “c:\pictures\srikanth.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




Caption “” (Null string)
Autosize True
Borderstyle 1-Fixed Single
Fontsize 14


  1. Set Interval property of Timer1 to 1000.
  2. 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


  1. 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. Form should look like figure 6.1.

Figure 6.1: Running digital clock.

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.




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



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.


See figure 6.2, to get an idea about the user interface of the project.


The usage of each control is given in the table 6.4.

Figure  6.2: Form at design time.

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 as show in figure 6.2.
  4. Change properties as follows.


Object Property


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.


Please see figure 6.3, for various properties that are related to size and position.

Figure 6.3: Properties related to size and position.


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


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. Figure 6.4, is snapshot of the form at runtime.


That’s all that you have in this project.

Figure  6.4: Form at runtime, after image has moved a few times.

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.