Tip for creating scrollable viewport

[Zaphod64831]

I know there's some of you out there that have been wondering how to do this, I know I have, so here it is:
First create a picturebox, then place another picturebox within that one. Then create the appropriate Vcrollbar and Hscrollbar and place them within the first pibturebox. After that place this code in the form:

Sub Form_Load ()
   Const PIXEL = 3
   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)
   Call Form_Resize
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
Private 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 - HScroll1.Height
   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

MAn, the idea of it's so simple I couldn't believe I hadn't thought of it before I found it. Instead of having just ONE picturebox and then have that scroll each and every control up and down, it simply has one picturebox inside another, then you place all your controls in the second one and scroll that one up and down.

BTW: I'd recommend setting the LargeChange property to 10 and the Smallchange to 5, the default settings don't go over too well with this one.

[Gen-X]

I actually did one similar to this but it only scrolled up and down and it used half of the code you have there.

Add to the form the following :

pbOuter - Picture box for the outer boundary of your viewport

pbInner - Picture box larger than the pbOuter to be inside

vsbScroll - Vertical Scroll bar

Now do this :

Private Sub Form_Load()
  vsbScroll.Min = 0
  vsbScroll.Max = pbInner.Height - pbOuter.Height
  vsbScroll.SmallChange = pbInner.Height / 20 ' 5% change
  vsbScroll.LargeChange = pbInner.Height / 10 ' 10% change
  vsbScroll.Value = 0
End Sub

Private Sub vsbScroll_Change()
  pbInner.Top = 0 - vsbScroll.Value
End Sub

Private Sub vsbScroll_Scroll()
  pbInner.Top = o - vsbScroll.Value
End Sub

It works like a charm

All you need to do is another modification for Horizontal and you have the whole thing working in a quite tight and compact set of code.

You can allow the pbInner to automatically resize itself and the code will still function correctly.