Moving Image in ScrollViewer (UWP)

Question

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!

I tried:

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?

Answer 1

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>

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.

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.

Here is a simple sample for this.

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