locked
Can you have a ListView scroll vertically? RRS feed

  • Question

  • Expecation. I want the listview to only fill the "columns" until the width is full, then have the overflow vertical. If I have 50 items, and enough width for 5, I expect 10 rows, and it scrolling vertcally. Do I need to style the win-scrollable things inside to force the way I want it to overflow.

    I also see a maxRows...why is there no maxColumns?

    Edit:

    Hope I don't complain too much about the ListView, but it seems that when it was designed it wasn't fully thought out as to it's extensibility. As to how people would use it, and how people could use it.

    • Edited by Harlequin Thursday, February 9, 2012 11:53 PM
    Thursday, February 9, 2012 11:49 PM

Answers

All replies

  • No you cannot do this with the stock ListView control.  In Metro Horizontal scrolling is emphasized.

    This is a bit of a break from Web and Windows Phone where the vertical scroll is used more.

    Here are some more forum discussions on this:

    http://social.msdn.microsoft.com/Forums/en-US/winappsuidesign/thread/b1156755-687e-4d6b-be53-e8310bff03f2

    http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/62c9deda-dd6d-426d-b2c8-db03e1c2519d

    But you are already on the 2nd discussion....

    If you want do do something different you are definately free to do so.  I would think it would be jarring to the user though to be using apps that all use the ListView control and then be engaged with a different UI experience.  Again... that is up to you as a designer!

    -Jeff


    Jeff Sanders (MSFT)

    Friday, February 10, 2012 1:26 PM
    Moderator
  • It may not have been possible to set a ListView to scroll vertically in February, but, since it is rather ridiculous to put such a limitation on scrolling, it seems that Microsoft had added this ability.  It is as simple as modifying the layout property of the listview control:
                listview.layout = new WinJS.UI.ListLayout({
                    horizontal: false
                });


    • Proposed as answer by soxley Monday, July 23, 2012 2:46 PM
    • Edited by soxley Monday, July 23, 2012 2:48 PM
    Monday, July 23, 2012 2:45 PM
  • ListLayout is specifically a single-column, vertically-scrolling layout. It won't serve to create a vertically-panning GridLayout equivalent (if you try setting horizontal=false on a GridLayout, it's ignored).

    A layout within the ListView is the object that provides the algorithm for placing the items within the ListView. ListLayout (vertical) and GridLayout (horizontal) are the only two layouts provided by WinJS. It is possible to write a custom layout object for other behaviors, but that process is unfortunately not much documented at present, something that we're working to remedy.

    Tuesday, July 24, 2012 4:34 PM