Question

I am developping a metro style application for Windows 8 using HTML5/CSS/JS

I’m trying to display items with different size in a grouped List View. (like all metro style apps do…) I found on the internet that I need to put a GridLayout to my list View and implement the groupInfo. It succeeds in modifying the first item (the picture inside the first item is bigger than the other items), but then all the items have the size of the first item. I would like something like this instead :

Here is what I have done :

updateLayout: function (element, viewState, lastViewState) {

        //I get my listView winControl defined in HTML
        var listView = element.querySelector(".blocksList").winControl;

        var globalList = new WinJS.Binding.List(globalArray);
        var groupDataSource = globalList.createGrouped(this.groupKeySelector,
                    this.groupDataSelector, this.groupCompare);

       // I set the options of my listView (the source for the items and the groups +  the grid Layout )
        ui.setOptions(listView, {
            itemDataSource: groupDataSource.dataSource,
            groupDataSource: groupDataSource.groups.dataSource,
            layout: new ui.GridLayout({
                groupHeaderPosition: "top",
                groupInfo: function () {
                    return {
                        multiSize: true,
                        slotWidth: Math.round(480),
                        slotHeight: Math.round(680)
                    };
                }
            }),
            itemTemplate: this.itemRenderer,
             });
    },

    // je définis le template pour mes items
    itemRenderer: function (itemPromise) {
        return itemPromise.then(function (currentItem, recycled) {
            var template = document.querySelector(".itemTemplate").winControl.renderItem(itemPromise, recycled);
            template.renderComplete = template.renderComplete.then(function (elem) {

                //if it is the first item I put it widder
                if (currentItem.data.index == 0) {
                  //  elem.querySelector(".item-container").style.width = (480) + "px";
                    elem.style.width = (2*480) + "px";

                }

              });
            return template.element;
        })
    },

the html part is :

      <section aria-label="Main content" role="main">
      <div class="blocksList" aria-label="List of blocks" data-win-control="WinJS.UI.ListView"
data-win-options="{itemTemplate:select('.itemTemplate'), groupHeaderTemplate:select('.headerTemplate')
                   , selectionMode:'none', swipeBehavior:'none', tapBehavior:'invoke'}">
       </div>
       </section> 


            <!--Templates-->
<div class="headerTemplate" data-win-control="WinJS.Binding.Template">
    <div class="header-title" data-win-bind="innerText: categorieName"/>
</div>

<div class="itemTemplate" data-win-control="WinJS.Binding.Template">
            <div class="item-container" >
                 <div class="item-image-container">
                   <img class="item-image" data-win-bind="src: urlImage" src="#" />
                 </div>
            <div class="item-overlay">
                 <h4 class="item-title" data-win-bind="textContent: title"></h4>
            </div>
         </div>
</div>

et le css

   .newHomePage p {
margin-left: 120px;
 }

 .newHomePage .blocksList {
      -ms-grid-row: 2;
  }

      .newHomePage .blocksList .win-horizontal.win-viewport .win-surface {
         margin-left: 120px;
         margin-bottom: 60px;
     }

    .newHomePage .blocksList .item-container {
    height: 340px;
    width: 240px;
    color: white;
    background-color: red;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr;
    display: -ms-grid;
    }


    .newHomePage .blocksList .win-item {
       /*-ms-grid-columns: 1fr;
      -ms-grid-rows: 1fr 30px;
      display: -ms-grid;*/
       height: 130px;
      width: 240px;
      background: white;
      outline: rgba(0, 0, 0, 0.8) solid 2px;
     }

Thank you for your help.

Answer 1

In Release Preview (and also RTM), the property names in the groupInfo function changed:

• multiSize -> enableCellSpanning
• slotWidth -> cellWidth
• slotHeight -> cellHeight

Try that and see if you get better results. If you don’t announce cell spanning in this way, then the GridLayout takes the first item’s size as that for all the items.

Chapter 5 of my ebook from Microsoft Press (RTM preview coming soon) will cover all the details of this.

.Kraig