2

In my Windows Phone 7 application, I have a list of objects with images associated with each one (about 40 total). I have one of the images on my main page, and a button which the user can click to randomly choose one of the objects, and then change the image to match the randomly chosen object.

For the animation effect, I would like to have a horizontal "slot machine" effect, where two other pictures (to the left and right) of the original will appear on the screen, and then all of them will move very quickly to the left. As each one leaves the screen, it should reappear to the right (just off the screen) with a different picture loaded, and this should all continue for a set duration of time (before slowing down and stopping to the chosen image).

I did some research and found out that the PathListBox would be perfect for this kind of animation/rotation, but unfortunately it is only in Silverlight 4, and Windows Phone 7 is running Silverlight 3. Another way would be to use a horizontal listbox and re-order the items to move them to the end... but I'm not really sure how to do that in an animation.

Worst comes to worst, the really terrible way to implement it is to use a DoubleAnimation with dozens of mis-aligned keyframes for each image, and calculate when each image leaves the screen, then set a discrete keyframe right after that to pop the image on the right of the screen. This would be completely tedious and involve a ton of hard-coding, and would be near impossible to apply an easing function to (speed up/slow down). What is the best way of doing this?

Thanks!!

Anthony C
  • 91
  • 1
  • 3

2 Answers2

1

I think with some juggling with the templates you could use the LoopingSelector to implement what your looking for. There's a great series of posts on WindowsPhoneGeek.com that discusses it.

The underlying prinicple is the same in that you have a looping data set, it's just a case of changing the orientation so that it scrolls horizontally instead of vertically.

Derek Lakin
  • 16,179
  • 36
  • 51
  • I did a quick search and it looks like the LoopingSelector does not offer an option to scroll horizontally.. so this probably won't work. Do you have any other ideas? – Anthony C Mar 12 '11 at 11:17
  • Well, a little creativity on your part and some custom templates should be able to do the trick :) – Derek Lakin Mar 12 '11 at 17:48
1

The effect you are looking for could almost be achieved using a pivot control - Endless Pivot Control

Alternatively there are a few open source implementations of things a bit like Apple's Coverflow - e.g. http://sigurdsnorteland.wordpress.com/2010/09/19/wp7-samples-upgraded-to-rtm/

Community
  • 1
  • 1
Stuart
  • 66,722
  • 7
  • 114
  • 165
  • hmm but the pivot control is using full page pivots.. I only need a few images to fly across the screen. What kind of control would help with that? – Anthony C Mar 12 '11 at 11:42
  • I will look into the coverflow control, but I'm not sure if it will allow looping infinitely easy, or if it will lag when I start animating the motion very quickly and continuously... – Anthony C Mar 12 '11 at 11:43