Question

在Win 8 / WinJS / StoreApp中 - 建议一个具有listview的模式对话框的用户可以选择项目的方法是什么？

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

我查看了MessageDialog，但这似乎没有让你在MessageDialog中有一个listview（或任何内容）。

另一种选择似乎是Flyout Control，但我还没有找到一种方法来制作模态。还有其他选择吗？

当您向监视列表添加安全性时，我想要的是Bing Finance应用程序。该控件似乎是一个MessageDialog，您可以在其中嵌套其他控件。

感谢您的帮助！

Answer 1

如果您的应用无法在没有用户输入的情况下继续，则适合使用模式对话框。但是，设计用户输入通常会更好，因此输入不是绝对必需的。这使您可以让用户“点亮”对话框（触摸它外面的任何地方以使其消失）。

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

所以，我建议你使用弹出窗口进行你提到的互动。如果用户点击将其飞出然后触摸到外面，它就会消失。如果由于某种原因必须使其成为模态，那么我建议您创建自己的自定义MessageDialog。这真的只是创建一个有三行的全屏网格。顶部和底部行为黑色，部分不透明，中间行为对话框。黑色行将有效地调暗背景并向用户指示这是模态的，并且他们必须使用用户输入和/或命令按钮来响应它。

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

Answer 2

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

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

作为一名用户体验设计师，通过交易，我正在仔细评估每个控件，并确定每个场景中最有效的控件。就像杰里米上面说的那样（喜欢这个节目）。我首先确定了我打算收集多少信息，并且在另一个屏幕上收集这些信息会中断我的流程。所以一个“锁定”的模态，可以从一个按钮中解除或在模态之外录音似乎是最好的方法。

    <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控件进行用户身份验证。

带列表视图的Win8 / WinJS弹出控件

2 个答案: