locked
Can't scroll a JavaScript Metro Style app list view easily on a touch screen

    Question

  • Hello there

    I have a JavaScript based Metro Style app with a list view which can scroll horizontally past the right edge of the screen.

    Using a touch screen interface, the list view will only scroll if the user taps in the small gap between the tiles.  It does not scroll if the user taps on a tile. Tapping on a tile does nothing, although the tile does seem to flicker for a moment as if it were being selected.  I can successfully select a tile by using the standard “swiping up” motion on the tile.

    The list view control and tiles are identical to those used in the “ListView working with data sources” sample (modified for single selection rather than multiple selection), however it does not scroll in the same way.

    Any help would be appreciated.

    Geoff Olding

    Monday, September 24, 2012 12:19 PM

Answers

  • Hi Jeff

    Now resolved.

    I was pointing to an out of date copy of ui-light.css.

    Thanks for your help

    Geoff Olding

    • Marked as answer by Geoff_Olding Wednesday, September 26, 2012 3:59 PM
    Wednesday, September 26, 2012 3:58 PM

All replies

  • I have an issue that may have a similar resolution.  I have embedded a slider inside a scrollviewer object.  I noticed that you need to either use a mouse or stylus to scroll the window.  You cannot scroll the window with your finger on  a touch screen.  Is there an easy way to change the handling of gestures?


    - Ken

    Monday, September 24, 2012 12:38 PM
  • Hi Geoff,

    How does the gridview template behave on your system (create a blank grid app from Visual Studio)?

    -Jeff


    Jeff Sanders (MSFT)

    Tuesday, September 25, 2012 12:43 PM
    Moderator
  • Hi Jeff

    Thanks for your reply.

    I have not tried creating a new blank application, however when I run the "ListView working with data sources" sample application from the Visual Studio simulator, it scrolls "correctly", in that it scrolls if you simulate the pressing of your finger on a tile followed by a sideways movement of your finger.

    There are no significant differences between the properties of the tile and list view in the sample application and my own.

    I have tried all permutations of the SwipeBehaviour and TapBehaviour properties without success.

    Regards

    Geoff Olding

    Tuesday, September 25, 2012 5:30 PM
  • Hi Jeff

    I have tried creating a new application based on the Grid App template.  This also scrolls "correctly" in the emulator.

    Regards

    Geoff Olding

    Tuesday, September 25, 2012 6:03 PM
  • I have stripped down the code to its essentials, and I still get the same behaviour.  This is my complete code:

    <!DOCTYPE html>
    <html>
    <head>
        <!-- Main Form -->
        <meta charset="utf-8" />
        <title>Timed</title>
         
        <!-- WinJS references -->
        <link rel="stylesheet" href="/css/ui-light.css" />
        <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
        <link href="/css/default.css" rel="stylesheet">

        <script src="/MSAdvertisingJS/ads/ad.js"></script>

        <!-- Timed references -->
        <script src="/js/default.js"></script>
        <script src="/js/BSBusiness.js"></script>
        <script src="/js/CLController.js"></script>
        <script src="/js/DBDebug.js"></script>
        <script src="/js/FEFrontEnd.js"></script>
        <script src="/js/FLFiles.js"></script>
        <script src="/js/FVFieldValidation.js"></script>
        <script src="/js/HTHTML.js"></script>
        <script src="/js/IDIdsAndSettings.js"></script>
        <script src="/js/JDJsonData.js"></script>
        <script src="/js/MUMetroUtils.js"></script>
        <script src="/js/RPReport.js"></script>
        <script src="/js/SDSkyDrive.js"></script>
        <script src="/js/SYSync.js"></script>
        <script src="/js/UTUtils.js"></script>
        <script src="/js/WLFront.js"></script>
    </head>
    <body>

        <!-- Client section -->
        <div style="width: 100%; height: 165px;">
            <div id="dwcClientList" data-win-control="WinJS.UI.ListView" style="height:156px"
                data-win-options="{ selectionMode: 'single', layout: { type: WinJS.UI.GridLayout }}">               
            </div>
         </div>
       
        <!-- Client datawin control template -->
        <div id="dwcClientTemplate" data-win-control="WinJS.Binding.Template" >
            <div style="width: 180px;height: 66px;">
                Hello
            </div>
        </div>
       
        <!-- App Bar -->
        <div id="dwcAppBar" data-win-control="WinJS.UI.AppBar">
            <button data-win-control="WinJS.UI.AppBarCommand"
                data-win-options="{id:'cmdAddClient', label:'Add Client', icon:'add',
                    section:'selection', tooltip:'Add a new client'}">
            </button>
        </div>
       
        <!-- Maintain Client flyout -->
        <div id="dwcMaintainClient" data-win-control="WinJS.UI.Flyout">
            <fieldset class="formSection">
            <legend class="formSectionHeading" id="lgMaintainClient">(Add Client)</legend>
            <span class="csLabel">Name:</span>
            <input id="txtMaintainClientName" type="text" class="csText" maxlength="40"/>
            <input id="cmdMaintainClient" type="button" class="csButton" value="(Add)"
                onclick="FEMaintainClient_Do()"/>
            </fieldset>
        </div>
    </body>
    </html>

    Wednesday, September 26, 2012 10:18 AM
  • Hi Geoff,

    Your sample has a lot of included js files etc...

    I would suggest you start stripping out code or add code to the template generated by Visual Studio until you determine what you have added or removed to create the different behavior.  I don't see anything in the HTML you posted but obviously this is not the default behavior so there is something in there that is causing this!

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, September 26, 2012 1:57 PM
    Moderator
  • Hi Jeff

    I have stripped down my application to its simplest possible form - it now contains a list view with default values, and code to set its datasource.  I have pasted in the code below.

    I am currently unable to see what there could be in there to cause this behaviour.

    Would you be able to try out this code?

    Regards

    Geoff Olding

    <!DOCTYPE html>
    <html>
    <head>
        <!-- Main Form -->
        <meta charset="utf-8" />
        <title>Timed</title>
         
        <!-- WinJS references -->
        <link rel="stylesheet" href="/css/ui-light.css" />
        <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
        <link href="/css/default.css" rel="stylesheet">

        <!-- Timed references -->
        <script src="/js/default.js"></script>
    </head>
    <body>

        <!-- Client section -->
        <div style="width: 100%; height: 165px;">
            <div id="dwcClientList" data-win-control="WinJS.UI.ListView" style="height:156px"
                data-win-options="{ selectionMode: 'single', layout: { type: WinJS.UI.GridLayout }}">               
            </div>
         </div>
       
        <!-- Client datawin control template -->
        <div id="dwcClientTemplate" data-win-control="WinJS.Binding.Template" class="itemtemplate">
            <div style="width: 180px;height: 66px;">
                Hello
            </div>
        </div>   
    </body>
    </html>

    //  Application initialisation
    (function () {
        "use strict";

        try{
            var app = WinJS.Application;

            app.onactivated = function (eventObject) {
                if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
                    if (eventObject.detail.previousExecutionState !== Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
                   
                    } else {
                        //  No resume specific functionality required
                    }
                    WinJS.UI.processAll();
                    mInitClientList();
                }
            };

            app.oncheckpoint = function (eventObject) {
                //  Alternative method of processing a suspension notification - no action required
            };

            app.start();
        }
        catch (exThis) {
            MUHandleException(exThis, "onactivated");
        }

    })();

    function mInitClientList() {

        var oDiv = document.getElementById("dwcClientList");
        var oDWC;
        var aDS = [];
        var iClient;
        var dsList;

        for (iClient = 0; iClient < 20; iClient++) {
            aDS.push("a client");
        }
        oDWC = oDiv.winControl;
        dsList = new WinJS.Binding.List(aDS);
        oDWC.itemDataSource = dsList.dataSource;
        oDWC.itemTemplate = document.getElementById("dwcClientTemplate");
    }

    Wednesday, September 26, 2012 3:15 PM
  • Hi Jeff

    Now resolved.

    I was pointing to an out of date copy of ui-light.css.

    Thanks for your help

    Geoff Olding

    • Marked as answer by Geoff_Olding Wednesday, September 26, 2012 3:59 PM
    Wednesday, September 26, 2012 3:58 PM