在 ScrollViewer (UWP) 中移动图像 [英] Moving Image in ScrollViewer (UWP)

问题描述

我在 Scrollviewer 中有一个 Image...

I've got a Image in Scrollviewer...

<ScrollViewer x:Name="Scrollster" ZoomMode="Enabled" MinZoomFactor="1" MaxZoomFactor="4"
          HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" ManipulationMode="All">
    <Image x:Name="Img" Source="{x:Bind ImgSource}" Stretch="UniformToFill" PointerPressed="Img_PointerPressed"/>
</ScrollViewer>

我想用鼠标指针拖动图像时移动图像！

I want to move Image when I drag image with Mouse Pointer!

我试过:

private void Img_PointerPressed(object sender,PointerRoutedEventArgs e)
{
  var p = e.Pointer;
}

但我无法获得更改滚动查看器位置的指针位置.

but I can't get pointer position to change scrollviewer postion.

我的代码有什么问题?我做得对吗?

What's wrong with my code? Am I doing it right?

推荐答案

ManipulationMode 应该设置在 Img 控件上.此外，您可能希望指定所需的确切模式而不是 All 以防止不必要的手势处理.

The ManipulationMode should be set on the Img control instead. Also, you probably want to specify the exact modes you want rather than All to prevent unnecessary gesture handling.

<Image x:Name="Img" Source="{x:Bind ImgSource}" Width="150" Height="150" Stretch="UniformToFill" 
       ManipulationMode="TranslateX, TranslateY"
       ManipulationStarted="Img_ManipulationStarted"
       ManipulationDelta="Img_ManipulationDelta"
       ManipulationCompleted="Img_ManipulationCompleted">
    <Image.RenderTransform>
        <CompositeTransform x:Name="Transform" />
    </Image.RenderTransform>
</Image>

根据您上面的描述，我认为同时启用 TranslateX 和 TranslateY 应该就足够了.然后，您将需要处理诸如 ManipulationStarted、ManipulationDelta 和 ManipulationCompleted 之类的操作事件.

From your description above, I think turning on both TranslateX and TranslateY should be sufficient. Then you will need to handle manipulation events like ManipulationStarted, ManipulationDelta and ManipulationCompleted.

您的大部分逻辑应该在 ManipulationDelta 事件中完成，该事件将在平移过程中多次触发.在这里您可以获得 X 和 Y 位置并相应地设置它们.

Most of your logic should be done in ManipulationDelta event which will be fired multiple times during the progression of the panning. It's where you get the X and Y positions and set them accordingly.

这是一个简单的示例.

void Img_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
{
    // dim the image while panning
    this.Img.Opacity = 0.4;
}

void Img_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    this.Transform.TranslateX += e.Delta.Translation.X;
    this.Transform.TranslateY += e.Delta.Translation.Y;
}

void Img_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
{
    // reset the Opacity
    this.Img.Opacity = 1;
}

这篇关于在 ScrollViewer (UWP) 中移动图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！