在ScrollViewer(UWP)中移动图像

Question

我有一个Image在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>

当我用鼠标指针拖动图像时,我想移动图像!

我试过了:

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

但我无法获得指针位置来改变scrollviewer位置.

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

Answer 1

本ManipulationMode应在设置Img控制来代替.此外,您可能希望指定所需的确切模式,而不是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;
}