Question

因此，我制作了一个可视化页面，需要一个可变增长和缩小的分组ListView，可以添加或删除组。 Here's我希望它看起来像（供参考）

各种listview项目（混合）很好地分组，有些项目在页面上运行。这是Windows应用商店应用中非常常见的设计模式。

现在，我的问题是：如果height和width属性设置为确定的像素数，我只能正确显示我的ListView，例如：

#myListView {
height: 700px;
width: 2000px; }

将height和width设置为100％或calc()中的值不可避免地会导致ListView 不会填充而不会呈现。根据MSDN上的Quickstart: Adding a ListView页面：

要使ListView呈现，您必须为其高度指定绝对值。

这一切都很好，除了这个应用程序将在各种屏幕上，需要是一个可变的高度。这是特别相关的，因为ListView将水平滚动。我希望滚动条显示在页面的最底部，就像它在Store应用程序中一样。

我已尝试以编程方式重置height，但这不起作用。 那么，如何让这个ListView在各种屏幕上正确呈现？以下是我的HTML代码供参考。

<div id="allMixesListView" data-win-control="WinJS.UI.ListView" 
data-win-options="
 {
  itemTemplate: select('#myTemplate'),
  groupHeaderTemplate: select('#myHeaderTemplate'), 
  layout: {type: WinJS.UI.GridLayout}, 
  selectionmode: 'none', 
  itemDataSource: dummyData.placeholderData.dataSource
 }" 
class="myListView"> 
</div>

Answer 1

完全可以将WinJS.UI.ListView设置为height: 100%。但是，它所参与的布局也必须具有一些“已定义”的高度。它不需要是明确的（例如不是700px），但需要产生一些明确的空间。

实施例;鉴于此HTML：

<body>
    <div>
        <div data-win-control="WinJS.UI.ListView" style="height: 100%"></div>
    </div>
</body>

列表视图所在的DIV高度不页面的100％。它是父的100％。哪个没有高度。因此它将自己设置为需要的小。糟糕！

如果将高度从100％更改为height: 100vh，则此布局将起作用，因为列表视图的高度已经计算到父div占用空间的点，而ListView有一些空间布局。

请注意，答案并非严格“设为100vh”。这是“确保布局有足够的空间来布置你的项目”。如果您在父元素上使用了-ms-grid，那么您也已经设置了（假设行，列已正确设置）

Answer 2

您的Windows 8应用程序不应该改变高度。微软设计它使用户水平滚动，而不是垂直滚动。因此，它需要LiveView具有明确的高度。我不相信它需要一个确定的宽度..

Windows 8 ListView不会以100％高度呈现

2 个答案: