IPhone like scrolling on a Silverlight ListBox

Question

I need a list for IPhone-like features for Silverlight. That is, animated scrolling and clicking and dragging to scroll. Scrolling will continue a little after the mouse event, based on the "speed" of the drag. I searched and did not find control providers that provide this. So the question is, how do I build it? I need some tips to get started.

There are two parts to this question:

Part 1, How to get an animated scrolling list.

Part 2. How to build a “drag and drop” scroll, I think I should put the canvas on top and track the mouseevent, and simulate some physics. Some hints here would be wonderful.

Thanks Larsi.

Answer 1

Some time ago, I made a control that did something like this. All that I did was embedded in the canvas. Just adjust the canvas.top of the entire stack panel to mousemove (on mouse click). To animate the scroll after the mouse, you just need to track the moved amount and apply the animation to the canvas.top property.

Answer 2

Here's a really nice complete sample for WPF that does both drag and drop scrolling and auto scroll / inertia scrolling. I'm not sure if something needs to be changed to make it work in Silverlight.

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

Just note that you cannot click and drag a view if you click on a child (like buttons) that capture mouse input. I actually finished modifying this sample so that you can still drag the scroll when you click on the children, but at the same time let the children accept mouse input when not dragging the scroll.

Answer 3

It will be easier in Silverlight 3 than Silverlight 2, but not impossible in 2.

This video is from MIX 09, Creating Microsoft Silverlight Controls Should Help You.

Answer 4

Another post from the Sacha Barber website:

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

Jeremiah Morrill shares code that implements inertia animated scrolling in a custom ContentControl (with a template with ScrollViewer enabled)

Answer 5

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

By setting the pos. and neg. the fields in the stack of the panel inside the scrollviewer you can create a scroll effect.

 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); } }