Увеличить изображение с помощью ChangeView () - Универсальное приложение для Windows - UWP Win10 - XAML - PullRequest
Новая
       24

Увеличить изображение с помощью ChangeView () - Универсальное приложение для Windows - UWP Win10 - XAML

0 голосов
/ 22 марта 2019

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

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

Есть идеи?

1 Ответ

1 голос
/ 25 марта 2019

Получено из официального документа,

Заставляет 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();

    }
}
...