Panorama while zooming with scrollviewer in Windows 8.1 phone
I am working on a flipview to recreate something exactly like a photo app. I am facing an issue when limiting the scroll area (panning area), as I would not want the user to zoom in / out in a dark area where the image is not present. I can do this by inserting a stacked panel, but I have to specify its height and width as the width of the image. But I can’t set this as I can’t get the correct height and width 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 here how to do this? Or any alternatives.
Edit: It doesn't help to dynamically set the stackup height and width to a scaled version of the image height and width obtained by ImageProperties . Are there any alternatives
source to share
Figured out the answer (not that perfect though) thanks to this blog.
The main problems I faced were: When we don't
VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto"
in this scrollviewer we get anchor to the unwanted effect on the left, and when we do it by default, we get a larger image and the image is not uniform. This is solved with a blog by setting the Flipview (parent) max height and maxwidth as the width of the device height with a converter. However, you will run into a problem when changing the orientation to take care of the onWindowSize event handler to reset the maxheight and width of the Flipview. (Though note that this is not a slick answer).
source to share