MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

function itemInfo(itemIndex) {
//determine values for itemWidth and itemHeight given itemIndex
return {
newColumn: false,
itemWidth: itemWidth,
itemHeight: itemHeight
};
}
Clearly, this function will be called for every item in the list but only if cell spanning has been turned
on through the groupInfo function. Again, unless your list is relatively small, you’ll very much improve
performance by providing item dimensions through this function, but be sure to return as quickly as
you can.
You probably also noticed that newColumn property in the return value. As you might guess, setting
this to true instructs the GridLayout to start a new column with this item, allowing you to control that
particular behavior. You can even use newColumn by itself, if you like, with a smallish list.
Now you might be asking: what happens if I set different sizes in my item template but don’t actually
announce cell spanning? Well, you’ll end up with overlapping (and rather confusing) items. This is
because the GridLayout takes the first item in a group as the basic measure for the rest of the items (and
the backdrop grid as well). It does not attempt to automatically size each item according to content. Try
this with Scenarios 4 or 5: remove the layout.groupInfo property from the ListView’s data-winoptions
in html/scenario4.html or html/scenario5.html and restart the app, and you’ll see the medium and large
items bleeding into those that follow:
Then go into js/data.js, set the first item’s style in the myCellSpanningData array to be
largeListIconTextItem, and restart; the ListView then does layout with that as the basic item size:
220