3 窗格循环滚动面板 - 建议答案

【问题标题】：3-pane looping scrolling panel -- suggestions3 窗格循环滚动面板 - 建议
【发布时间】：2013-04-16 17:31:51
【问题描述】：

我有一个 UI 实现挑战（至少对我而言）。需要一个无限循环的 3 个窗格的滚动视图：当用户从窗格 2 向右滑动到窗格 3 时，他们应该能够继续向右滚动到窗格 1 并在窗格中继续滚动，无休止地重复。一次只显示一个完整的窗格 - 没有悬边。

类似这样的：

我发现的所有示例都非常精细，带有数据绑定和视图模型，通常基于列表框/视图。我们不需要任何复杂的东西：我们的 3 个窗格不是动态的，总是有 3 个。

我们当前的实现，仅在 pane1 和 pane3 之间来回滚动（满足之前的要求），遵循 MSDN WinRT 控件示例：

<ScrollViewer>
  <StackPanel>
    <Grid /> <!-- pane1 -->
    <Grid /> <!-- pane2 -->
    <Grid /> <!-- pane3 -->
  </StackPanel>
</ScrollViewer>

就目前而言，这工作得很好，因为我们有触摸体验，并且内容跟随用户的手指并且在他们滚动时可见。

到目前为止，我的想法是：

在“开始”和“结束”添加另一个网格
计算滚动时的水平偏移量
在面板进行到一半时，将“最后一个”面板的内容复制/插入到“下一个”面板中

但我不知道这是否可行，而且总体上不知道如何去做。我们正在寻找一些非常简单的东西来理解要点和进行可用性测试，但它必须在 C#/XAML（Windows 应用商店应用程序）中真正工作。所以我在向更聪明的人寻求建议。

【问题讨论】：

您是想一次只显示一个，还是非显示面板的侧面在左侧和右侧显示了一点？
只有当前窗格完全显示..侧面没有前沿。触摸和查看内容滚动是必要的，因此 FlipView 不起作用。修改后的问题。

标签： xaml windows-8 windows-runtime

【解决方案1】：

您不应该使用ScrollViewer，因为它不会循环播放，并且有滚动条或指示器来显示您在可滚动内容中的视口位置。 FlipView 会更好一些，但它也不支持循环。我推荐的解决方案是从头开始简单地实现它。将所有面板放在与面板大小相同的Canvas 中，并处理来自面板的ManipulationDelta 事件（您需要至少给它们一个TransparentBackground 以成功进行命中测试和ManipulationMode="TranslateX,TranslateInertia"）和在面板上调用Canvas.SetLeft(panel) 以通过从事件参数中获取的e.Delta.Translation.X 更新它们的位置。如果位置低于-panel.ActualWidth，则添加3 * panel.ActualWidth，如果高于 - 减去该金额。如果您决定在e.PointerDeviceType == PointerDeviceType.Mouse 时过滤掉操作事件，如FlipView 控件所示，请确保还添加按钮以启用鼠标翻转项目，但我个人更喜欢保留鼠标拖动操作。

【讨论】：

【解决方案2】：

检查这个： Create a custom ItemsPanel for an ItemsControl

描述创建两个 ItemsPanel ：第一个将生成一个包含所有项目的圆圈，第二个将生成一个无限循环列表。

【讨论】：

谢谢——这看起来像有更多开发技能的人可以开始。我们还需要为滚动添加捕捉点。