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

Question

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

这样的事情：

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

我们当前的实现只在pane1和pane3之间来回滚动（符合上一个要求），遵循MSDN WinRT控件示例：

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

这样可以正常工作，因为我们有触摸体验，内容跟随用户的手指，在滚动时可见。

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

• 在'start'和'end'
上添加另一个网格
• 滚动时计算水平偏移量
• 在面板中途，将“最后”窗格内容复制/插入“下一个”窗格

但我不知道这是否有效，总体而言我不知道如何去做。我们正在寻找一些非常简单的东西，以便了解可用性测试，但它必须真正适用于C＃/ XAML（Windows应用商店应用）。所以我要求更聪明的人提出建议。

Answer 1

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

Answer 2

请检查： Create a custom ItemsPanel for an ItemsControl

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