4

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

像这样的东西： 3窗格全景

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

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

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

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

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

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

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

4

2 回答 2

1

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

于 2013-04-16T18:25:55.637 回答
0

检查这个：为 ItemsControl 创建一个自定义 ItemsPanel

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

于 2013-04-18T09:10:55.703 回答