Zoom Image with ChangeView() - Windows Universal App - UWP Win10 - XAML

Question

I'm currently building a Windows Universal App in which I have a ScrollViewer that contains an Image. The goal is to zoom into the image when double tapping it. The zoom is supposed to be centered at the double tapped X/Y coordinates of the image.

XAML

<ScrollViewer Name="ImageScrollViewer" 
                VerticalScrollBarVisibility="Disabled" 
                VerticalScrollMode="Disabled" 
                HorizontalScrollBarVisibility="Disabled" 
                HorizontalScrollMode="Disabled" 
                ZoomMode="Enabled" 
                MinZoomFactor="1" 
                DoubleTapped="scrollViewer_DoubleTapped"                              
                Grid.Row="1" 
                Grid.Column="3" 
                Grid.ColumnSpan="5" 
                Margin="5,5,5,5" 
                HorizontalAlignment="Center" 
                VerticalAlignment="Center">
                <Image x:Name="MainPageImage" 
                    HorizontalAlignment="Center" 
                    VerticalAlignment="Center" 
                    Stretch="None" 
                    d:IsLocked="False"/>
</ScrollViewer>

Code Behind

private void scrollViewer_DoubleTapped(object sender, DoubleTappedRoutedEventArgs e)
{      
  var doubleTapPoint = e.GetPosition(ImageScrollViewer);

  // zoom in
  if(zoomFactor == 1)
  {
    zoomFactor = 2;
    ImageScrollViewer.ChangeView(doubleTapPoint.X, doubleTapPoint.Y, zoomFactor);        
  }
  // zoom out
  else
  {
    zoomFactor = 1;
    // maxWidth and maxHeight are integer containing the maximum image size
    ImageScrollViewer.ChangeView(maxWidth, MaxHeight, zoomFactor);        
  } 
}

Now here's the problem: The image gets zoomed as desired, it always zooms to the top left corner of the Image. No matter where I double tapped it. The image coordinates are correctly read in the method - so I can pretty much exclude this as the source of the problem.

Any ideas?

Answer 1

Derive from official document,

Causes the ScrollViewer to load a new view into the viewport using the specified offsets and zoom factor.

The first and second parameter of ChangeView are horizontalOffset, verticalOffset that used scroll to content x or content y. But you have set VerticalScrollBarVisibility and HorizontalScrollBarVisibility disable. So the it always zooms to the top left corner of the Image.

For your requirement, you could use Microsoft.Toolkit.Uwp.UI.Animations zoom your image directly.

using Microsoft.Toolkit.Uwp.UI.Animations;
private void scrollViewer_DoubleTapped(object sender, DoubleTappedRoutedEventArgs e)
{
    var doubleTapPoint = e.GetPosition(ImageScrollViewer);

     // zoom in
    if (zoomFactor == 1)
    {
         zoomFactor = 2;

         MainPageImage.Scale(centerX: (float)doubleTapPoint.X,
                 centerY: (float)doubleTapPoint.Y,
                 scaleX: 2.0f,
                 scaleY: 2.0f,
                 duration: 500, delay: 0).StartAsync();


    }
     // zoom out
     else
    {
         zoomFactor = 1;
         MainPageImage.Scale(centerX: (float)doubleTapPoint.X,
                  centerY: (float)doubleTapPoint.Y,
                  scaleX: 1.0f,
                  scaleY: 1.0f,
                  duration: 500, delay: 0).StartAsync();

    }
}