0

Windows 8 の Metro Style Apps でグループ化された ListView のグループごとに異なるレイアウトを使用できるかどうかを知りたいですか?

はいの場合、どのように？

前もって感謝します。

4

3 に答える 3

1

確かに、しかしあなたが望んでいる方法ではありません。

グループ化された ListView は、動的なテンプレートの交換を行わない限り、同じアイテム テンプレートを使用しますが、これは可能ですが、テンプレートの交換を使用してグループ全体を交換することはお勧めしません。スワッピングは、さまざまな種類のアイテムにさまざまなテンプレートをすべて混ぜて使用する場合に適しています。

ViewModel レベルで、グループ化されたリストを異なるリストに分割し、それぞれに対して完全に異なる ListView を構築することをお勧めします。セクションを含むハブ ページについて話しているように聞こえますが、見栄えを良くするためにそれらをスタイル化しようとしています。その場合は、非対称の ListViews をチェックアウトするか、グリッドを使用して手動で入力することをお勧めします。

于 2012-10-01T15:00:34.240 に答える
0

HTML ListView 項目テンプレート サンプルのシナリオ 4 を参照することをお勧めします。

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

このシナリオでは、テンプレートをプログラムで作成する方法を示しています。これにより、出力をより細かく制御できます。

グループ化されたアイテムのシナリオでは、 currentItem.group.key を調べて、扱っているグループを特定し、グループごとに異なるレンダリングを提供できます。

欠点は、必要なレイアウトの数によっては、コードが多少複雑になる可能性があることです (ただし、各「グループ テンプレート」を独自の関数に分割して再利用性を考慮すると、役立つ場合があります)。ただし、テンプレートをコードで作成することで、目的を達成できるはずです。

覚えておくべきことの 1 つは、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 の倍数にしかできないことに注意してください。そのため、レイアウトを計画するときはそれを考慮してください。

于 2012-10-03T17:18:40.270 に答える