I think you're referring to the Listview item templating sample (http://code.msdn.microsoft.com/windowsapps/ListView-item-templates-7d74826f). In that case the groupInfo
is a property that you provide for the ListView's layout property for GridLayout (that is, layout: {type: WinJS.UI.GridLayout, groupInfo: <groupInfo>}. This is used to tell the ListView that you want to use "cell spanning" to create variable-sized items
in the ListView, as the sample demonstrates.
The value of groupInfo names a function that returns an object with three properties. In Consumer Preview those are multiSize, slotWidth, and slotHeight (the names will be changing in the next release, mind you). The first you set to true to tell the GridLayout
that you want to do cell spanning. The other two indicate your cell size, which you should make as coarse as possible for best performance (1px x 1px would torture perf!). Ideally all items should be a multiple of that cell size.
The sample, in Scenario 4, uses a rendering function instead of a declarative template for the items. In that function, it simply sets a CSS class on each item, where the width and height in those classes determine the item size. That's really all there
is to it. Notice that the cell size returned in groupInfo of 310x80 matches the smallest item size, which is 300x70 with all-around 5px padding (from the app's CSS). The other sizes need to then satisfy this formula:
itemSize = ((cellSize + margin) x multiplier) – margin
Where cellSize is what's in your function. The formula just says that each cell is a multiple of the base cell size, except that the outer margins are only included once (that's the -margin at the end). At least I think that's how it works...still researching
this one.
Scenario5 in the sample does the same thing using groupInfo, but just uses a declarative template where the className (as set in Scenario 4's rendering function) is bound to the type in the item data, which happens to contain the classname to use.
The result is the same.
As for the itemInfo property, I'm told that you can do column breaking with this, that is, the GridLayout will do its usual top-to-bottom then left-to-right layout, but will try to infill smaller items where there are gaps. Having an itemInfo function that
returns an object with a breakColumn property supposedly forces a new column, leaving holes in the previous column as they are. I haven't tried this yet, but that's what I know about it.
Hopefully this is the last time I edit this response tonight :)
