VB3 How to Create Scrollable Viewports in Visual Basic

- Standard and Professional Editions of Microsoft Visual Basic for

  Windows, versions 2.0, 3.0

SUMMARY

You can create scrollable viewports in Visual Basic by using standard Basic calls. The viewports can include bitmaps, graphics, or other controls.

MORE INFORMATION

This information is included with the Help file provided with Microsoft Professional Toolkit for Visual Basic version 1.0, Microsoft Visual Basic version 2.0, and Microsoft Visual Basic version 3.0.

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 be clipped by the boundaries of the parent picture. If you plan on using Visual Basic graphics methods to draw on the picture instead of loading a bitmap then you must set the child picture controls AutoRedraw property to true.

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.

5. Optional: If you want the viewport to resize when the user changes the form size, then add the following code to the form's resize event:

   Sub Form_Resize ()
      ' When the form size is changed, the Picture1 dimensions are changed
      ' to match.
      Picture1.Height = form1.Height
      Picture1.Width = form1.Width
      ' Re-Initializes picture postitions & scroll bars.
      Picture1.Move 0, 0, Scalewidth - Vscroll1.Width, scaleheight -
   

   Picture2.Move 0, 0
   Hscroll1.Top = Picture1.Height
   Hscroll1.Left = 0
   Hscroll1.Width = Picture1.Width
   Vscroll1.Top = 0
   Vscroll1.Left = Picture1.Width
   Vscroll1.Height = Picture1.Height
   Hscroll1.Max = Picture2.Width - Picture1.Width
   Vscroll1.Max = Picture2.Height - Picture1.Height
   ' Checks to see if scroll bars  are needed
   VScroll1.Visible = (Picture1.Height < Picture2.Height)
   HScroll1.Visible = (Picture1.Width < Picture2.Width)
End Sub

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. Because the clipping region is that of the parent picture, the child picture will appear to move across the parent picture viewport.

Add the following code to the appropriate event procedures:

Sub Form_Load ()
   Const PIXEL = 3
   Add the following constant only in Visual Basic 1.0:
   '  Const TRUE = -1
   Const NONE = 0

   ' Set design properties, included here for simplicity.
   Form1.ScaleMode = PIXEL
   Picture1.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.Visible = (Picture1.Height < Picture2.Height)
   HScroll1.Visible = (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