1

Metro アプリの開発に Windows 8 と Visual Studio 2012 RC を使用しています。

ここでは、3 つのリストビュー ( groupedItemsGridApplication )を作成するためのテンプレートを使用しています。これらの 3 つのリストビューは、サービスから異なる情報を表示する必要があります。実際、デフォルトのグリッドアプリケーションでは、すべてのリストビューに共通のアイテムを指定していますが、ここでは2番目のリストビューの画像を表示したくありません.javascriptファイルの背景画像変数を削除すると、空の画像シンボルのように表示されます(スクリーンショットを参照)

以下に、アプリケーションのシナリオを示します。

誰かが私の出力を得るのを手伝ってくれますか?

ありがとうございました。 スクリーンショット

4

2 に答える 2

1

テンプレートをHTMLで変更する必要があります

<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
    <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
    <div class="item-overlay">
        <h4 class="item-title" data-win-bind="textContent: title"></h4>
        <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
    </div>
</div>

<div class="itemtemplatenoimage" data-win-control="WinJS.Binding.Template">
<div class="item-overlay">
        <h4 class="item-title" data-win-bind="textContent: title"></h4>
        <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
    </div>
</div>

次に、itemtemplateを指定する場合は常に、それぞれに異なるものを指定します

firstListView.itemTemplate = element.querySelector(".itemtemplate");
secondListView.itemTemplate = element.querySelector(".itemtemplatenoimage");
于 2012-06-16T00:38:10.663 に答える
0

アイテムの「グループ」プロパティをチェックすることで、Javascript でアイテムを動的に作成し、ListView各アイテムに異なる CSS を適用できます。ListView

function listViewItemTemplate(item) {
    // data has has information about each item
    var data = item.data._value;

    var itemElement = document.createElement('div');
    itemElement.id = 'testElement';

    if (data.group === "group1") {
        itemElement.class = "cssForGroup1"; 
        var image = document.createElement('image');
        image.src = "you_file_path";
        image.css = "imageCssForGroup1";
        itemElement.append(image);
    } else if (data.group === "group2") {
        itemElement.class = "cssForGroup2";
    }
    ...
    else {
        ...
    }

    return {element: itemElement}
}

...
// Then you can assign the template to your listview
youListViewControl.itemTemplate = listViewItemTemplate;
于 2012-12-12T07:32:16.670 に答える