MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

Using the first item’s dimension like this underscores the fact that a ListView with cell spanning will
take more time to render because it must measure each item as it gets laid out, with or without the
itemInfo function. For this reason, cell spanning is probably best avoided for large lists.
Where all this gets a little more interesting, which the sample doesn’t show, is how the GridLayout
deals with items that vary in width. Its basic algorithm is still to lay out columns from top to bottom and
then left to right, but it will now infill empty spaces next to smaller items when larger ones create those
gaps. To demonstrate this, let’s modify the sample so that the smallest item is 155x80 (half the original
size), the medium item is 310x80, and the large item is 310x160. Here are the changes to make that
happen:
1. Undo any changes from the previous tests: in html/scenario4.html, add groupInfo back to
data-win-options, and in js/data.js, change the class in the first item of myCellSpanningData
back to smallListIconTextItem.
2. In js/data.js, change the cellWidth in groupInfo to 155 (half of 310) and leave cellHeight at 80.
For clarity, also insert an incrementing number at the start of each item’s text in
myCellSpanningData array.
3. In css/scenario4.css:
a. Change the width of smallListIconTextItem to 145px. Applying the formula, ((145+10) * 1)
– 10 = 145. Height is 70px.
b. Change the width of mediumlListIconTextItem to 310px and the height to 70px.
c. Change the width of largelListIconTextItem to 310px and the height to 160px. Applying
the formula to the height, ((80+10) *2 ) – 10 = 170px.
d. Set the width style in the #listview rule to 800px and the height to 600px (to make more
space in which to see the layout).
I recommend making these changes in Blend where your edits are reflected more immediately than
running the app from Visual Studio. In any case, the results are shown in Figure 5-10 where the numbers
show us the order in which the items are laid out (and apologies for clipping the text…experiments must
make sacrifices at times!). A copy of the sample with these modifications is provided in the companion
content for this chapter.
221