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.

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>

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>