Блог

В настоящее время я создаю универсальное приложение для 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);        
  } 
}
  

Теперь вот в чем проблема: изображение увеличивается по желанию, оно всегда увеличивается до верхнего левого угла изображения. Независимо от того, где я дважды нажал на него. Координаты изображения правильно считываются в методе, поэтому я могу в значительной степени исключить это как источник проблемы.

Есть идеи?

Выводится из официального документа,

Заставляет ScrollViewer загружать новый вид в окно просмотра, используя указанные смещения и коэффициент масштабирования.

Первым и вторым параметром 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();

    }
}