Using ScrollViewer for image pinch-zoom, keeps snapping left on pan

Question

I am trying to use a XAML ScrollViewer to 'cheaply' add pinch-zooming to an image. The issue however is that when panning around the image, it keeps snapping to the very left. If I slide it right, it looks fine, but the second I release the image, it snaps back to the left.

This problem only persists horizontally - for vertical panning, it works fine.

I abstracted this to the most simple test case, and it persists. My XAML code is as follows:

    <ScrollViewer>
        <Image Source="http://i.imgur.com/1WlGT.jpg" />
    </ScrollViewer>

Any help is appreciated.

Maidenhood

Answer 1

I've resolved this.

The issue is you have to explicityl set HorizontalScrollBarVisibility to true.

<ScrollViewer x:Name="scrollViewer" 
                  VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" 
                  ZoomMode="Enabled">
        <Image Source="http://i.imgur.com/1WlGT.jpg" />
    </ScrollViewer>

Maidenhood

This seems to break the initial sizing of the image within the scrollviewer. Without setting the visibility you the image scales to fill the horizontal width of the scrollviewer. After applying your solution the initial display of the image is larger than the container. – Gheber

For anyone having the above issue, set the starting width of the image to the width of the scrollview viewport: Image.Width = ImageScrollViewer.ViewportWidth; – Gheber

Extending on this advice, you need to set the Image.Width after the viewport was established. I used the LayoutUpdated event for that. – Transmission

Answer 2

Just illustration of possible solution of what Michal Strzalkowski mentioned about in his comment below your answer, which is image being shown in full size (not fitting in the container boundaries). Quick fix in XAML using Binding with ElementName and Path

<ScrollViewer x:Name="SV_ImageZoom"           
              MaxZoomFactor="3"
              MinZoomFactor="1"
              ZoomMode="Enabled"                          
              HorizontalScrollBarVisibility="Auto"
              VerticalScrollBarVisibility="Auto">
    <Image Source="http://i.imgur.com/1WlGT.jpg"
           Width="{Binding Path=ViewportWidth, ElementName=SV_ImageZoom}" />
</ScrollViewer>

Minsk