银光列表框如何实现类似iPhone的滚动效果

Question

我需要一个类似于iPhone的功能的Silverlight列表框，包括动画滚动和点击拖动滚动。根据拖动的“速度”，鼠标松开事件后滚动会继续一段时间。我已经搜索过了，没有控件供应商提供这个功能。所以问题是如何构建它？我需要一些提示来开始。

这个问题有两个部分：

第一部分，如何获得列表框的动画滚动。

第二部分，如何构建一个“可拖动”的滚动，我想我应该在上面放置一个画布并跟踪鼠标事件，并模拟一些物理效应。这里有一些提示会很好。

谢谢Larsi。

- Larsi

Answer 1

一段时间前，我制作了一个控件，类似于这样。我只是在画布中放置了一个堆栈面板。当鼠标移动时（按下鼠标），只需调整整个堆栈面板的Canvas.Top属性即可。为了在鼠标松开后动画滚动，您只需要跟踪移动的量并将动画应用于Canvas.Top属性。

- mdm20

---

嗨！那是一种聪明而简单的方法。谢谢。 - Larsi

Answer 2

这是一个非常好的WPF完整示例，可以同时实现拖动滚动和自动快速/惯性滚动。我不确定是否需要更改任何内容才能使其在Silverlight中运行。

http://sachabarbs.wordpress.com/2009/12/24/friction-scrolling-now-an-wpf-attached-behaviour-too/

只是一条提醒，如果您点击子元素（例如按钮）以捕获鼠标输入，则无法单击并拖动视图。实际上，我最终修改了这个示例，以便在单击子元素时仍然可以拖动滚动条，同时在不进行拖动滚动时允许子元素接受鼠标输入。

- donovan

---

我遇到了完全相同的问题。在ListBox子项捕获鼠标输入之前，我没有机会对其进行任何处理。你是如何解决这个问题的？ - Matt.M

首先，我将鼠标事件处理程序更改为预览版本，以确保始终能看到事件。然后，在预览左键单击中，我设置了一个标志，表示用户可能正在开始拖动滚动，并保存了单击位置。然后，在鼠标移动处理程序中，我检查标志是否已设置，以及用户是否已从原始位置移动。然后，我捕获鼠标到滚动查看器，这可以防止任何子控件捕获鼠标。 - donovan

Answer 3

来自Sacha Barber网站的另一篇文章：

http://sachabarber.net/?p=481

Jeremiah Morrill分享了一段代码，实现了在自定义ContentControl中带有惯性的动画滚动（使用包含的ScrollViewer模板）。

- foson

Answer 4

在Silverlight 3中，这将比Silverlight 2更容易，但在2中也不是不可能。

MIX 09的Building Microsoft Silverlight Controls视频应该会对你有所帮助。

- JonnyBoats

---

谢谢提供链接。希望在工具包的3.0版本中也能够获得一些类似iPhone的控件。 - Larsi

Answer 5

<ScrollViewer x:Name="sv1" Width="500" Height="285">
   <StackPanel x:Name="sp1" Width="450" Height="285">
   </StackPanel>
</ScrollViewer>

通过在滚动视图中的stackpanel设置正负margin，您可以创建一个滚动效果。

onScroll_Up()
{
  //Change this based on your scrollviewer dimension
  if (this.sv1.ScrollableHeight < 300)
  {
    Thickness thickness = this.sp1.Margin;
    thickness.Top += 50;
    this.sv1.SetValue(StackPanel.MarginProperty, thickness);
  }   
}


onScroll_Down()
{
  if (this.sv1.ScrollableHeight > 1)
  {
    Thickness thickness = this.sp1.Margin;
    thickness.Top += -50;
    this.sv1.SetValue(StackPanel.MarginProperty, thickness);
  }
}

- MWW