Javascript winJS ListView中每个组的不同布局

我想知道在windows 8 Metro风格的应用程序中，是否可以在分组列表视图中为每个组使用不同的布局

如果是，如何进行

---

提前谢谢。

当然，但不是你想要的

分组的ListView使用相同的项模板，除非您进行一些动态模板交换（这是可能的），但我不建议使用模板交换来交换整个组。对于混合在一起的不同类型的项目使用不同的模板，交换更好

---

我的建议是，在ViewModel级别，将分组列表拆分为不同的列表，并为每个列表构建完全不同的ListView。听起来，您正在谈论一个包含部分的中心页面，并试图使其具有良好的风格，如果是这种情况，您可能希望签出非对称列表视图，或者只是使用网格并手动填充它。

我建议您查看HTML列表视图项模板示例中的场景4：

该场景演示了如何以编程方式创建模板，从而使您能够更好地控制输出

在分组项场景中，可以检查currentItem.group.key以确定要处理的组，并为每个组提供不同的呈现

缺点是，根据您需要的不同布局的数量，代码可能会有所涉及（尽管如果您通过将每个“组模板”分解为自己的函数来考虑其可重用性，这可能会有所帮助）。但是，您应该能够通过在代码中构建模板来完成您想要的任务

需要记住的一点是，如果希望ListView中的项目大小不同，则需要为ListView控件提供groupInfo，如下所示：

<div id="listView" 
    data-win-control="WinJS.UI.ListView" 
    data-win-options="{ 
        itemDataSource: myCellSpanningData.dataSource, 
        itemTemplate: MyCellSpanningJSTemplate, 
        ...
        layout: { 
            groupInfo: { 
                enableCellSpanning: true, 
                cellWidth: 310, 
                cellHeight: 80 
            },
            type: WinJS.UI.GridLayout 
        } 
    }"
></div>

leaderListView.winControl.layout = new WinJS.UI.GridLayout({
    groupInfo: {
        enableCellSpanning: true,
        cellWidth: 200,
        cellHeight: 200
    }
});

---

需要注意的是，平铺只能是单元宽度和单元高度的倍数，所以在规划布局时，要考虑到这一点。

是的，这是可能的，请查看文档

---

是的。我也很想知道这个。但我不知道如何水平布置它们。我可以用绝对位置来定位列表，但我不知道这是否是一个干净的解决方案。@Jeremy Foster你能详细说明一下吗？也许有一些代码示例。这是一种非常常见的情况，我认为windows 8中的许多应用程序都使用非同质列表，例如Bing Food（葡萄酒和食谱一起）或Bing Health and fitness。@Maurizio在丹麦，我以前推荐的方式现在已被windows 8.1淘汰。现在最好的方法是使用Hub控件。集线器控制使得像Bing应用一样部署应用程序非常容易。与其我重新创建它，不如从下载MSDN示例，它应该是清晰的。@Jeremy Foster谢谢，我猜是这样的。我已经开始构建我的hub应用程序了。8.1太棒了。：）