views:

20

answers:

1

Hi,

I would like to zoom in/out an image exactly where mouse click occurs. Whole image should be zoomed but current view should show the part where mouse click happened and scrollbar should be available for seeing other parts as well.

I tried using scrollviewer and placed my image control inside it. On mouse click am using RenderTransform and increasing the scale by 1 everytime user clicks for Zoom in.Image is getting zoomed-in but view is not at the place where mouse click occured.

Please help!

THanks Sai

A: 

You need to set the RenderTransformOrigin property based on the mouse location.

Values for RenderTransformOrigin are evaluated against the top left corner of the bounding box for a UIElement.

You will need to convert your mouse location to the coordinates of the image to get the correct origin and normalize the values so that they are in the range 0 to 1 by dividing the position by the dimensions of the image.

ChrisF
Thanks Chris.. I have used e.getposition(sender) in mouseleftbuttondown event and assigned it to the RenderTransformOrigin and everything goes blank.. dont know why?
Sai
@Sai - debug the code and check the values to make sure they are sensible. You might have to negate the values (for example) but I can never remember these things myself so I always check.
ChrisF
I was directly assiging the e.getposition(sender) to RenderTransformOrigin which is incorrect, I should normalize the value from 0 to 1 by dividing the position by the dimensions. After doing so I got it working. Thank you.
Sai
@Sai - I'll update the answer with that information just so it's in one place.
ChrisF