How to Create Scrollable Viewports in Visual Basic

ID Number: Q71068

1.00

WINDOWS

Summary:

Scrollable viewports can be created within Visual Basic using standard

Basic calls. The viewports can include bitmaps, graphics, or other

controls.

This information applies to Microsoft Visual Basic Programming System

version 1.00 for Windows.

More Information:

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

Basic.

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

Const TRUE = -1

Const NONE = 0

' 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)

End Sub

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

' left.

Picture2.Left = -HScroll1.Value

End Sub

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

End Sub