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.

score 14 · Accepted Answer · answered Dec 08 '12 at 23:13

14

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>

answered Dec 08 '12 at 23:13

Steve

2,108
4
25
36

1

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. – Michal Strzalkowski Nov 14 '14 at 02:43
5

For anyone having the above issue, set the starting width of the image to the width of the scrollview viewport: Image.Width = ImageScrollViewer.ViewportWidth; – Michal Strzalkowski Nov 14 '14 at 02:52
Extending on this advice, you need to set the Image.Width after the viewport was established. I used the LayoutUpdated event for that. – Eric Kok May 15 '15 at 10:09

score 3 · Answer 2 · answered Oct 15 '15 at 05:13

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>

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

2 Answers2

Linked