WinJS.UI.ListView horizontal

Question

Имейте несколько элементов и хотите отображать их по горизонтали, и их нужно обернуть на следующую строку, когда вам не хватает места.

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

Теперь я не знаю, как сделать это «горизонтальным», но я знаю, что вы должны быть в состоянии сделать это, как есть свойство на ListView, который возвращает логическое значение, если список находится в горизонтальном положении здесь http://msdn.microsoft.com/en-us/library/windows/apps/br211788.aspx. У меня все в порядке с помощью GridView, но даже это отображает элементы по вертикали в первую очередь.

Answer 1

Выяснил это. Ответ here. Укажите собственную высоту для элемента управления ListView и увеличьте его ширину. Убедитесь, что он достаточно высок, чтобы удерживать только один элемент, а следующий элемент будет сброшен справа. В моем случае у меня есть фиксированное количество элементов и будет работать нормально. Это может не работать для переменного количества элементов.

Просто добавьте следующий класс в свой html и укажите ширину и высоту. Все ListViews на вашей странице стилизованы с использованием этого класса.

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

Answer 2

ListView всегда будет размещать элементы контента по вертикали. Даже при использовании GridLayout элементы заполняют каждый столбец поочередно.

Определяется горизонтальное свойство, но если вы посмотрите на исходный код в файле ui.js, вы увидите, что он является жестко закодированным для GridLayout и false для ListLayout.