Question

我想知道是否可以在Windows 8 Metro Style Apps中的分组ListView中为每个组使用不同的布局？

如果是，怎么样？

提前感谢。

Answer 1

当然，但不是你想要的。

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

我的建议是，在ViewModel级别，您可以将分组列表拆分为不同的列表，并为每个列表构建完全不同的ListView。听起来你正在谈论一个带有部分的中心页面，并试图让它们看起来很好看，如果是这样的话，你可能想要查看非对称ListViews，或者只是使用网格并手动填充它。 / p>

Answer 2

我建议您查看HTML ListView项目模板示例中的场景4：

http://code.msdn.microsoft.com/windowsapps/ListView-item-templates-7d74826f/view/SourceCode#content

该场景显示了如何以编程方式创建模板，从而可以更好地控制输出。

在分组项目方案中，您可以检查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
    }
});

值得注意的是，tile只能是cellWidth和cellHeight的倍数，所以当你计划布局时，请考虑到这一点。

Answer 3

是的，有可能，看一下文档

http://msdn.microsoft.com/en-us/library/windows/apps/jj244627.aspx

http://msdn.microsoft.com/en-us/library/windows/apps/jj657974.aspx

winJS ListView中每个组的不同布局

3 个答案: