Visual Basic Concepts
Scroll Bar Controls Scenario: Creating a Scrollable Graphics Viewport
The horizontal and vertical scroll bar controls can be used, in addition to the picture box control, to create a scrollable graphics viewport application. The picture box control alone will not allow you to scroll a graphic if it exceeds its boundaries — the picture box control does not automatically add scroll bars.
This application uses two picture boxes. The first is referred to as the stationary parent picture box control. The second, which is contained within the parent, is referred to as the child picture box control. The child picture box contains the graphic image and is moved around within the parent picture box control when the scroll bar controls are used.
Figure 7.25 Adding scroll bar controls at design time
Start by creating a new project and then draw two picture boxes, a horizontal scroll bar, and a vertical scroll bar on the form, as shown in Figure 7.25.
The form's Form_Load event is used to set the scale mode, to size the child picture box within the parent picture box, to position and size the horizontal and vertical scroll bars, and then to load a bitmap graphic. Add the following code to the form's Form_Load event procedure:
Private Sub Form_Load()
' Set ScaleMode to pixels.
Form1.ScaleMode = vbPixels
Picture1.ScaleMode = vbPixels
' Autosize is set to True so that the boundaries of
' Picture2 are expanded to the size of the actual
' bitmap.
Picture2.AutoSize = True
' Set the BorderStyle of each picture box to None.
Picture1.BorderStyle = 0
Picture2.BorderStyle = 0
' Load the bitmap.
Picture2.Picture = _
LoadPicture("c:\Windows\Winlogo.gif")
' 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 property for the scroll bars.
HScroll1.Max = Picture2.Width - Picture1.Width
VScroll1.Max = Picture2.Height - Picture1.Height
' Determine if the child picture will fill up the
' screen.
' If so, there is no need to use scroll bars.
VScroll1.Visible = (Picture1.Height < _
Picture2.Height)
HScroll1.Visible = (Picture1.Width < _
Picture2.Width)
End Sub
The horizontal and vertical scroll bars' Change event is used to move the child picture box up and down or left and right within the parent picture box. Add the following code to the Change event of both scroll bar controls:
Private Sub HScroll1_Change()
Picture2.Left = -HScroll1.Value
End Sub
Private Sub VScroll1_Change()
Picture2.Top = -VScroll1.Value
End Sub
The Left and Top properties of the child picture box are set to the negative value of the horizontal and vertical scroll bars so that as you scroll up or down or right or left, the display moves appropriately.
At run time, the graphic will be displayed as shown in Figure 7.26.
Figure 7.26 Scrolling the bitmap at run time
Resizing the Form at Run Time
In the example described above, the viewable size of the graphic is limited by the original size of the form. To resize the graphic viewport application when the user adjusts the size of the form at run time, add the following code to the form's Form_Resize event procedure:
Private Sub Form_Resize()
' When the form is resized, change the Picture1
' dimensions.
Picture1.Height = Form1.Height
Picture1.Width = Form1.Width
' Reinitialize the picture and scroll bar
' positions.
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.Width
' Check to see if scroll bars are needed.
VScroll1.Visible = (Picture1.Height < _
Picture2.Height)
HScroll1.Visible = (Picture1.Width < _
Picture2.Width)
End Sub