I am sure many of you have heard and even interacted with the CoverFlow view of iTunes. In the WPF world we have the good folks from Thirteen23, who have created an app called Harmony that shows off the use of CoverFlow. They make good use of the Viewport3D to pull the desired effect.
Recently I had the opportunity to develop a custom control similar to CoverFlow. I call this control the ElementFlow, because besides CoverFlow, the control can do lots of other views. In fact the whole view part of the control has been abstracted out so you can plug in your own view (if you wish). This is possible by creating a new ViewState and providing the necessary animations to flow the items.
Since the control is supposed to layout a list of items, it behaves very similar to an ItemsControl. However for various reasons I have not derived from ItemsControl (Why? – that’s a topic of a different blog post).
To demonstrate this control I have captured two videos, one which contains reflections and one without. In the first one I show only the CoverFlow control (with reflections ON). In the second video (reflections OFF) I start with the CoverFlow view and then switch my ViewStates. You can see that the view transition is very fluid and the selected-item is retained on different ViewStates. [Note that not all layout-related dependency properties have mappings for different ViewStates.]
(Shows the Coverflow view with Reflections)
(Shows other ViewStates)
Some of the inner workings
- There are two ways in which you can add items to the ElementFlow control: creating the UIElement directly or by specifying a ElementsSource and ElementTemplate. Whenever an item is added, it is kept hidden separately and a VisualBrush of that item is texture-mapped onto the 3D Mesh. The mesh is then positioned according to its item-index in the list.
- I derive from a FrameworkElement instead of ItemsControl.
- To change the visual tree I override the following methods: GetVisualChild(), ArrangeOverride(), MeasureOverride() and the property: VisualChildrenCount
- Viewport3D is my only visual-child
What are the features of this control?
- Can do multiple forms of 3D list visualizations using ViewStates. Some of the out-of-box ViewStates include: CoverFlow, RollerCoaster, TimeMachine, Rolodex
- Pluggable ViewStates
- Fluid animations when switching between ViewStates
- Items can be added directly via XAML or in code using the Children property
- Supports data-binding via ElementsSource + ElementTemplate
- Detects changes to collection – Add/Remove/Update
- Various properties to control layout of items – ItemGap, FrontItemGap, PopoutDistance, TiltAngle. Changing these properties causes animated changes on the view.
- Mouse, Keyboard and Mousewheel interaction
Future updates
- Virtualization of the view when dealing with a huge collection. Got to dig up those posts by Dan Crevier and Ben Constable
, think VirtualizingStackPanel and IScrollInfo !! - I can’t release the Source code yet but keep visiting back
Technorati tags: wpf, xaml, elementflow, coverflow, itemscontrol, customcontrol
Hi pavan! I’m dieing to see the code behind this great control…I request you to write an article in code project about how you did this so that more people can get to know your great control..I’m an UG student & I’m planning a project in which your control could be of great help for me…so plz do post the code or the control ASAP…
Hi Mikael,
I still haven’t released the code. Will put up a post when I do that.
Appreciate your interest.
Cheers!
Pavan
Hi Fanou,
I certainly wish that I can post the source and also explain the techniques. However some of the stuff is proprietary and thus I am limited in certain ways.
There are lot of interesting things in ElementFlow that give a new perspective at control development. There are tricks with Storyboards, 3D meshes, layout, design patterns, event/input handling that may not seem obvious. I shall certainly post more in the future.
Thanks!
Your work seems to be very powerfull. You said that you can’t release the source code yep but "keep visiting back". Can you tel us when you will explain your work or just release your code ?
Congratulations again
Hi MueMeister,
I made a change to the ElementFlow control sometime back … this may be what you are looking for : http://pavanpodila.spaces.live.com/blog/cns!9C9E888164859398!468.entry
Hi,
Why did you used a FrameworkElement instead of ItemsControl. I don’t understand
the fact cause you loose the abilities exposed by the ItemsControl-paradigm hich
i shiped with WPF.
New views has to follow your rules instead of using DataTemplates and ControlTemplates
for item containers e.g. (correct me if this is not true)
TIA
MueMeister
very neat! saw the video on yt and followed the link.
Steve,
At this moment the control is internal but that may change. I will keep everyone updated through this blog.
Nice job! That looks great. Will this be available for sale/download? looking to implement something like this shortly. When!?
very cool
-steve
Love to see the source
Very cool stuff.
When do you think you will release the control?
Hi Scott,
I am planning to create a new CodePlex project for all my controls, frameworks, tools, etc. that I have built so far. It should be up soon
[...] had that moment when I saw Pavan Podila’s WPF example of doing 3D layouts with WPF. That blew me away (he made it back in June) and I realized that WPF ain’t nothing to fuck [...]
Hi Pavan,
I downloaded your project from CodePlex. It is very cool! It appears as though there is a slight but though.
I noticed that when you run the ElementFlow program in the default view and you add a bunch of items, then you can see through the reflections of the elements on the right side, but the reflections on the left side look opaque. Either way looks okay, but the fact that they are inconsistent is a little odd.
I examined the code, and the only thing that I can think is that this is not a bug which is in your code, rather, it appears to be a problem with the actual ViewPort3D. Updates to the z-order of the items in the 3D scene do not appear to affect the transparent elements. This is also very apparent in another one of the views.
I can think of a potential fix. That is, manually resort the items in the scene. Do you have any thoughts on this issue?
Thanks!
Sorry, by slight “but”, I meant slight “bug”.
Thanks again.
Hi David,
I have known this issue with transparency and was also reported on the CodePlex site. The fix you suggested is the right way to go. I plan to add this in a future release. Thanks for bringing that up.
If you could vote for this on CodePlex that would help too….just for the record
Sure, I’ll vote.
One last thing. Would it be easy to adapt this code to make the control wrap around, like a carousel control, so instead of reaching the end of the collections of items you can just continually scroll through them?
It seems like the z-order issue would be more pronounced if you did something like this. But it would add to the number of scenarios where the controls would be useful.
They really look great though.
I have the Carousel as one of the views. Is that what you were looking for. You can see this by setting the ViewMode to “Carousel”
Here is my post on that: http://blog.pixelingene.com/?p=211
good!super good!
i want when i click in each picture will bi appear a popup windows to show detail picture. i can’t override function
can you help me
[...] The ElementFlow custom control – can do CoverFlow too! – kontroly pro krásné carousel efekty ve WPF [...]
[...] Since my previous entry I've made some major speed improvements, added back in the 52 cards and added 2 new 3d layouts similar to the ones in Pavan Podila's Element Flow. [...]