windows phone 7 pictures app images transition, how to make own?

Question

Windows phone 7 standard pictures app has very nice flicking through images (choose concrete image and then flick). Wondering how to replicate that in my own application.

requirements are: a) moving to previous/next image using flick b) when flick is performed, visual feedback is visible (transitions between current and next/prev images) c) image count is not known at runtime (just prev/current/next images are at any current moment, others are downloaded when needed).

If there's no concrete sample on web, at least what controls should i use for implementing this?

score 0 · Answer 1 · answered Mar 04 '11 at 09:42

0

One thing that might help you is the Transitioning Content Control - see http://jesseliberty.com/2009/04/29/animated-visual-state-transitions-with-the-transitioning-content-control/

answered Mar 04 '11 at 09:42

Stuart

66,722
7
114
165

I've looked at the source code of it, there's several doubts: a) why it is not included in windows phone toolkit b) i don't see a way to control transition, like on pictures app: like i place finger on screen and if i move it, it moves with photo, for example if i move only ~5% of screen width and release, it moves current photo together while moving and then moves it back, does not transition to next photo. – Giedrius Mar 04 '11 at 11:20
I think your comment got cut short? If you want to create your own transitions, then they are very easy to create - just use storyboard and doubleanimation - see http://www.youtube.com/watch?v=5k8SG82e1Rc with source at - http://script.iron7.com/Script/Detail?scriptId=81baa9940368436c8244ab7810331b65&userLowerCaseName=iron7 – Stuart Mar 04 '11 at 11:25
and if you are looking for gestures - then see - http://www.codebadger.com/blog/post/2010/11/01/WP7-Tip-of-the-Day-Silverlight-Toolkit-Gestures.aspx - but you will have to wire things together – Stuart Mar 04 '11 at 11:27

score 0 · Answer 2 · answered Mar 14 '11 at 22:45

The way I've done this is to use a ListBox, the replace the Items Panel style to have a StackPanel with Orientation = Horizontal. This way you get the swiping and moving for free!

Then the trick is make the listbox load your images dynamically and perform well. Have a look at http://codifying.wordpress.com/2011/01/23/wp7-everything-about-listbox-performance/this blog post for a discussion on making listboxes perform well. I'd recommend teh Lazy List Box or the LongListSelector.

If you have to you can create a class that implements IEnumerable and use "yield return" to load up the next/previous image when required.

that's interesting approach, the only thing i'm missing - snapping to current item, like Looping selector does, any ideas if it's possible to make such snapping on listbox? — Giedrius, Mar 22 '11 at 15:52

score 0 · Accepted Answer · answered May 03 '11 at 07:39

Looks like LoopingSelector is quite fitting the task. I took windows phone silverlight toolkit sources and using them created LoopingSelector horizontal version. Actually, it's more a hack, than real implementation, that's why i'm not posting it (if you're curious, i've search/replaced vertical to horizontal in user action handling, rotated control by 90 degrees and tuned physics values).

windows phone 7 pictures app images transition, how to make own?

3 Answers3