How to Create Scrollable Viewports in Visual Basic
This article is reprinted from the Microsoft Knowledge Base. To view the article, maximize your help window. This information applies to Visual Basic for Windows, versions 2.0 and 3.0.
Scrollable viewports can be created within Visual Basic using standard
Basic calls. The viewports can include bitmaps, graphics, or other
To create a scrollable picture with clipping, you must have two
picture controls. The first picture control is called the stationary
parent picture control. Within the parent picture control, you need to
create a movable child picture control. It is the child picture
control that will be moved within the parent picture control. Moving
the child picture within the parent picture control creates the
clipping effect. During run time when you move the child picture, it
will now be clipped by the boundaries of the parent picture.
To create these two picture controls, do the following:
1. Choose the picture box control from the Toolbox window in Visual
2. Draw a picture on the form. This is the parent picture.
3. Again choose the picture box control from the Toolbox window.
4. Draw the second picture on top of and within the boundaries of
the first picture control. This is the child picture.
The sample application below shows how to create a scrollable bitmap
within a viewport. Perform the sequence above to create a parent/child
picture control. Add a horizontal scroll bar and a vertical scroll bar
to the form.
Make sure that the path to your bitmap is correct. Several of the
properties are set during run time, which could have been set during
design time as well.
Moving the thumb of the two scroll bars will move the child picture
within the parent picture. The handle (upper-left corner of the
picture) to the child picture will be located either at (0,0) of the
parent picture or to the left and/or right of the parent picture.
Since the clipping region is that of the parent picture, the child
picture will appear to move across the parent picture viewport.
Sub Form_Load ()
Const PIXEL = 3
' Set design properties, included here for simplicity.
Form1.ScaleMode = PIXEL
Picture1.ScaleMode = PIXEL
Picture2.ScaleMode = PIXEL
' AutoSize is set to TRUE so that the boundaries of
' Picture2 are expanded to the size of the actual bitmap.
Picture2.AutoSize = TRUE
' Get rid of annoying borders.
Picture1.BorderStyle = NONE
Picture2.BorderStyle = NONE
' Load the picture that you want to display.
Picture2.Picture = LoadPicture("c:\win\party.bmp")
' Initialize location of both pictures.
Picture1.Move 0, 0, ScaleWidth - VScroll1.Width,_
ScaleHeight - HScroll1.Height
Picture2.Move 0, 0
' Position the horizontal scroll bar.
HScroll1.Top = Picture1.Height
HScroll1.Left = 0
HScroll1.Width = Picture1.Width
' Position the vertical scroll bar.
VScroll1.Top = 0
VScroll1.Left = Picture1.Width
VScroll1.Height = Picture1.Height
' Set the Max value for the scroll bars.
HScroll1.Max = Picture2.Width - Picture1.Width
VScroll1.Max = Picture2.Height - Picture1.Height
' Determine if child picture will fill up screen.
' If so, then there is no need to use scroll bars.
VScroll1.Enabled = (Picture1.Height < Picture2.Height)
HScroll1.Enabled = (Picture1.Width < Picture2.Width)
Sub HScroll1_Change ()
' Picture2.Left is set to the negative of the value because
' as you scroll the scroll bar to the right, the display
' should move to the Left, showing more of the right
' of the display, and vice-versa when scrolling to the
Picture2.Left = -HScroll1.Value
Sub VScroll1_Change ()
' Picture2.Top is set to the negative of the value because
' as you scroll the scroll bar down, the display
' should move up, showing more of the bottom
' of the display, and vice-versa when scrolling up.
Picture2.Top = -VScroll1.Value