レイアウトを管理するためにできることがいくつかあります。ListView
1 つ目は、次のように、グリッド レイアウトに表示される行の最大数を設定することです。
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 を使用して (おそらく新しいグリッド レイアウトを使用して)、アイテムの表示方法をより詳細に制御することができます。