How to anchor zoom point in ScrollViewer+Image?

Question

I'm using the following XAML to allow the user to pan and zoom with an image:
<ScrollViewer x:Name="scrollViewer" HorizontalSnapPointsType="None" HorizontalScrollBarVisibility="Auto" VerticalSnapPointsType="None" ZoomSnapPointsType="None" IsHorizontalRailEnabled="False" IsVerticalRailEnabled="False" ManipulationMode="All" VerticalScrollBarVisibility="Auto" ManipulationDelta="ScrollViewer_ManipulationDelta_1" IsDoubleTapEnabled="False" IsRightTapEnabled="False" IsTapEnabled="False">
<Image x:Name="pannableImage" Source="{Binding FullSizedImage}" ManipulationMode="All" Loaded="pannableImage_Loaded" IsDoubleTapEnabled="False" IsHitTestVisible="False" IsHoldingEnabled="False" IsRightTapEnabled="False" IsTapEnabled="False" ScrollViewer.VerticalScrollBarVisibility="Disabled" LayoutUpdated="pannableImage_LayoutUpdated">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform x:Name="Scale" />
<RotateTransform x:Name="Rotate" />
<TranslateTransform x:Name="Translate" />
</TransformGroup>
</Image.RenderTransform>
</Image>
</ScrollViewer>
What I want to be able to do is keep the starting point of the zoom in the same place on the screen as the user zooms in or out.
In order to do that, I need to know the coordinates in the image where the zoom is starting so that I can then:
Get the screen coordinates for the image coordinates before the new scale factor is applied.
Get the screen coordinates for the image coordinates after the new scale factor is applied.
Adjust the translate transform so that the position stays the same
My problem lies in getting the point that the user is starting the zoom and then translating that into the underlying coordinates in the image.
I've tried:
private void scrollViewer_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
Debug.WriteLine("scrollViewer_ManipulationStarted: position = {0},{1}", e.Position.X, e.Position.Y);
GeneralTransform gt = pannableImage.TransformToVisual(scrollViewer);
GeneralTransform gti = gt.Inverse;
Point pt = gti.TransformPoint(e.Position);
Debug.WriteLine("scrollViewer_ManipulationStarted: image pos = {0},{1}", pt.X, pt.Y);
but the "image pos" numbers aren't right. It doesn't seem to matter if I pass scrollViewer or null to TransformToVisual.
This is for a Windows Universal App so needs to work on both Windows 8.1 and Windows Phone 8.1.
Can someone please advise a solution?
Thanks.

Answer 1

