Windows 8 Metro App 中的高分辨率和 ListView答案

【问题标题】：High Resolution And ListView At Windows 8 Metro AppWindows 8 Metro App 中的高分辨率和 ListView
【发布时间】：2012-09-20 07:45:45
【问题描述】：

我正在使用 HTML 和 JavaScript 开发 Windows 8 Metro 应用程序，但我遇到了屏幕缩放问题。

目前我正在为 1366x768 设计应用程序。通常页面上有一个ListView，你可以看到这个分辨率的简单草图。

但是当分辨率增加时，例如 2560x1440 分辨率的 ListView 看起来像下图。

如您所见，这看起来很丑陋。实际上我不确定我应该为高分辨率做些什么。

我想的第一件事是在屏幕中间以 1366x768 分辨率保留相同的 ListView。但我找不到这样做的方法。

【问题讨论】：

标签： listview windows-8 microsoft-metro windows-runtime winjs

【解决方案1】：

您可以做一些事情来管理布局。首先是设置ListView在其网格布局中显示的最大行数，如下所示：

list.winControl.layout.maxRows = 2;

如果您有足够的项目，那么这将产生创建宽而浅的布局的效果。

您在问题中提到的另一个选项是将 ListView 居中并固定其大小。我发现最简单的方法是使用 CSS flex box 布局。这是一个独立的小示例，它向您展示了 maxRows 设置和 CSS，它应用于包含 ListView 的元素（而不是 ListView 本身）。新建一个VS项目，将标记复制到default.html文件中，启动app就可以看到效果了：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    <style type="text/css">
        #container {
            display: -ms-flexbox;
            -ms-flex-align: center;
            -ms-flex-pack: center;
            height: 100%;
        }
        #list {
            width: 1366px; height: 768px;
        }
        .templateItem {
            width: 200px; height: 200px; font-size: 30pt;
            margin: 10px; border: thick solid white; background-color: gray;
        }
    </style>
    <script>
        WinJS.Application.onactivated = function (args) {
            data = new WinJS.Binding.List();
            WinJS.UI.processAll().then(function () {
                for (var i = 0; i < 8; i++) {
                    data.push({ value: i });
                }
                list.winControl.layout.maxRows = 2;
            });
        }
        WinJS.Application.start();
    </script>
</head>
<body>
    <div id="template" data-win-control="WinJS.Binding.Template">
        <div class="templateItem" data-win-bind="innerText: value"></div>
    </div>
    <div id="container">
        <div id="list" data-win-control="WinJS.UI.ListView" data-win-options="{
            itemDataSource: data.dataSource,
            itemTemplate:template}">
        </div>
    </div>
</body>
</html>

很难从您的问题中看出，但您也可以考虑删除 ListView 并使用其他内容。如果要显示的项目数量固定，您可能希望使用标准 HTML 元素并使用 CSS（可能使用新的网格布局）来更好地控制它们的显示方式。

【讨论】：

感谢您的回答。在我问它之后，我将高度属性设置为 ListView 的 768px 外部 div，它帮助了我。但首先我寻找 maxRows 属性，但我找不到。所以也谢谢你；）