5

我想在Metro Style App中实现带有幻灯片样式的页面转换。

效果看起来

    state 1                     state 2                   state 3
 ____________              _______________             ____________  
|            |            |       |       |           |            |
|   page A   |    ====>   |page A |page B |   ====>   |   page B   |
|            |            |partial|partial|           |            |
|____________|            |_______|_______|           |____________|

它将通过从右向左滑动的平移手势触发（没有触发系统工具栏，我不知道如何隔离它们）。

我玩过exitPage/enterPage但没有运气：似乎页面 A 在页面 B 进入之前就消失了。
我还阅读了单页导航、片段加载的代码示例和滚动/平移的代码示例并考虑一下将当前页面和新页面放入 div 包装器中，并将它们滑动到 div 中，无需调用navigate()。但这可能会破坏CSS位置，我不知道什么时候可以安全地调用新页面的JS......

更新 1也许FlipView可以做到这一点？

更新 2以找到将本地页面加载到的方式FlipView，找到了有用的链接，但仍然感到困惑......

更新 3通过完全定义页面并渲染其中一个FlipView.itemTemplate制定了一个原始版本的FlipView用法，这合适吗？PageControlPageControl

那么，有什么合适的解决方案或好主意吗？谢谢！

4

2 回答 2

2

您绝对可以为此使用 FlipView，但老实说，我不知道这在 HTML 端是如何工作的。在 Xaml 方面，您可以将“页面”实现为用户控件而不是实际页面，然后将它们托管在 FlipView 中。如果您有很多“页面”以及与这些“页面”关联的数据，这可能会占用大量资源。

在 Xaml 端，每个真实页面（从 Page 继承）都显示在 Frame 中。Frame 一次只能显示一页。这就是为什么您会在动画完成之前看到第一页消失的原因。

如果您不希望用户能够在多个虚拟页面之间滑动，或者如果资源变得过于密集，您可能不想使用 FlipView。相反，您可以使用两个 ContentPresenter 并拥有一个动画。ContentPresenterA 和 ContentPresenterB 是并排的。动画滑动，最后将 ContentPresenterA 设置为 ContentPresenterB 的内容，然后快速回到动画的开头。它应该发生得如此之快，以至于用户不会注意到跳跃。

我将请我的同事和朋友 Ryan Joy 来这里看看他是否可以谈论如何在 HTML 方面做这些事情。

于 2012-09-18T21:49:30.157 回答
0

我用过FlipView这个。WinJS.UI里面的代码base.js解释了有关效果的所有内容（正如 Dominic Hopton 所提到的）。这FlipView对于我目前的使用来说已经足够了（尽管将来可能需要定制额外的翻转行为）。

在FlipView开始时一次加载所有页面，以减少过载，我

  1. 延迟加载简单的占位符，div而不是PageControl首先加载/PageControl卸载onpagecompleted/onpagechangedvisibility. FlipView这带来了一个副作用，PageControl.ready/unload当页面在视口内（或隐藏）可见时触发，非常方便。
  2. 通过增量加载额外的页面itemDataSource（也许也动态卸载？）

另外，额外FlipView的 s 可以在被PageControl包裹的内部使用FlipView，MSDN 没有提到这一点。

于 2012-10-05T14:11:49.947 回答