locked
FlipView - disable scrolling

    Question

  • Hi,

    I create FlipView with images. I want when I zoom current page with image to disable scrolling of FlipView. I don't want when zoom image to scroll on next or previous images.

    I set style overflow:hidden, but FlipView control can scroll.

    Also why FlipVview didn't fire scroll event. I write simple code and it never call a function flipViewScroll when I scroll FlipView

    var flipView1 = document.getElementById("FlipView").winControl;
    flipView1.addEventListener("scroll", flipViewScroll, false);

    function flipViewScroll(event){

    }


    Simeon Antonov

    Friday, March 23, 2012 1:09 PM

All replies

  • Are you talking about using the navigation buttons?  Can you post a simple example or reference a sample?

    -Jeff


    Jeff Sanders (MSFT)

    Friday, March 23, 2012 4:36 PM
    Moderator
  • I want  to disable scrolling of FlipView control with touch gesture. When user use mouse I think I can disable navigation button and user can't scroll. But when there is a touch display user move from current image to next with touch gesture. How I can disable scrolling with touch gesture. What kind of example to post? Would I post link to sample?

    Simeon Antonov

    Friday, March 23, 2012 7:10 PM
  • I see.  The panning is accomplished by the panningDivContainer.

    You can disable the scrolling from touch with something similar to this:

    flipView._panningDivContainer.style["overflow-x"] = "hidden";

    flipView._panningDivContainer.style["overflow-y"] = "hidden";

    There must be an easier way to do this via CSS but I have not found it!

    -Jeff


    Jeff Sanders (MSFT)

    Friday, March 23, 2012 8:13 PM
    Moderator
  • Thanks. I will try it later and I will write for result

    Simeon Antonov

    Friday, March 23, 2012 8:41 PM
  • Yes this disable scrolling, but when I enable it and make scroll with finger(not button)flip view disappear for a moment and after that scroll to first image.As I said I want to disable scroll of flip view when I start to zooming image. After zoom back image I want to enable scroll of Flip view.

    I remake Flip view sample with this disable of scroll. Flip view sample


    Simeon Antonov



    Friday, April 06, 2012 7:54 AM
  • OK I think I understand, you do not want to have the flip view 'flip' when you are zoomed in.  Is that correct?

    -Jeff


    Jeff Sanders (MSFT)

    Monday, April 09, 2012 1:11 PM
    Moderator
  • Yes, when make zoom, I want to pan to zoomed image. But when I want to zoom image to 1:1 then I want to flip again.


    Simeon Antonov

    • Proposed as answer by Alamjaisy Thursday, August 09, 2012 6:12 PM
    Monday, April 09, 2012 1:15 PM
  • OK I understand now.

    This would be pretty easy to do.  If you drill into the code that does this (in ui.js) you will see the flipView has a next and previous function.

    You could use an expando property and store the old next and previous functions and override them to do nothing when zoomed in, then restore them when you want to flip again:

     // save old functions for this flipview instance:
     var myFlipView = id("Scenario2_FlipView").winControl;
     myFlipView.oldNext = myFlipView.next;
     myFlipView.oldPrevious = myFlipView.previous;
     myFlipView.next = function () { };
     myFlipView.previous = function () { };
    
    // Restore the old functions:
     var myFlipView = id("Scenario2_FlipView").winControl;
     myFlipView.next = myFlipView.oldNext;
     myFlipView.previous = myFlipView.oldPrevious;

    -Jeff

    Jeff Sanders (MSFT)

    Monday, April 09, 2012 2:17 PM
    Moderator
  • Thanks for reply, but the problem exist. I save old function on zoom and restore when image are 1:1.

    I try this code with flipView._panningDivContainer.style["overflow-x"] = "hidden";, but result is same.

    1. Go to image different from first.

    2. Make zoom over image, after that panning zoomed image.

    3.Zoom image to 1:1

    4.Use finger to scroll flip view(not arrow button), and flip disappear for moment and after that it show first image.


    Simeon Antonov

    Tuesday, April 10, 2012 8:40 AM
  • When you say that you still have the problem, are you saying that this code does not disable the flip view from flipping images when you are zoomed in?  Is this a totally different problem (the image is not displaying smoothly)?

    Jeff Sanders (MSFT)

    Tuesday, April 10, 2012 11:45 AM
    Moderator
  • This code does not disable the flip view from flipping images. You can try it. When you use finger you can scroll. This code disable arrow button.

    // save old functions for this flipview instance:
    var myFlipView = id("Scenario2_FlipView").winControl;
    myFlipView
    .oldNext = myFlipView.next;
    myFlipView
    .oldPrevious = myFlipView.previous;
    myFlipView
    .next = function () { };
    myFlipView
    .previous = function () { };

    // Restore the old functions:
    var myFlipView = id("Scenario2_FlipView").winControl;
    myFlipView
    .next = myFlipView.oldNext;
    myFlipView
    .previous = myFlipView.oldPrevious;


    Simeon Antonov

    Tuesday, April 10, 2012 11:48 AM
  • Hi

    Is there any solution?


    Simeon Antonov

    Wednesday, April 25, 2012 10:49 AM
  • Hi Simeon,

    The control does not directly support this.  You can try temporarily disabling gestures by creating a gesture handler (I have not had an opportunity to implement this and test).  This along with my previous suggestion may override the default behavior of the control.

    http://msdn.microsoft.com/en-us/library/windows/apps/hh465869.aspx

    I think you may be able to cancel the Start event when you zoom in and disable the flipping.

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, April 25, 2012 12:15 PM
    Moderator