The Carousel view has become a pretty popular visualization for a list of items. It consists of a set of items arranged circularly with the selected item brought to the front, just the like the figure below:
In a recent discussion on the WPF Disciples Group, I got a little motivated to experiment with this view for ElementFlow. After frying a few of my grey cells I finally got something that looked like a carousel.
Here is a quick video that shows this in action.
This is not yet perfect
The behavior of this view becomes a little hard to understand when you select an item at the back. The selected item doesn’t rotate into the focused position but rather does a translation. The desired behavior should be like the green marking in the figure below:
To achieve that I need to make some structural changes to the way the animations are created for the Views. Right now there is a common animation that is used for all the views. What we need is a way for the view to specify its desired animation (Storyboard). Most views will use a default Storyboard from ViewStateBase but special cases like the Carousel view will furnish its own Storyboard. I am going to think through this a little bit more and post an update later.
Well done, sir.
Thanks Josh !
Simply amazing!
very well done…..
This is gorgeous Pavan. Is the code available?
-r
Boring. j/k — looks great!
Hi Roland,
The code is part of FluidKit. You can browse/download here: http://www.codeplex.com/fluidkit
Grant/Marlon/wekempf: Glad you guys like it!
How about a ‘skip’ feature. If you have ever used an IPod Touch you would know what I mean. In the case of a couple of thousand plus items you wouldn’t really want to show them all, maybe 5 or so element around the current one, allowing the user to navigate.
Sounds interesting Jonathan. The need to reduce the number of items seems more application specific. If you were to use this view for viewing Albums, I would agree that such a feature would be very useful. I guess what we are getting into here is Virtualization, ie. generating items only when necessary. The idea of picking every fifth item could be one of the criteria.
Thanks for suggesting it. I’ll take a look at the Touch.
Simply great man!!
Hi Pavan, I’m revising the elementflow implementation, but I really would like the carousel version, do you have some source code updates about this?
Regards
You can find the Carousel code on the FluidKit project: http://fluidkit.codeplex.com/SourceControl/ListDownloadableCommits.aspx
Let me know what cool stuff you come up with.
Hi Pavan! Really a good job!
One question, I’ve downloaded the source code.
I’ve tried to enable the reflection of the ElementFlow in the showcase program, I’ve changed the itemtemplate in TestDataTemplate_Reflection and enabled the property HasReflection… but there is still no reflection and a weird appearance of the elements. Do You know what I’m doing wrong?
Many Thanks, Marco
Wow thank you
Thankyou thats great!
hi Pavan
I can not find the source code for the carousel, can you send me a link?
thanks and great work!