5

ListView可変高さのアイテムを含む WinJs メトロ アプリがあります。基本的には「HTML ListView項目テンプレート」サンプルのシナリオ4と同様です。groupInfo関数を使用しGridLayoutて、ListView に関連付けられた のセル スパニングを有効にします。

グリッド レイアウトのアイテム

アプリケーションのスナップ ビューで、項目を垂直方向にスクロールしたいので、 を に置き換えようとしましGridLayoutたListLayout。これにより垂直スクロールが発生しますが、セルのスパンが失われ、アイテムが重なっています。

リスト レイアウトのアイテム

groupInfoと同じように関数を使用しましたGridLayoutが、無視されているようです。

layout: { 
    groupInfo: groupInfo, 
    type: WinJS.UI.ListLayout 
}

で可変サイズのアイテムを使用する方法はありListLayoutますか? 一部のアイテムは他のアイテムよりも多くのコンテンツを含んでおり、さまざまなサイズのタイルを使用してすべてを最適に表示したいと考えています。

4

2 に答える 2

0

私の一般的な考えは、アイテム テンプレートのサイズ変更を行う MyCellSpanningJSTemplate の使用を避けるために、スナップ ビューでテンプレートを切り替えることです。これを試すことができます。

1) 2 番目の項目テンプレートを作成します。

    <div id="listLayoutItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
        <div class="regularListIconItem">
            <img src="#" class="regularListIconItem-Image" data-win-bind="src: picture" />
        </div>
    </div>

2) サイズ変更イベントをリッスンして、スナップ ビューを検出します ( http://code.msdn.microsoft.com/windowsapps/Snap-Sample-2dc21ee3を参照) 。

3) テンプレートを、手順 1 で作成したテンプレートにプログラムで変更します。

var listView = document.querySelector("#listView").winControl;
listView.itemTemplate = listLayoutItemTemplate;
于 2012-07-02T23:21:32.247 に答える
0

古いポスト

はい、確かにすべてをカスタマイズできます。あなたのレンダリングの問題は、あなたが忘れているかもしれない、forceLayout.

ready: function (element, options) { 
            element.querySelector("#listView").winControl.forceLayout(); 
        }

近くに Windows 8 がないので、他の人から返信がなく、問題の原因が問題ではない場合はforceLayout、夜までに返信を更新します。

これが助けになることを願っています。

わかりましたので、以前にあなたの問題を誤解していました。

ここにあなたを満足させるものがあります。

問題は、JavaScript ファイルと CSS ファイルの両方で、アプリケーションのさまざまなビュー ステートを管理する必要があることです。

JavaScript に関しては、たとえば Grid Application テンプレートにある 2 つの関数を使用しました。そのため、このコードを取得するために scenario4.js を変更しました。

function MyCellSpanningJSTemplate(itemPromise) {
    return itemPromise.then(function (currentItem) {
        var result = document.createElement("div");

        // Use source data to decide what size to make the
        // ListView item
        result.className = currentItem.data.type;
        result.style.overflow = "hidden";

        // Display image
        var image = document.createElement("img");
        image.className = "regularListIconTextItem-Image";
        image.src = currentItem.data.picture;
        result.appendChild(image);

        var body = document.createElement("div");
        body.className = "regularListIconTextItem-Detail";
        body.style.overflow = "hidden";
        result.appendChild(body);

        // Display title
        var title = document.createElement("h4");
        title.innerText = currentItem.data.title;
        body.appendChild(title);

        // Display text
        var fulltext = document.createElement("h6");
        fulltext.innerText = currentItem.data.text;
        body.appendChild(fulltext);

        return result;
    });
}

var appViewState = Windows.UI.ViewManagement.ApplicationViewState;
var appView = Windows.UI.ViewManagement.ApplicationView;
var ui = WinJS.UI;

(function () {
    "use strict";
    var page = WinJS.UI.Pages.define("/html/scenario4.html", {
        initializeLayout: function (listView, viewState) {
            /// <param name="listView" value="WinJS.UI.ListView.prototype" />

            if (viewState === appViewState.snapped) {
                listView.layout = new ui.ListLayout();
            } 
            else {
                listView.layout = new ui.GridLayout({ groupInfo: groupInfo });
            }
        },
        ready: function (element, options) {
            var listView = element.querySelector("#listView").winControl;
            this.initializeLayout(listView, appView.value);
        },
        updateLayout: function (element, viewState, lastViewState) {

            var listView = element.querySelector("#listView").winControl;

            if (lastViewState !== viewState) {
                if (lastViewState === appViewState.snapped || viewState === appViewState.snapped) {                   
                    this.initializeLayout(listView, viewState);
                } 
                else {
                    listView.layout = new ui.GridLayout({ groupInfo: groupInfo });
                }
            }
        }
    });
})();

layout次に、scenario4.js で上記のレイアウトを作成したため、scenario4.html のリストビューのプロパティ全体を削除しました。

したがって、リストビューはビューの状態に応じて異なるレイアウトを使用しますが、以前と同じ結果が得られます (結果を表示するには、スナップ モードでシナリオを変更する必要があります)。

そのため、ビューの状態に応じて scenario4.css を更新する必要があり、CSS 3 にはそれを可能にするメディア クエリがあります。次に、ここでのビュー ステートに応じて、snappedプロパティをオーバーライドします。以下のコードを scenario4.css に追加するだけです。

@media screen and (-ms-view-state: snapped) {
    #listView {
        max-width: 260px;
        height: 280px;
        border: solid 2px rgba(0, 0, 0, 0.13);
    }

    .regularListIconTextItem {
        max-width: 250px;
        max-height: 70px;
        padding: 5px;
        overflow: hidden;
        display: -ms-grid;
    }

    .smallListIconTextItem {
        max-width: 250px;
        max-height: 70px;
        padding: 5px;
        overflow: hidden;
        background-color: Pink;
        display: -ms-grid;
    }

    /* Medium size */
    .mediumListIconTextItem {
        max-width: 250px;
        max-height: 70px;
        padding: 5px;
        overflow: hidden;
        background-color: LightGreen;
        display: -ms-grid;
    }

    /* Large size */
    .largeListIconTextItem {
        max-width: 250px;
        max-height: 70px;
        padding: 5px;
        overflow: hidden;
        background-color: LightBlue;
        display: -ms-grid;
    }
}

今回はそれが役に立てば幸いです;）

于 2012-07-02T09:38:03.517 に答える