Panning and Scrolling in Windows Store Apps

Introduction

In this article I describe how to create a Windows Store App for panning and scrolling large images using JavaScript. Panning and scrolling is used to allow an end-user to reach additional content that otherwise would not fit into a view. There are a few types of panning and scrolling to consider:

  1. Horizontal: User can move content left/right.
  2. Vertical: User can move content up/down both axes.
  3. Unrailed: User is free to move the content in any direction.
  4. Railed: User motion is locked to an axis, if close enough to the axis.

With the new ms-overflow-style property, you can control the type of scrollbar and when it appears.

I assume you can create a simple Windows Store App using JavaScript. For more help visit Simple Windows Store Apps using JavaScript.

To start the creation of the app, add two JavaScript pages by right-clicking on the js folder in the Solution Explorer and select Add > new item > JavaScript Page and then give an appropriate name. In the same way, add one HTML page to your project.

panning-in-windows-store-apps.jpg

Write the following code in default.html:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <link rel="stylesheet" href="//Microsoft.WinJS.1.0/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 rel="stylesheet" href="/css/default.css" />

    <script src="/js/script1.js"></script>

    <script src="/js/default.js"></script>

</head>

<body role="application">

    <div id="rootGrid">

        <div id="content">

            <h1 id="featureLabel"></h1>

            <div id="contentHost"></div>

        </div>

    </div>

</body>

</html>

Write the following code in default.js:
 

(function () {

    "use strict";

    var AppTitle = "";

    var pages = [

 

        { url: "page.html" }

    ];

    function activated(eventObject) {

        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {

            eventObject.setPromise(WinJS.UI.processAll().then(function () {

                var url = WinJS.Application.sessionState.lastUrl || pages[0].url;

                return WinJS.Navigation.navigate(url);

            }));

        }

    }

    WinJS.Navigation.addEventListener("navigated", function (eventObject) {

        var url = eventObject.detail.location;

        var host = document.getElementById("contentHost");

        host.winControl && host.winControl.unload && host.winControl.unload();

        WinJS.Utilities.empty(host);

        eventObject.detail.setPromise(WinJS.UI.Pages.render(url, host, eventObject.detail.state).then(function () {

            WinJS.Application.sessionState.lastUrl = url;

        }));

    });

    WinJS.Namespace.define("app", {

        AppTitle: AppTitle,

        pages: pages

    });

    WinJS.Application.addEventListener("activated", activated, false);

    WinJS.Application.start();

})();


Write the following code in page.html:

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <link rel="stylesheet" href="/css/panning.css" />

    <link rel="stylesheet" href="/css/default.css" />

    <script src="/js/script.js"></script>

</head>

<body>

    <div data-win-control="app.pageInput">

        <div id="selectGrid">

            <label id="PanningTypeLabel">Select:</label>

            <select size="1" id="PanningType" aria-labelledby="PanningTypeLabel">

                <option selected="selected" value="None">None</option>

                <option value="Horizontal">Horizontal</option>

                <option value="Vertical">Vertical</option>

                <option value="Unrailed">Unrailed</option>

                <option value="Railed">Railed</option>

            </select>

            <br />

            <label id="ScrollbarStyleLabel">Set style:</label>

            <select size="1" id="ScrollbarStyle" aria-labelledby="ScrollbarStyleLabel">

                <option selected="selected" value="none">none</option>

                <option selected="selected" value="scrollbar">scrollbar</option>

                <option selected="selected" value="-ms-autohiding-scrollbar">-ms-autohiding-scrollbar</option>

            </select>

        </div>

    </div>

    <div data-win-control="app.pageOutput">

        <div id="page1_Scroller" class="ManipulationContainer None">

            <img alt="abc" src="/images/abc.jpg" class="row1 col1" />

        </div>

    </div>

</body>

</html> 


Write the following code in script.js:

(function () {

    "use strict";

    var page = WinJS.UI.Pages.define("page.html", {

        processed: function (element, options) {

            document.getElementById("PanningType").addEventListener("change", changePanningType, false);

            document.getElementById("ScrollbarStyle").addEventListener("change", changeOverflowStyle, false);

        }

    });

    function changePanningType(changedEvent) {

        var myScrollElement = document.getElementById("page1_Scroller");

        var panType = changedEvent.target.options.value;

        myScrollElement.className = "ManipulationContainer " + panType;

    }

    function changeOverflowStyle(changedEvent) {

        var myScrollElement = document.getElementById("page1_Scroller");

        myScrollElement.style["-ms-overflow-style"] = changedEvent.target.options.value;

    }

})();


Write the following code in script1.js:

(function () {

    var pageOutput = WinJS.Class.define(

        function (element, options) {

            element.winControl = this;

            this.element = element;

            new WinJS.Utilities.QueryCollection(element)

                        .setAttribute("role", "region")

                        .setAttribute("aria-labelledby", "outputLabel")

                        .setAttribute("aria-live", "assertive");

            element.id = "output";

 

            this._addOutputLabel(element);

            this._addStatusOutput(element);

        }, {

            _addOutputLabel: function (element) {

                var label = document.createElement("h2");

                label.id = "outputLabel";

                label.textContent = "Output";

                element.parentNode.insertBefore(label, element);

            },

            _addStatusOutput: function (element) {

                var statusDiv = document.createElement("div");

                statusDiv.id = "statusMessage";

                element.insertBefore(statusDiv, element.childNodes[0]);

            }

        }

    );

    var currentpageUrl = null;

 

    WinJS.Navigation.addEventListener("navigating", function (evt) {

        currentpageUrl = evt.detail.location;

    });

 

    WinJS.log = function (message, tag, type) {

        var statusDiv = document.getElementById("statusMessage");

    };

    function activated(e) {

        WinJS.Utilities.query("#featureLabel")[0].textContent = app.AppTitle;

    }

 

    WinJS.Application.addEventListener("activated", activated, false);

    WinJS.Namespace.define("app", {

        pageOutput: pageOutput

    });

})(); 

Output:

scrooling-in-windows-store-apps1.jpg

Summary

In this app I described panning and scrolling an image in a Windows Store app using JavaScript. I hope this article has helped you to understand this topic. Please share if you know more about this. Your feedback and constructive contributions are welcome.

Up Next
    Ebook Download
    View all
    Learn
    View all