What is groupInfo use for? RRS feed

  • Question

  • There are several examples in the samples for ListView that use groupInfo but when I check the documentation at http://msdn.microsoft.com/en-us/library/windows/apps/hh758349.aspx it says that this is for internal use only...  Why are they in the sample if they are for internal use only?  And more importantly what is it used for?  How about itemInfo?


    Sunday, May 27, 2012 12:05 AM


  • 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 :)

    Sunday, May 27, 2012 1:55 AM