javascript - winJS ListView中每个组的不同布局

Question

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

如果是，如何？

提前致谢。

Answer 1

当然，但不是你想要的。

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

我的建议是，在您的 ViewModel 级别，您将分组列表拆分为不同的列表，并为每个列表构建完全不同的 ListView。听起来您正在谈论一个带有部分的中心页面，并试图让它们看起来不错，如果是这种情况，您可能想要查看不对称的 ListViews 或只使用 Grid 并手动填充它。

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