如何在 Metro 风格应用程序中实现类似 Bing Travel 的 UI答案

【问题标题】：How to implement Bing Travel like UI in Metro style app如何在 Metro 风格应用程序中实现类似 Bing Travel 的 UI
【发布时间】：2012-09-03 11:57:05
【问题描述】：

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

这是一个简单的模型：

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

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

【问题讨论】：

标签： javascript css microsoft-metro winjs

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：

这不起作用，因为可滚动容器是在列表视图内部生成的；在列表视图之前添加元素只会被放置在可滚动区域之外。