This project is read-only.

Making a wrap version of CoverFlow

Sep 19, 2008 at 1:50 PM
Hi guys
I have just started looking a Fluid Kit (specifically ElementFlow) and am needing to do something a little different.

In particular I would like to create a new ViewStateBase "panel"/view that acts the same way as a wrap panel does except that when an item is pressed it moves forward in 3d space. In essence it would be very similar to the current CoverFlow except that it would wrap at edges of the container that the Elements are in.

Now you might say why don't I just use a wrap panel and the answer is that I want the use to start off with the wrap panel and then I am going to animate to the Carousel view.

How would I go about doing this? Does anyone have any ideas?
Cheers
Anthony
Sep 19, 2008 at 4:02 PM
Edited Sep 19, 2008 at 4:02 PM
That sounds like an interesting view. It can be done by creating a new ViewState that does the layout in left-right, top-bottom fashion. You just have to place the 3D planes accordingly. In fact it sounds more like a Video wall from PicLens (http://www.cooliris.com/)

- Pavan -
Sep 20, 2008 at 1:15 AM

Thanks a lot for your quick reply.
Yes what I am wanting is kinda like the video wall except that it goes off into 3D space on either side it would wrap inside the available space. This view would act like a wrap panel in the way that it would place items row by row going down taking up the available space. If necessary, if getting it to act like a wrap panel is too difficult, I would be happy if I had to specify how many columns it would take up.

The finial effect I am after is that the screen starts of with a grid of 12 - 20 items. This is intended so that the user can see all items easily. Then when the user clicks on and item, I morph to the CoverFlow or Carousel view. This is because either of these views take up less vertical screen real-estate. Whilst the morph is happening I will shift the view vertically up towards the top of the screen. Then with the new space available at the bottom of the screen I will load some content that was specific to the choice they made. Form here the user can select other items from the CoverFlow or Carousel. Finally, when the user can click a back button which hides the content and goes back to the grid view. I hope that makes sense. Now I really don't think this will be too difficult, practically given the ability for the ElementFlows to morph between different views. Hence all I need is a slightly different view.

The only problem is that I am still relatively new to WPF and am a little unsure of how I would go about going this within the ElementFlow. For instance I can see that from the looks of it, it should be relatively simple to do this (particularly if i specify through a property how many columns to use), but I am a little unsure of how to make the required ElementFlow. Like I know I will need a class like the below but i can't see how I would tell it how to wrap the columns and rows?

Cheers
Anthony

    public class WrapFlow : ViewStateBase
    {
        protected override Motion GetPreviousMotion(int index)
        {
            ...
        }

        protected override Motion GetNextMotion(int index)
        {
            ...
        }

        protected override Motion GetSelectionMotion(int index)
        {
            ...
        }
    }
Sep 20, 2008 at 3:20 AM
If you want to have a fixed number of Rows/Columns you can expose properties on your WrapFlow. You can configure this instance of the WrapFlow with your chosen Rows/Columns and set that as the CurrentViewState of ElementFlow.
Sep 20, 2008 at 3:49 AM
How would I go about it. I think I would need to know in the index of the item in the WrapFlow that I am dealing with. Also the methods exposed by ViewStateBase are only to do with motion, not placement.
Cheers
Anthony
Sep 21, 2008 at 3:52 PM
The index is passed as a parameter to each of the ViewStateBase overrides