Reader Level:

Embedding a Panning Element in WIndows Store Apps

By Deepak Middha on Nov 19, 2012
In this app I described embedding a panning element into a horizontal panning element in a Windows Store app using JavaScript.


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.

Deepak Middha
Deepak Middha

Deepak Middha is one time Microsoft MVP(Client App Dev) , working as Sr. Software Developer with lots of hands on experience using ASP.NET 2.0/3.5, AJAX, MVC, C#,  SQL Server 2005/2008/2012, WCF, JQuery and Silverl... Read more



Spire.Doc - Free .NET Word API
Use Spire.Doc to create, read, write, print, and convert word documents to OpenXML, RTF, TXT, XPS, EPUB, EMF, HTML, Image and PDF.

Trending up