在 ScrollViewer (UWP) 中移动图像

Question

我在 Scrollviewer 中有一个 Image...

<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>

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

我试过：

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

但我无法获取指针位置来更改滚动查看器的位置。

我的代码有什么问题？我做对了吗？

Answer 1

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

<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.

等操作事件

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

这是一个简单的示例。

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) 中移动图像

Moving Image in ScrollViewer (UWP)

c#

winrt-xaml

windows-10

windows-10-mobile

uwp