winJS中的每個組的不同佈局ListView

Question

我想知道是否可以在Windows 8 Metro Style應用程序的分組ListView中爲每個組使用不同的佈局？

如果是，如何？

在此先感謝。

Answer 1

當然，但不是你想要的。

一個分組ListView使用相同的項目模板，除非你做了一些動態模板交換，這是可能的，但我不會推薦使用模板交換來交換出整個組。交換對使用不同類型的項目使用不同的模板更好，因爲它們都混合在一起。

我的建議是，在您的ViewModel級別，您可以將分組列表拆分爲不同的列表，併爲每個列表構建完全不同的ListView。這聽起來像是你正在討論一個帶有部分的集線器頁面，並試圖讓它們看起來很好，如果是這樣的話，你可能想要檢查非對稱ListView或者只是使用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 
    } 
}); 

值得注意的是，瓷磚只能是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