locked
ListView SwipeBehavior and MSPointer events problem RRS feed

  • Question

  • Hi,

    I have a main container which is listening to MSPointer events and using the GestureRecognizer to process the events. Inside that container there are other containers and one of them has several ListViews inside it and since the content doesn't fit the container, it has horizontal scroll bar.

    <div id="mainContainer"> <!-- processing the MSPointer events -->
        <div id="listviewContainer"> <!-- has horiontal scrollbar -->
            <div id="listview1" data-win-control="WinJS.UI.ListView"></div>
            <div id="listview2" data-win-control="WinJS.UI.ListView"></div>
            <div id="listview3" data-win-control="WinJS.UI.ListView"></div>
        </div>
    </div>

    Basically this is the structure.

    The main container is catching the MSPointer events and everything works fine except when we try to swipe the finger to scroll and it touches the ListViews. It won't scroll because the ListViews catch the event which doesn't get caught by the listviewContainer.

    Now, there is a property in the ListViews that is the SwipeBehavior and if we set it to 'none' it fixes the horizontal scroll problem but will break the MSPointer events which don't get sent to the main container.

    I wanted to know how can I get these two behaviors to work at the same time.

    Thank you.
    Regards,
    Ricardo.


    Ricardo Sabino --- http://www.ricardosabino.com



    • Edited by n0n4m3 Wednesday, May 2, 2012 5:51 PM
    Wednesday, May 2, 2012 3:25 PM

All replies

  • Update:
    Basically what I'm trying to do is the SemanticZoom behaviour. I had already tried using the control but with a similar result:

            <!-- The content that will be loaded and displayed. -->
            <div style="width: 100%; height: 100%;">
                <div id="sezoDiv"
                     data-win-control="WinJS.UI.SemanticZoom"
                     data-win-options="{ zoomFactor: 0.5, initiallyZoomedOut: false }"
                     style="height: 100%; border:3px solid red;"
                    >
                    <div id="ZoomedInDiv"
                         data-win-control="Controls.ZoomView"
                         data-win-options="{ start: 1990, end: 2040 }"
                        >
                        <div id="main" style="display: -ms-grid; -ms-grid-columns: 1fr; -ms-grid-rows: 100px 1fr; height: 100%; overflow-x: auto; overflow-y: hidden; -ms-touch-action: none">
                            
                            <div class="mainContent" style="display: -ms-grid; -ms-grid-columns: 587px 1fr; -ms-grid-rows: 1fr;  -ms-grid-row: 2; width: 100%;">
                                <div id="newsList1" data-win-control="WinJS.UI.ListView" 
                                     style="margin-right: 20px; border: 1px solid green; -ms-grid-column: 1;" data-win-options="{swipeBehavior:'none'}">
                                </div>
                                
                                <div style=" -ms-grid-column: 2; margin-right: 20px; display: -ms-box; -ms-box-orient: horizontal;">
                                    <div id="newsList2" data-win-control="WinJS.UI.ListView" style="
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        border: 1px solid pink; min-width: 687px;" data-win-options="{swipeBehavior:'none'}">
                                    </div>
    
                                    <div id="newsList3" data-win-control="WinJS.UI.ListView" 
                                         style="margin-left: 20px; border: 1px solid yellow; min-width: 1366px;" data-win-options="{swipeBehavior:'none'}">
                                    </div>
                                </div>
    
                            </div>
                        </div>
                    </div>
                    
                    <div id="ZoomedOutDiv"
                         data-win-control="Controls.ZoomView"
                         data-win-options="{ start: 1990, end: 2040, interval: 10 }"
                        >
                        <div class="mainContent">
                            agrgarg
                        </div>
                    </div>
                </div>
    

    In this case if the #main div has the "-ms-touch-action: manipulation;" the scroll works fine everywhere but the SemanticZoom won't work, but if I set the "-ms-touch-action: none" the scroll will only work in the top 100 pixels.

    Does any one knows how can I get this to work?

    Thank you!


    Ricardo Sabino --- http://www.ricardosabino.com

    Thursday, May 3, 2012 3:43 PM
  • Hi Ricardo,

    Can you post a complete example of this problem?

    -Jeff


    Jeff Sanders (MSFT)

    Monday, May 14, 2012 6:29 PM
    Moderator