I think you should instead look at the viewportcontroller and look into the basic lens sample, where they have implemented this. The viewportcontroller, has a scrollviewer inside, and viewport.
The basics are this:
- While the image you have is "unzoomed", the scrollviewer has full control and the ViewportControl does nothing.
- When you start to pinch, lock the scrollviewer by disabling the verticalscrollbar AND setting the viewport.height = scrollviewer.height. This neutralizes the scollviewer.
- You can do a temporary zoom using the Image ScaleTransform.
- On pinch finished, resize your actual image so that it takes up real space inside the ViewportControl. Now your viewportControl will let you pan all over the zoomed image with nice bounce-back.
- When you zoom back out again, re-enable the scrollviewer. (Set the height to the screen height and turn on the scrollbar.)
FYI, I completely forget why there is a canvas in there, but I feel like it is important. See below:
While the sample below does not do what you want to do, I based my code on the MediaViewer inside this sample and modified it: Basic Lens Sample
However it should be noted that it is for picture zoom.