Question

我正在使用HTML5 / CSS / JS为Windows 8开发一个metro风格的应用程序

我正在尝试在分组列表视图中显示不同大小的项目。（就像所有地铁风格的应用程序一样...）我在互联网上发现我需要将GridLayout放到我的列表中查看并实现groupInfo。它成功修改了第一个项目（第一个项目内的图片比其他项目大），但随后所有项目都具有第一个项目的大小。我想要这样的东西：

这就是我所做的：

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;
        })
    },

html部分是：

      <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;
     }

感谢您的帮助。

Answer 1

在Release Preview（以及RTM）中，groupInfo函数中的属性名称已更改：

multiSize - ＆gt; enableCellSpanning
slotWidth - ＆gt; cellWidth
slotHeight - ＆gt; cellHeight

试一试，看看你是否能获得更好的效果。如果您没有以这种方式宣布单元格跨越，那么GridLayout将第一项的大小视为所有项目的大小。

我ebook from Microsoft Press的第5章（即将推出的RTM预览版）将涵盖所有细节。

.Kraig

Metro风格应用程序中listView中的不同项目大小

1 个答案: