One Row, Multiple Column WinJS Layout - windows-runtime

Question

I'm new to WinJS development and can't find any good examples of a layout similar to the following:
Ideally, each item would be percentage based so that I can have a layout with 3 or 4 "columns". Can anyone point me in the right direction? Thanks!

Answer 1

If you're going for rich functionality like selection, grouping, sorting, etc. then use the solution #Louis_PIG answered with. If you need very basic horizontal layout like that, then use disply:-ms-flexbox CSS display property. If you create a div and set that, then all of its children will be laid out horizontally. Then you have all kinds of control over the children and their size and position. You can set their relative widths, distribute them equally, stretch them, and more. See this for lots of info on flexboxes.
Here's a sample flexbox...
<!-- HTML snippet -->
<div class="flex">
<div></div>
<div></div>
<div></div>
</div
/* CSS snippet */
.flex {
display: -ms-flexbox;
}

Answer 2

You are probably looking for GridLayout.maxRow property.
<!-- This doesn't work, see NOTE below -->
<div data-win-control="WinJS.UI.ListView"
data-win-options="{layout: {type: WinJS.UI.GridLayout, maxRows: value}}">
</div>
Reference: http://msdn.microsoft.com/en-us/library/windows/apps/br211750.aspx
NOTE: the above snippet doesn't work, but the updated Javascript code should work for the same purpose.
Assuming that you are trying there will be more items to display, but you just want the viewport to hold only 3 or 4 items depends on the width of the screen. Then you can use CSS Media Query to apply different styles to different screen width. Or, you can calculate the size of the item according to the screen size at run time and update the ListView.itemTempalte. Can you please provide more info on what exactly you are looking for?
In my own opinion though, the WinJS.UI.ListView control introduces a "panorama" view, which usually intentionally left some indication that "there is more to scroll". So, displaying a "fixed" number of items in the ListView may not be the preferable because the user may not be aware of the existence of more items outside of the viewport.
UPDATE:
As #rattrick1 pointed out, the above HTML snippet doesn't work even though it is the same code as the one on MSDN. I modified the code in the default application created by Visual Studio and it still displayed 2 rows. If someone can point out what is wrong with the above, that would be great!
So I tried to set the property in Javascript and it works for me:
In App1\pages\groupedItems\groupedItems.js
_initializeLayout: function (listView, viewState) {
listView.itemDataSource = Data.items.dataSource;
listView.groupDataSource = Data.groups.dataSource;
listView.layout = new ui.GridLayout();
// limit the List View to display only 1 row
listView.layout.maxRows = 1;
}
Please let me know if this doesn't work.