使用 ChangeView() 缩放图像 - Windows 通用应用程序 - UWP Win10 - XAML

Question

我目前正在构建一个 Windows 通用应用程序，其中我有一个包含图像的 ScrollViewer。目标是在双击图像时放大图像。缩放应该以图像的双击 X/Y 坐标为中心。

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>

代码隐藏

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);        
  } 
}

现在的问题是：图像根据需要缩放，它总是缩放到图像的左上角。无论我在哪里双击它。方法中正确读取了图像坐标 - 因此我几乎可以排除这是问题的根源。

有什么想法吗？

Answer 1

来自官方文档，

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

ChangeView的第一个和第二个参数是horizontalOffset、verticalOffset，用于滚动到内容x或内容y。但是您已将 VerticalScrollBarVisibility 和 HorizontalScrollBarVisibility 设置为禁用。所以它总是缩放到图像的左上角。

根据您的要求，您可以使用 Microsoft.Toolkit.Uwp.UI.Animations 直接缩放图像。

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();

    }
}

使用 ChangeView() 缩放图像 - Windows 通用应用程序 - UWP Win10 - XAML

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

.net

c#

xaml

uwp

uwp-xaml