1

HTML と JavaScript を使用して Windows 8 Metro アプリに取り組んでいますが、画面のスケーリングに問題がありました。

現在、1366x768 用のアプリケーションを設計しています。通常、ページには ListView があり、この解像度の簡単なスケッチを見ることができます。 1366x768

しかし、解像度が上がると、たとえば 2560x1440 の解像度の場合、ListView は下の画像のようになります。 2560x1440

ご覧のとおり、これは非常に醜いようです。実際、高解像度のために何をすべきかわかりません。

最初に考えたのは、同じ ListView を画面の中央に 1366x768 の解像度で保持することです。しかし、私はこれを行う方法を見つけることができませんでした。

4

1 に答える 1

0

レイアウトを管理するためにできることがいくつかあります。ListView1 つ目は、次のように、グリッド レイアウトに表示される行の最大数を設定することです。

list.winControl.layout.maxRows = 2;

十分な数のアイテムがある場合、幅は広く浅いレイアウトを作成する効果があります。

質問で言及した他のオプションは、ListViewを中央に配置してそのサイズを修正することです。これを行う最も簡単な方法は、CSS フレックス ボックス レイアウトを使用することです。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 を使用して (おそらく新しいグリッド レイアウトを使用して)、アイテムの表示方法をより詳細に制御することができます。

于 2012-09-20T10:48:45.073 に答える