WinJS.UI.ListView horizontal

问题

Have a few items and want to display them horizontally and need them to wrap to next line when not enough space.

<div class="historyItem">
    <div id="testTemplate" data-win-control="WinJS.Binding.Template" style="display:none">
        <div class="itemTemp">
            <h6  data-win-bind="innerText: desc"></h6>
        </div>
    </div>
</div>
<div id="listViewForecast"
    data-win-control="WinJS.UI.ListView"
    data-win-options="{itemTemplate:testTemplate, selectionMode: 'none', tapBehavior: 'none', swipeBehavior:'none',  layout: {groupInfo: groupInfo, type: WinJS.UI.GridLayout}}"
    >
</div>

Now I'm not sure how to make it 'horizontal' but I know you should be able to do it as there is a property on ListView that returns a boolean if the list is horizontal here http://msdn.microsoft.com/en-us/library/windows/apps/br211788.aspx. I'm OK with using a GridView too but even that is displaying items vertically first.

回答1:

The ListView will always lay out the content items vertically. Even when using a GridLayout, the items fill each column in turn.

There is a horizontal property defined, but if you look at the source code in ui.js you will see that it is hard coded to be true for GridLayout and false for ListLayout.

回答2:

Figured it out. Answer is here. Specify your own height for the ListView control and make it wider. Make sure it is only high enough to hold only one item and the next item will be thrown on the right. In my case, I have fixed number of items and will work fine. This may not work for variable number of items.

Just add the following class to your html and specify your width and height. All ListViews in your page are styled using this class.

.win-listview 
{
    height: 500px; 
    width: 500px; 
    border: 2px solid gray;
}

来源：https://stackoverflow.com/questions/10768503/winjs-ui-listview-horizontal