Высокое разрешение и ListView в приложении Windows 8 Metro

Я работаю над приложением Metro для Windows 8 с HTML и JavaScript, но столкнулся с проблемой масштабирования экрана.

В настоящее время я разрабатываю приложение для 1366x768. Обычно на страницах присутствует ListView, можно посмотреть простенький скетч для этого разрешения. 1366x768

Но при увеличении разрешения, например, для разрешения 2560x1440, ListView выглядит как изображение ниже. 2560x1440

Как видите, это выглядит очень некрасиво. На самом деле я не уверен, что я должен делать для высоких разрешений.

Первым делом я подумал сохранить тот же ListView с разрешением 1366x768 посередине экрана. Но я не мог найти способ сделать это.


listview microsoft-metro windows-runtime winjs windows-8
person bahadir arslan    schedule 20.09.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Есть несколько вещей, которые вы можете сделать, чтобы управлять макетом. Во-первых, установить максимальное количество строк, которые ListView будет отображать в макете сетки, например так:

list.winControl.layout.maxRows = 2;

Если у вас достаточно элементов, то это создаст широкий, но неглубокий макет.

Другой вариант, который вы упомянули в своем вопросе, - центрировать ListView и исправить его размер. Я считаю, что самый простой способ сделать это — использовать макет CSS flex box. Вот небольшой самостоятельный пример, который показывает вам как настройку maxRows, так и CSS, который применяется к элементу, содержащему ListView (а не к самому ListView). Создайте новый проект VS, скопируйте разметку в файл default.html и запустите приложение, и вы сможете увидеть эффект:

<!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 (возможно, используя новый макет сетки), чтобы получить больше контроля над тем, как они отображаются.

person Adam Freeman    schedule 20.09.2012
comment
Спасибо за Ваш ответ. После того, как я спросил об этом, я установил для свойства высоты внешний элемент ListView размером 768 пикселей, и это помогло мне. Но сначала я искал свойство maxRows, но не смог найти. Так что и на этом спасибо ;) - person bahadir arslan; 20.09.2012