Win8 / WinJS 列表视图弹出控件

Question

在 Win 8 / WinJS / StoreApp 中 - 制作具有列表视图的模式对话框的推荐方法是什么？用户可以在其中选择项目？

例如，假设我有一个带有待办事项列表 (listview) 的页面。有一个带有按钮的应用栏，应该打开某种对话框，用户可以从中选择列表视图中显示的前几天的项目。

我查看了 MessageDialog，但这似乎并没有让您在 MessageDialog 中有一个列表视图（或任何内容）。

另一个选项似乎是 Flyout Control，但我还没有找到使其成为模态的方法。还有其他选择吗？

当您将证券添加到监视列表时，我想要的是类似于 Bing Finance 应用程序的东西。该控件似乎是一个 MessageDialog，您可以在其中嵌套其他控件。

感谢您的帮助！

Answer 1

如果您的应用在没有用户输入的情况下无法继续运行，则适合使用模式对话框。然而，设计您的用户输入以使输入不是绝对必需的，通常会好很多倍。这允许您让用户能够“轻击”对话框（触摸对话框之外的任何位置以使其消失）。

我强烈建议后者。在经典的用户输入场景中，用户一次被要求输入一堆东西，他们感觉被锁定了，直到他们把所有东西都做好了。在更现代的场景中，允许用户一键创建新的小部件。小部件是使用许多默认值创建的，然后用户可以填写重要数据。显然，小部件尚未准备好“提交”（无论这在您的应用程序中可能意味着什么），直到所有必需的数据都在上面，但用户感觉更好的是能够退出输入模式以进行更多研究或其他任何事情可能需要。

因此，我建议您使用浮出控件来进行您提到的交互。如果用户点击将它飞出然后触摸到外面，它就会消失。如果您出于某种原因必须使其成为模态，那么我建议您创建自己的自定义 MessageDialog。这实际上只是创建一个三行全屏网格的问题。顶行和底行将是黑色的，部分不透明，中间行将是您的对话框。黑色的行会有效地使背景变暗并向用户表明这是模态的，他们必须响应用户输入和/或命令按钮才能将其关闭。

希望对您有所帮助。 您可以在 codefoster.com 上在线找到我 看看免费应用程序codeSHOW 学习 Windows 8 开发

Answer 2

我个人对内联数据收集浮出控件不太满意。我决定用我自己的网格结构布局和设计来构建我自己的模态控件。

需要注意的一点是，如果您使用自定义路线，您将需要使用 data-win-options 来设置模态框的位置，否则您会在弹出式键盘上得到一些奇怪的键盘行为。

作为一名 UX 设计师，我一直在仔细评估每个控件，并确定在每个场景中最适合的控件。就像杰里米上面说的（喜欢这个节目）。我首先确定我打算收集多少信息，然后在另一个屏幕上收集这些信息会打断我的流程。因此，可以从按钮中解除或在模态外部录音的“锁定”模态似乎是最好的方法。

    <style>
    .customModal
    width:500px
    height:375px;
    display: -ms-grid;
    -ms-grid-columns: 100px 1fr 100px;
    -ms-grid-rows: 100px 1fr 100px;
}
.CustomModalGridTitle {
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-column-span: 3;
-ms-grid-row-span: 1;
z-index: 1;
opacity: 1;
}

.CustomModalGridContent {
-ms-grid-column: 1;
-ms-grid-row: 2;
-ms-grid-column-span: 3;
-ms-grid-row-span: 1;
z-index: 1;
opacity: 1;
}

etc.....

    </style>


<div class="customModal" id="customModal" data-win-control="WinJS.UI.Flyout"  data-win-options="{ placement : bottom;}" >
 <div class=customModalGrid>
    <div class="CustomModalGridTitle"></div>
    <div class="CustomModalGridContent"></div>
    <div class="CustomModalGridButtons"></div>
 </div>

</div>

然后我会使用 MS 上的网格布局工具来帮助您构建显示网格并使其更具可重用性：http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_grid.htm

这就是我采取的方法:)。你当然需要在你的 js 中设置你的事件监听器来触发 customModal。在 yourpage.js 中的某个地方准备好了

   // Show the flyout
function showFormatTextFlyout() {
    var myCustomModal = document.getElementById("formatTextButton");
    document.getElementById("#customModal").winControl.show(myCustomModal);
}

// 你可能想要

如果您有一个外部 div，您可以将其设置为 100% 宽度，并且基本上模仿 Dialog 控件进行用户身份验证。