Getting Viewbox and ScrollViewer to work together

Question

I’ve got n playing map where I use the `ScrollViewer` to move around the map, and I wish to use the `ViewBox` together with `PinchManipulations` to zoom in and out of the map. So far I’ve done this by setting the `ScrollViewer`’s `Manipulation` mode to `control`, however this gives me an lag when I zoom. Is there a way to get the `ViewBox` and `ScrollViewer` to work better together and thereby avoid the lag? The code I’ve got so far is: ScrollViewer: ``` ``` PinchZoom: ```

Accepted Answer

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.

Getting Viewbox and ScrollViewer to work together

Solution

Problem