How to "Pan" an Image inside a ScrollBox

_{Tip submitted by Peter Bernard}

"Panning" (in computer terms) refers to being able to move an object both horizontally and vertically by holding down a given mouse button and then moving the mouse.

The Delphi language provides us with the means to accomplish this, but as in all things, a rudimentary knowledge of "how stuff works" is needed.

Here's the recipe:

1. Open the Delphi IDE and you'll be presented with a new project with a new form.
2. Onto this form, drop a "TScrollBox" component. This component can be found under the "Additional" tab in the IDE.
3. INSIDE the scroll box drop in a TImage component.
4. Outside of the scroll box, somewhere on your form, drop a TButton component. This is going to demonstrate what to do when you load a picture into the image.
5. Leave all the "native" names intact ("Form1", "ScrollBox1" etc

Set some control properties:

1. In the Object Inspector, navigate to your scroll box (ScrollBox1") and locate it's property "HorzScrollBar". Click on the little '+" sign next to it and set the value of it's sub-property "Visible" to "False".
2. Do the same for "ScrollBox1" property "VertScrollBar".
3. In the Object Inspector, navigate to the image component and set it's "AutoSize" property to "True".

Time to start writing some code. What we need to do, is to use the logic that says we can control objects *outside* of their immediate container. We're going to use the traditional origin points of the image control *outside* of the constraints of 0, 0. In fact, if you think of it, there wouldn't be much point in trying to "push" Image1's top to less than 0 if you could not make it go higher than ScrollBox1's top...you would'nt have any movement at all!

In Form1's "OnCreate" event place the following code:

ScrollBox1.DoubleBuffered := True;

This ensures that the images movement within it's parent (ScrollBox1) will be flicker free, a more detailed explanation can be found in the projects source code.

What happens after this rests firmly on two events: Image OnMouseDown and Image OnMouseMove.

The full source, havily documented, is available for download!

Delphi tips navigator:
» Execute a Custom Action on the Form's Help button Click
« How to Capture the Screen Shot of the Active Window