locked
Using FlipView to create a PhotoViewer with pinch to zoom capability (like WP8 PhotoApp)

    Question

  • Hello,

    I'm currently developing a Universial App using WinRT to develop for Windows 8.1 and WP8.1. Inside that app I want to view a couple of images. Viewing the images works just fine with a FlipView but the disadvantage is, you cannot zoom. I searched for a solution for several hours but I cannot manage to find something good.

    Most solutions say I should use a ScrollViewer but it seems that it cannot work fine with the flipView as I'm still able to switch the image while I have a zoomed image and thus the next image is also zoomed as well.

    The best solution I could manage to find is the MediaViewer Control but unfortunately it's written for WP8 Silverlight so I cannot use it directly. I tried to port it to WinRT but I failed because it's using a ViewportControl and there's no such control for WinRT, we only have a ViewBox but I don't know if it behaves like the ViewportControl and it's also lacking some methods which are used by the MediaViewer Control.

    Can someone help me building a control which supports zooming and switching images? My goal is to reach a similar behaviour as in the photo app for WP8, that means I'm completely able to switch images as long as the aren't zoomed. If the ZoomLevel is > 1, then it should only be possible to pan the image but not trigger any item switch.

    Any help is greatly appreciated

    Regards

    Tuesday, August 05, 2014 8:31 PM

Answers

  • I resolved the issue. After seeing a post by you, rob, where you explaine how to prevent that the scrollViewer gets the gestures, I experimented a bit and found a solution. I'm still using a FlipView but the gestures are caught by a grid which has ManipulationMode set to TranslateX. With this I can perform a small drag and then the image gets changed. The disadvantage is that I lost the capability to peek at the next image due to the fact that the image does not scroll with the drag but it's not really bad.

    I also resolved my zoom issue with the use of apprpriate manipulation events (for more details see my other thread)

    After you return, I still would love to see your sample code, maybe I still can learn something from it?

    • Marked as answer by internetfreak Thursday, August 21, 2014 2:19 PM
    Thursday, August 21, 2014 2:19 PM

All replies

  • This is pretty easy to put together out of the box by hosting Image objects in the FlipView's item template and then wiring up manipulation events on the Images to handle zooming. You can block the input from going to the FlipView at all to decide if you want to pan the image or flip, and the app can force a flip by setting the FlipView's SelectedIndex.

    I'll see if I can dig up some sample code on this for you.

    --Rob

    Wednesday, August 06, 2014 12:00 AM
    Owner
  • Hi Rob,

    I'm currently already hosting an image object inside the item template of my flipView. How can I handle the input so the FlipView does not receive it? Afaik the ManipulationEventHandler does not have a Handled property so I cannot set it to prevent event bubbling.

    Any sample code will be appreciated so I have at least some rough path which I can follow as this problem is the only one which prevents the release of my app :)

    Wednesday, August 06, 2014 11:01 AM
  • It's not quite as simple as setting a Handled property.

    You will probably need to use the GestureRecognizer's manipulation events rather than the Xaml manipulation events. This will allow you to turn off the ScrollViewer when handling the Pointer events.

    Unfortunately the code I have isn't in a sharable state and I'm going to be on holiday next week so it will be a while before I can provide anything more specific.

    --Rob

    Thursday, August 07, 2014 8:34 PM
    Owner
  • So you mean that I have to use the GestureReconigzer to prevent the FlipView from Scrolling? Currently I'm only using an image inside the ItemTemplate of the FlipView and nothing else so I cannot zoom yet, only flip through the photos. How can I now prevent the Manipulation events from bubbling up to the flipView? Is it only possible with the GestureRecognizer?
    Thursday, August 07, 2014 9:22 PM
  • I resolved the issue. After seeing a post by you, rob, where you explaine how to prevent that the scrollViewer gets the gestures, I experimented a bit and found a solution. I'm still using a FlipView but the gestures are caught by a grid which has ManipulationMode set to TranslateX. With this I can perform a small drag and then the image gets changed. The disadvantage is that I lost the capability to peek at the next image due to the fact that the image does not scroll with the drag but it's not really bad.

    I also resolved my zoom issue with the use of apprpriate manipulation events (for more details see my other thread)

    After you return, I still would love to see your sample code, maybe I still can learn something from it?

    • Marked as answer by internetfreak Thursday, August 21, 2014 2:19 PM
    Thursday, August 21, 2014 2:19 PM
  • Hope you can get the reply, i am implementing a image viewer and encountered same problem as you mentioned. I used a FLipView to scroll the images and a ScrollViewer to Zoom in/Out images. you said you have found a solution, could you give me more information about this? did you still use the ScrollViewer to Zoom?
    Friday, November 21, 2014 5:13 AM
  • It's been a while since you posted this and I only saw it by chance but here's your answer, hope you will see it :)

    In my current solution I'm still using a FlipView but I don't handle zoom events with a ScrollViewer. Instead I created a small control which is embedded in the FlipView as ItemTemplate so I can handle the pinch to zoom gesture. To prevent flipping the Images I used two events in my custom controls which are fired when zoom gestures happened so I can lock/unlock image flipping. The events are hooked on the page because there I determine if I should handle the Manipulation event to flip an image or not.

    It used quite a bit of time to get to that solution but it works really good. As said, one disadvantage is that you have to use an own FlipView and embed my control in it instead of using one ready to go control. Also, currently you lose that peeking feature which the FlipView has when you perform a drag but don't do it far enough to really switch the element but it's something which one could live with

    I hope I could help you even after some months have passed.

    Tuesday, February 17, 2015 8:46 AM