1

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

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

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

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

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

谢谢你的帮助！

4

2 回答 2

2

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

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

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

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

于 2013-05-17T15:59:56.220 回答
1

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

需要注意的一件事是，如果您使用自定义路线，您将需要使用 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 控件进行用户身份验证。

于 2013-05-17T19:41:41.210 回答