1

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

这是一个简单的模型：

用户界面样机

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

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

4

2 回答 2

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>
于 2012-09-03T15:42:48.710 回答
0

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

于 2012-09-03T13:51:35.113 回答