Hi Herro
Thank you for suggesting that code sample. It certainly does support zooming in and out beneath the manipulation point.
However, I am struggling to modify my existing implementation to support that different approach. There are a few areas where I'm having trouble and it may be that I just don't fully understand how the transforms work.
When the image is loaded, I want to make sure that, initially at least, the image is scaled so that it fits onto the screen. I'm using various events to trigger that initialisation but the core of the code is this:
double visibleHeight = Window.Current.Bounds.Height; // scrollViewer.ViewportHeight; //
double visibleWidth = Window.Current.Bounds.Width; // scrollViewer.ViewportWidth; //
// Get the image dimensions, allowing for rotation. We can be certain about
// using the values of 0, 90, 180, 270 because the rotation is always done in
// multiples of 90.
double imageHeight, imageWidth;
if (Math.Abs(selectedObject.Rotation) == 180 || selectedObject.Rotation == 0)
imageHeight = ManipulateMe.ActualHeight;
imageWidth = ManipulateMe.ActualWidth;
else
imageWidth = ManipulateMe.ActualHeight;
imageHeight = ManipulateMe.ActualWidth;
// If the image is larger than a screen dimension, work out
// what factor we want to make that dimension fit.
double scaleX, scaleY;
if (imageWidth > visibleWidth)
scaleX = visibleWidth / imageWidth;
else
scaleX = 1.0;
if (imageHeight > visibleHeight)
scaleY = visibleHeight / imageHeight;
else
scaleY = 1.0;
// Pick the SMALLER of the scale factors so that we ensure both
// dimensions fit onto the screen. Smaller because the values
// should be less than 1, so the smaller the value, the more the
// image is going to be reduced in size.
double scale;
if (scaleX < scaleY)
scale = scaleX;
else
scale = scaleY;
// Don't allow scale to be MORE than 1, at least initially. User can zoom in later.
if (scale > 1.0)
scale = 1.0;
if (scale != 1.0)
_compositeTransform.TranslateX = 0.0;
double scaledHeight = imageHeight * scaleY;
_compositeTransform.TranslateY = -(visibleHeight - scaledHeight) / 2;
_compositeTransform.CenterX = ManipulateMe.ActualWidth / 2;
_compositeTransform.CenterY = ManipulateMe.ActualHeight / 2;
_compositeTransform.ScaleX = _compositeTransform.ScaleY = scale;
Rect imageRect = _compositeTransform.TransformBounds(new Rect(0.0, 0.0, ManipulateMe.ActualWidth, ManipulateMe.ActualHeight));
double visibleLeft = 0, visibleTop = 0;
// Need to ensure that the image is positioned top-left
if (imageRect.Left != visibleLeft)
_compositeTransform.TranslateX = visibleLeft - imageRect.Left;
if (imageRect.Top != visibleTop)
_compositeTransform.TranslateY = visibleTop - imageRect.Top;
Now, when the page loads and displays the image, the image is perfect - scaled and positioned just right. However, if I then try to move the image, it vanishes and debugging information shows that the coordinates of the image are all over the place.
I *suspect* that the problem is being caused by my code setting up these initial values. My problem is that I don't know when to reset them or to what values.
My next problem is to do with the panning. I want to ensure that the user doesn't lose the image, so I want to ensure that when the image is larger than the screen, the right hand edge of the image can be off to the right but cannot move more to the left
than the right hand edge of the screen. Similarly for the other three sides of the image. My code works but it causes "bounces" in that the image seems to move back away from the screen edge and then back again to where I had "locked"
the edge. Again, it may be because I need to reset a translation value but I just don't know when or what to.
Below is my modified version of the ManipulationDelta routine:
void ManipulateMe_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
if (forceManipulationsToEnd)
e.Complete();
return;
_previousTransform.Matrix = _transformGroup.Value;
Point center = _previousTransform.TransformPoint(new Point(e.Position.X, e.Position.Y));
_compositeTransform.CenterX = center.X;
_compositeTransform.CenterY = center.Y;
// Reset rotation when user moves image around
_compositeTransform.Rotation = 0;
_compositeTransform.ScaleX = _compositeTransform.ScaleY = e.Delta.Scale;
Rect imageRect = ManipulateMe.RenderTransform.TransformBounds(new Rect(0.0, 0.0, ManipulateMe.ActualWidth, ManipulateMe.ActualHeight));
Debug.WriteLine("LTRB: {0},{1},{2},{3}", imageRect.Left, imageRect.Top, imageRect.Right, imageRect.Bottom);
double visibleHeight = Window.Current.Bounds.Height; // scrollViewer.ViewportHeight; //
double visibleWidth = Window.Current.Bounds.Width; // scrollViewer.ViewportWidth; //
double visibleLeft = 0, visibleRight = visibleWidth, visibleTop = 0, visibleBottom = visibleHeight;
double xAdjustment = e.Delta.Translation.X;
double yAdjustment = e.Delta.Translation.Y;
// If the image is SMALLER than the screen, don't let the edges of the image go beyond the screen edges
// If the image is LARGER than the screen, make sure that the edges of the image are either all outside
// the screen edges or stuck to the screen edges.
if (imageRect.Width <= visibleWidth)
Debug.WriteLine("... image is narrower than the screen");
// Lock to the left hand side
if ((imageRect.Left + xAdjustment) != visibleLeft)
xAdjustment -= (imageRect.Left + xAdjustment - visibleLeft);
else
//Debug.WriteLine("... image is wider than the screen");
if ((imageRect.Right + xAdjustment) < visibleRight)
Debug.WriteLine("... stopping image from moving off the right edge");
Debug.WriteLine("... right before adjustment = {0}", imageRect.Right);
Debug.WriteLine("... adjustment is {0}", xAdjustment);
Debug.WriteLine("... so potential new right is {0}", imageRect.Right + xAdjustment);
xAdjustment = (visibleRight - imageRect.Right);
Debug.WriteLine("... new adjustment is {0}", xAdjustment);
Debug.WriteLine("... and new right is {0}", imageRect.Right + xAdjustment);
if ((imageRect.Left + xAdjustment) > visibleLeft)
Debug.WriteLine("... stopping image from moving off the left edge");
Debug.WriteLine("... left before adjustment = {0}", imageRect.Left);
Debug.WriteLine("... adjustment is {0}", xAdjustment);
Debug.WriteLine("... so potential new left is {0}", imageRect.Left + xAdjustment);
xAdjustment = (visibleLeft - imageRect.Left);
Debug.WriteLine("... new adjustment is {0}", xAdjustment);
Debug.WriteLine("... and new left is {0}", imageRect.Left + xAdjustment);
if (imageRect.Height <= visibleHeight)
Debug.WriteLine("... image is shorter than the screen");
// Lock to the top
if ((imageRect.Top + yAdjustment) != visibleTop)
yAdjustment -= (imageRect.Top + yAdjustment - visibleTop);
else
//Debug.WriteLine("... image is taller than the screen");
if ((imageRect.Bottom + yAdjustment) < visibleBottom)
Debug.WriteLine("... stopping image from moving off the bottom edge");
Debug.WriteLine("... bottom before adjustment = {0}", imageRect.Bottom);
Debug.WriteLine("... adjustment is {0}", yAdjustment);
Debug.WriteLine("... so potential new bottom is {0}", imageRect.Bottom + yAdjustment);
yAdjustment = (visibleBottom - imageRect.Bottom);
Debug.WriteLine("... new adjustment is {0}", yAdjustment);
Debug.WriteLine("... and new bottom is {0}", imageRect.Bottom + yAdjustment);
if ((imageRect.Top + yAdjustment) > visibleTop)
Debug.WriteLine("... stopping image from moving off the top edge");
Debug.WriteLine("... top before adjustment = {0}", imageRect.Top);
Debug.WriteLine("... adjustment is {0}", yAdjustment);
Debug.WriteLine("... so potential new top is {0}", imageRect.Top + yAdjustment);
yAdjustment = (visibleTop - imageRect.Top);
Debug.WriteLine("... new adjustment is {0}", yAdjustment);
Debug.WriteLine("... and new top is {0}", imageRect.Top + yAdjustment);
_compositeTransform.TranslateX = xAdjustment;
_compositeTransform.TranslateY = yAdjustment;
e.Handled = true;
Many thanks for any suggestions you can make.
Regards
Philip