locked
How can I make my app scroll horizontally like the MS weather app for example

    Question

  • I tried something like this, doesn't seem to work.

     

    #contenthost

    {

    height: 100%;

    width: 200%;

    overflow: auto;

    -ms-overflow-style: auto;

    -ms-scroll-translation: vertical-to-horizontal;

    }

    Thursday, September 06, 2012 8:23 PM

Answers

  • Weather app uses the ListView control which scrolls for you.

    You can search the samples for the HTML ListView control and documentation for ListView to see some quickstarts and other information on how to use this.

    -Jeff


    Jeff Sanders (MSFT)

    Friday, September 07, 2012 1:53 PM
    Moderator

All replies

  • Weather app uses the ListView control which scrolls for you.

    You can search the samples for the HTML ListView control and documentation for ListView to see some quickstarts and other information on how to use this.

    -Jeff


    Jeff Sanders (MSFT)

    Friday, September 07, 2012 1:53 PM
    Moderator
  • so each fragment is a list view item

    now I get the idea. Thanks.

    Friday, September 07, 2012 4:23 PM
  • Hi.

    So each screen element / fragment / section? How does the itemtemplate work then? Does the Finance app use the ListView as well?

    Also there is an example of this type of spanning (the only example I can find btw and only for HTML5/JavaScript) that doesn't use this ListView technic, The Stocks End-to-End Example . It used a grid to layout the different sections of the app and puts the ListView and other elements in.  Of course, it stopped being able to run when RTM came out.

    Did this stop working this way after RC and you HAVE to go with a Listview?

    Regards,

    Christine

    Friday, September 21, 2012 5:47 PM
  • The other question I have is if the Weather and Finance apps are based on a Listview to do the spanning (viewport) and you can't have ListViews or Flipviews within an existing ListView, then how are the Watchlist (finance App) and Hourly Temps (weather apps) created? They look list ListView controls.

    Thanks!

    Christine

    Tuesday, September 25, 2012 1:44 AM
  • I would assume the Watchlist and Hourly temps are listview within the (grouped) items of the hub page (which is a listview itself). Although I read that you should not combine horizontal scrolling and vertical scrolling in the UX docs I see MSFT apps constantly breaking these and many other rules WinStore apps should follow. Which is of course confusing for us developers to have a guideline that seems to make sense most of the time, yet MSFT itself is not using it.
    Kind of reminds me of the introduction of the .net framework and till this day the only MS program that has been developed in C# is VisualStudio. And it has not gotten better over the years... but I'm being carried away ;)
    Friday, September 28, 2012 1:37 PM
  • Phil.

    Even if it is grouped, it is still a listview. And since you can't have listviews inside of listviews (see my other post that says that), then it can't be a listview (if indeed it is a listview).  Looking at it, it looks like the apps are loading some page fragments programmatically. Not the most clean solution, imo, but both are highly localized for different demographic support.  I'm hoping that localization can be achieved without such a mishmash of stuff.  I've been noodling with the idea of loading different info/sections based on settings options.  In that case, I think I will have to use something like the page fragment loading with code option. Maybe version 3 or 4. ;-)

    BTW, I have been able to achieve the spanning effect using ms-grid for the different sections.  Take a look at the Stock End-to-End Sample app.  And I was able to create a similar vertical list using the listview with the layout: {type:WinJS.UI.ListLayout} data-win-options setting. A good example of this is the Split app on the items page. 

    Christine

    Friday, September 28, 2012 2:31 PM
  • hi, ...haven't seen these posts. 

    Listview can works inside a listview, see this answer http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/244580b1-303b-47cd-9356-e3cb70424a89

    I guess Microsoft uses complex custom listview controls for horizontal scrolling.

    I use a template function to create a listview with container divs with ids, then load different fragments in to those div containers. List view in those fragments work fine for me.

      

     

    Wednesday, October 10, 2012 3:08 PM
  • Would you mind sharing your template function?
    Wednesday, October 10, 2012 3:55 PM
  • Would you mind sharing your template function that creates the listview?
    Wednesday, October 10, 2012 3:56 PM
  • here it is

    function init_mainlv() {
        var ch = document.getElementById("contenthost");
        var lvroots = [];       //containers
        lvroots[0] = {
            id: "frag1",
            width: "80%",
            height: "100%"
        }
        lvroots[1] = {
            id: "frag2",
            width: "70%",
            height: "100%"
        }
        lvroots[2] = {
            id: "frag3",
            width: "70%",
            height: "100%"
        }
        var mainlv = document.getElementById("mainlv").winControl;
        var itemList = new WinJS.Binding.List(lvroots);
        mainlv.itemDataSource = itemList.dataSource;
        mainlv.itemTemplate = mainlvTemplate;
        mainlv.addEventListener("loadingstatechanged", init_fragcontainers);
    }
    function init_fragcontainers(evt) {
        var mainlv = evt.target.winControl;
        if (mainlv.loadingState == "complete") {  // the loading state keeps changing often, so remove the listener once complete
            console.log("loadingState = complete");
            mainlv.removeEventListener("loadingstatechanged", init_fragcontainers);
            loadFragments();
        }
    }
    function mainlvTemplate(itemPromise) {
        return itemPromise.then(function (item) {
            var div = document.createElement("div");
            div.id = item.data.id;
            div.style.width = ((parseInt(item.data.width, 10) / 100) * document.getElementById("contenthost").clientWidth).toString() + "px";
            return div;
        });
    }
    function loadFragments() {
        WinJS.UI.Fragments.renderCopy("/html/frag1.html", document.getElementById("frag1")).done(function (fragment) {
            EntryFrag.fragmentLoad(fragment);
        });
        WinJS.UI.Fragments.renderCopy("/html/frag2.html", document.getElementById("frag2")).done(function (fragment) {
            ChartFrag1.fragmentLoad(fragment);
        });
        WinJS.UI.Fragments.renderCopy("/html/frag3.html", document.getElementById("frag3")).done(function (fragment) {
            BMIChartFrag.fragmentLoad(fragment);
        });
    }

    Wednesday, October 10, 2012 8:00 PM
  • Thanks! Very helpful. Will try it out later
    Thursday, October 11, 2012 8:30 AM