Zoom/scroll to cursor

Question

I have a problem when zooming in/out of an image within a scrollviewer. When i use the zoom-in button i use a double animation for the image width/height to 1.25 of its original size each time the button is clicked. The same goes for the zoom-out button which sets the scale factor to 0.75. So far so good.

The problem is that based on where i click relative to the center of the scrollviewer id like to scroll towards the click-point. I calculate a delta x/y based on this which is used to determine the direction of the scrolling on the x and y axes.

double deltaX = (ClickPosition.X - center.X)
double deltaY = (ClickPosition.Y - center.Y)

Now i have to take into account the current zoom factor of the image when applying the delta to the vertical and horizontal scrollbars (which too are animated with a double animation).

When i zoom and scroll at the same time the final position doesnt end up where i expect it to. The origin of the image scaling appears to always be at 0,0 (top left corner) of the image so im not sure how to handle that, hence clicking on the left side of the center gives a stronger scrolling to the left than clicking on the right side of the center.

Example: http://212.214.41.66/SilverlightZoom/RealQImageMapTestPage.html

Source: http://212.214.41.66/SilverlightZoom/ImageMap.zip

I looked at your code. Is there any reason as to why you scale the image using the width and height instead of using a scaling transform? — Johannes

Johannes Johannes · Accepted Answer · 2009-10-08T07:37:35

In your code, you zoom the image by increasing the width and the height of the image. This will always happen around the top-left point. However, if you use a scaling transform, you can set the point around which the image should be scaled.

<Image x:Name="img" Margin="151,127,208,142" Source="Waterfall.jpg" Stretch="Fill">
                   <Image.RenderTransform>
                   <ScaleTransform x:Name="imagescale" ScaleX="1.2" ScaleY="1.2" CenterX="100" CenterY="100">
                   </ScaleTransform>
                   </Image.RenderTransform>
                   </Image>

This code sample was taken from here

This should enable you to set the scaling to the ClickPosition by binding it to a property.

On another note: I am not sure that you intended your scaling to work like that, but if you zoom in by 1.25, you should zoom out by 1/1.25 and not 0.75. That will keep zooming constant, where your zoom changes as you go along (i.e. if I zoom in twice and zoom out twice, I would not have a zoom of 1 anymore.)

Zoom/scroll to cursor

1 Answers