Recently when building a mobile app in FMX I had an issue getting pinch and zoom working.

The recommended approach to mobile development in FMX is to have a single Form, and multiple views (frames). These views are switched in and out as required. This works very well. However, no matter what I tried I couldn’t get pinch and zoom working for the view which displayed images. In the end, the solution was fairly simple. You need to use the gesture events and properties of the Form itself, not the frame or image control, etc.. This was not intuitive for me, since different views manage gestures too, and some have their own TGestureManager. In addition, you can’t wire these shared gesture events at design time individually, especially since views are created on demand to reduce resource consumption.

This is the Structure view of my frame called TPictureView:

And this is the constructor:

Hooking into the Form

When a view is docked, the Controller calls the view’s Initialize method:

When the view is undocked, the touch properties and gesture event handler is removed:

On undocking, the view is hidden but kept alive for reuse.

Pinch and Zoom Handler

Next, the code in the view’s OnFormGesture handler manages the pinch and zoom event. This last bit of code was pretty much lifted from the sample that ships with Delphi, except I hand it the image control to use as this was suitable in my case:

FLastDistance is a private integer.

Notice how all the code belongs to the TPictureView, we only hook into the Form.

Sample Project

The sample project is called ImageZoom located in:

Object Pascal > Mobile Snippets > Interactive Gestures

The full path in version 10.4.2 is:

C:\Users\Public\Documents\Embarcadero\Studio\21.0\Samples\Object Pascal\Mobile Snippets\InteractiveGestures\ImageZoom

For earlier versions there will be a different version number than 21.0.

I hope this tip helps.