Panning issue when zooming with scrollviewer in windows phone 8.1

3
votes

I'm working on a flipview to recreate something exactly like photos app. I'm facing problem when restricting the scroll area(pan area) like I would not like the user to zoom/scroll in the dark area where the image is not present. I can do this by inserting a stackpanel but have to specify its height and width as the width of the image. But I'm not able to set this as I can't get the proper height,width details of the image.

Code:

<ScrollViewer x:Name="theScrollViewer" 
ViewChanged="theScrollViewer_ViewChanged"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
VerticalScrollBarVisibility="Auto" 
HorizontalScrollBarVisibility="Auto" 
ZoomMode="Enabled" MinZoomFactor="1" MaxZoomFactor="2" 
SizeChanged="OnSizeChanged">
    <StackPanel Orientation="Horizontal">
           <Image x:Name="theImage"
                       Stretch="Uniform" Source="Assets/2222.png"  />
     </StackPanel>
</ScrollViewer>

Can anyone help me out here how to exactly do this? Or any alternatives.

Edit: Its not helping to set the stackpanel height and width dynamically to the scaled version of the image height & width got by ImageProperties . Is there any alternatives

1
c#windows-runtimewindows-phone-8.1msdn

1 Answers

0
votes

Figured out the answer (not so perfect though) thanks to this blog.

The main problems I faced were: When we dont make

 VerticalScrollBarVisibility="Auto" 
HorizontalScrollBarVisibility="Auto"

in this scrollviewer we get a snapping to left unwanted effect and when we do this by default we get a larger image and the image is not uniform. This is solved with the help of the blog by setting the Flipview(parent) maxheight and maxwidth as the device height width with a converter. Still you will face a problem when changing the orientation so that is taken care of onWindowSize event handler to reset the maxheight and width of the Flipview.(Though note this is not a smooth answer).