1

Windows 8 に標準で付属している Bing Travel アプリのようなレイアウトを作成する方法を探しています。Visual Studio 2012 で Javascript/CSS を使用してアプリを開発しています。

以下は簡単なモックアップです。

UIモックアップ

私を困惑させる部分は、最初に示されているアイテムです。どういうわけか、最初のアイテムは最大の垂直スペースを使用して表示されますが、次のすべてのアイテムはグリッドレイアウト ListView に配置されます。

右側にグループヘッダーが表示されたグリッドレイアウトが既にあります。最初の項目を追加するためのベスト プラクティスはありますか? 2 列 (固定幅と 2 番目の自動幅の 1sttt) を持つ別の親 css-grid を追加する必要がありますか、それともリストビューを操作してレイアウトをシンプルに保つことができますか?

4

2 に答える 2

1

これは VS 2012 GridLayout テンプレートに基づいています。私は2つのことをしました。

1) 正しいオーバーフロー プロパティを持つ 2 つの列を持つ (親) グリッド レイアウトを作成しました。

2) WinJS.UI.ListView コントロールによって生成されたオーバーフロー プロパティを無効にしました。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>groupedItemsPage</title>

    <!-- WinJS references -->
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/groupedItems/groupedItems.css" rel="stylesheet" />
    <script src="/js/data.js"></script>
    <script src="/pages/groupedItems/groupedItems.js"></script>

    <style type="text/css">
        #scrollContainer
        {
            height:100%;

            display:-ms-grid;
            -ms-grid-columns: 480px max-content;
            -ms-grid-rows: 1fr;

            overflow-x:scroll;
            overflow-y:hidden;

            -ms-overflow-style:scrollbar;
        }

        #col1
        {
            -ms-grid-column:1;
        }

        #col2
        {
            -ms-grid-column:2;
            -ms-overflow-style:none;
        }
    </style>
</head>
<body>
    <!-- templates -->

    <!-- The content that will be loaded and displayed. -->
    <div id="scrollContainer">
        <div id="col1">
            col1
        </div>
        <div id="col2" class="fragment groupeditemspage ">
            <!-- the code from the GridLayout example goes here -->
        </div>
    </div>
</body>
</html>
于 2012-09-03T15:42:48.710 に答える
0

私だったら、最初の項目と ListView を含む要素に列を追加します。ListView を操作する方法を考え出すこともできますが、グループ データであるため、私見では面倒です。物事を必要以上に難しくする理由はありません。

于 2012-09-03T13:51:35.113 に答える