5

我有一个 WinJs Metro 应用程序，其中包含一个ListView高度可变的项目。它基本上与“HTML ListView 项目模板”示例中的场景 4 中的方式相同。一个groupInfo函数用于启用GridLayout与 ListView 关联的单元格跨越：

网格布局中的项目

现在在我的应用程序的快照视图中，我希望项目垂直滚动，所以我尝试GridLayout用ListLayout. 这会导致垂直滚动，但现在缺少单元格跨度并且项目重叠：

列表布局中的项目

我以groupInfo与 相同的方式使用该函数GridLayout，但它似乎被忽略了：

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

有没有办法在 a 中使用可变大小的项目ListLayout？我的一些项目比其他项目有更多的内容，我真的很想使用不同大小的图块以最佳方式显示所有内容。

4

2 回答 2

0

旧帖

是的，您当然可以自定义所有内容。我认为您的渲染问题来自这个您可能已经忘记的forceLayout.

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

我的 Windows 8 离我很近，所以如果没有其他人回复并且问题不是来自forceLayout我将在晚上更新回复。

我希望这会有所帮助。

好的，所以我之前误解了你的问题。

这里有一些应该让你满意的东西。

问题是您必须在 JavaScript 和 CSS 文件中管理应用程序的不同视图状态。

因此，关于 JavaScript，我使用了两个可以在 Grid Application 模板中找到的函数。所以我修改了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 });
                }
            }
        }
    });
})();

然后我删除了layoutscenario4.html中listview的整个属性，因为我在scenario4.js中创建了上面的布局

因此，您的列表视图根据视图状态使用不同的布局，但您将获得与以前相同的结果（顺便说一句，您必须在处于捕捉模式时更改场景才能看到结果）。

所以我们只需要根据视图状态更新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 回答
0

我的一般想法是在快照视图中切换模板以避免使用 MyCellSpanningJSTemplate 来调整项目模板的大小。你可以试试这个。

1）创建第二个项目模板：

    <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 回答