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?

Poseur

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

Martini

Works fine but Now in touch mode (table and mobile) I can't pinch to zoom in and out ! what's the problem? Should I ask it in a new topic? – Poseur

I believe you need to turn on ManipulationModes.Scale and handle this.Transform.ScaleX and this.Transform.ScaleY manually. Or maybe, when there are more than one contacts, disable ManipulationMode and let the system handle the zoom in/out. – Martini

Now I know how to fix it : Adding System to ManipulationMode will fix it. I mean : ManipulationMode="TranslateX, TranslateY, System" – Poseur

Yes, as the default mode is System. So when I changed to TranslateX n TranslateY, I disabled all the systems auto handling. :p – Martini

Thanks. Saved my day! – Matrilineage