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

问题

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.

回答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>

回答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>

来源：https://stackoverflow.com/questions/13782810/using-scrollviewer-for-image-pinch-zoom-keeps-snapping-left-on-pan