Question

我正在寻找一种方法来制作类似于Windows 8标准的Bing Travel应用程序的布局。我正在使用Visual Studio 2012中的Javscript / CSS开发应用程序。

这是一个简单的模拟：

ui mockup

令我困惑的部分是第一个被展示的项目。不知何故，第一个项目使用最大垂直空间显示，而所有下一个项目都在gridlayout ListView中对齐..

我已经有了gridlayout，右侧显示了groupheader。是否有添加第一项的最佳做法？我应该添加另一个带有2列的父css-grid（带有固定宽度和第2自动宽度的1stt）还是可以以某种方式操纵listview以保持布局简单？

Answer 1

好的我解决了，这是基于VS 2012 GridLayout模板。我做了两件事。

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>

Answer 2

如果是我，我会在包含第一项和ListView的元素中添加一列。您可以尝试并想出一种操作ListView的方法，但由于您是组数据，这将是一种痛苦，恕我直言。没有理由让事情变得比他们需要的更难。

如何在Metro风格的应用程序中实现像Bing一样的Bing Travel

2 个答案: