Embedding a Panning Element in WIndows Store Apps


In this article I describe how to create a Windows Store App for embedding a panning element into a horizontal panning element using JavaScript. In my previous article I described Panning and Scrolling in a Windows Store app; that for visit, Panning and Scrolling in Windows Store Apps using Java Script.

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
one HTML page by right-clicking on the name of your project in the Solution Explorer and select Add > new item > HTML Page and then give an appropriate name. In the same way, add images to the images folder in your project.


Write the following code in default.html:

<!DOCTYPE html>



    <meta charset="utf-8" />


    <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>


<body role="application" style="background-color: lightcoral">

    <center><div id="rootGrid">

       <div id="content">

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

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





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();


        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);



Write the following code in page.html:

<!DOCTYPE html>




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

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



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


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

        <div class="ManipulationContainer Horizontal MandatorySnapInterval">

            <div class="Image_Row">

                <div class="ManipulationContainer zoomElement ProximitySnapList scrollChaining row1 col1">

                    <img alt="1" src="/images/1.jpg" />


                <div class="ManipulationContainer zoomElement ProximitySnapList scrollChaining row1 col2">

                    <img alt="2" src="/images/2.jpg" />











In this app I described embedding a panning element into a horizontal panning element  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.


Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now