3

因此，我正在制作一个可视页面，该页面需要一个可变增长和缩小的分组 ListView，可以添加或删除组。这是我想要的样子（供参考）

各种列表视图项目（混合）被很好地分组，有些跑掉了页面。这是 Windows 应用商店应用程序中非常常见的设计模式。

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

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

将height和设置width为 100% 或值 fromcalc()不可避免地会导致 ListView不填充也不呈现。根据快速入门：在 MSDN 上添加 ListView页面：

对于要呈现的 ListView，您必须为其高度指定一个绝对值。

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

我试过以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>
4

2 回答 2

3

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

例子; 给定这个 HTML：

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

列表视图所在的 DIV 的高度不是页面的 100%。它是 100% 的父级。没有高度。所以它把自己设置得尽可能小。哎呀。

如果将高度从 100% 更改为height: 100vh，则此布局将起作用，因为 listview 的高度已计算到父 div 占用空间的程度，并且 ListView 有一些空间可以布局。

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

于 2013-01-18T16:52:04.670 回答
-2

您的 Windows 8 应用程序的高度永远不会改变。微软将其设计为用户水平滚动，而不是垂直滚动。因此，它要求 LiveView 具有确定的高度。我不相信它需要一个确定的宽度虽然..

于 2013-01-18T15:43:07.560 回答