Using ContentControl3D and Panel3D in a ListBox

In my previous blog post I introduced a new control that I have been working on called ContentControl3D.  Back in May of 2008 I wrote a CodeProject article about a custom layout panel that arranges and animates 2D elements in 3D space, called Panel3D.  Tonight I combined ContentControl3D and Panel3D to create an improved version of my WPF Disciples Blog Roll 3D application.

In order to make this application work, I had to enhance ContentControl3D by exposing more properties and methods in its public API.  This version of the control is much better than the version posted previously.  For example, you can now configure the camera used to view the 3D scene by setting the CameraPrototype property, and specify where the camera should move to during an animated rotation by setting the CameraZoomDestination property to a Point3D object.  The following class diagram shows the API:

class-diagram
The 3D blog roll application now truly feels like a 3D experience.  Not only is each blogger’s information hosted in 3D space, but each “tile” of information can rotate 180 degrees to reveal more details about a blogger.  After navigating to a blogger in the list and clicking on his/her picture, that blogger’s tile rotates and looks like this:

screenshot
Each ListBoxItem in the ListBox is assigned a custom ControlTemplate via the ItemContainerStyle property of ListBox.  That template creates a ContentControl3D, which hosts two UserControls, one on each side of the 3D surface (i.e. the “tile”).  The template declaration is listed below:

xaml1
You can download the source code here: WPF Disciples Blog Roll 3D (Source Code).  Note: Be sure to change the file extension from .DOC to .ZIP and then decompress it.

13 Responses to Using ContentControl3D and Panel3D in a ListBox

  1. Dr. WPF says:

    It just gets better and better! Very nice. 😀

  2. Frank says:

    Hi Josh – you rock!
    but the memory problem is still in your code.
    i built a release and try the app on 2 pc(XP, 3.5SP1, VS2008), every time my memory raise about 50.000 (taskmanager) with any flip click.

    let me know if you want such information on another way.

    mfg frank
    ps: mfg its like regards in german, but shorter 😉

  3. sacha says:

    nice work, as always

  4. Josh Smith says:

    @Dr. WPF & Sacha – Thanks a bunch!

    @Frank – The fact that this application consumes a good deal of memory is not so much of problem. ContentControl3D used to have a memory leak, which was a big problem, but I think I fixed it (not positive yet). Are you seeing the memory consumption rise continually? Thanks.

  5. Raul Mainardi Neto says:

    Amazing work Josh, as Sacha pointed, as usual…

    Thanks for keep shering
    All Best
    Raul

  6. Frank says:

    @Josh – i record a short video and yes it rise continually and in big steps 🙂

    btw how can i sent you the video??

  7. Josh Smith says:

    Thanks Frank. I sent you an email.

  8. Dan says:

    Great. The ContentControl3D is a great solution to host display/edit views of a business form. Separate views front(display) & back(edit) bound to the same View Model seems like a better solution then stacking or layering the two “ViewControls” and toggling there Visibility properties.
    The ContentControl3D may need a few more properties to make it an ideal solution for that scenario.
    I am probably just pointing out the obvious but

    Great stuff!!

  9. Josh Smith says:

    Thanks Dan. I’d love to hear what other properties/methods/events/etc. you think would be good to expose off ContentControl3D.

    I’m tossing around the idea of having a bubbling routed event that is raised when the surface rotates, and perhaps a tunneling Preview event that allows you to cancel it. Not sure yet, though…

    Also, I’m thinking of having a property that you can set to specify what direction the rotation should be, such as LeftToRight, RightToLeft, BottomToTop, and TopToBottom. That would cover all four standard rotations along the X and Y axes.

    What do you think?

  10. Chris says:

    I really like Dan’s idea about using the control to toggle view/edit modes of a viewmodel. Thirteen23 recently posted a Twitter client, called Blu, that uses rotation BottomToTop http://www.thirteen23.com/experiences/desktop/blu/#
    Allowing for different rotations was the first thing I was going to do to improve the flexibility of this control. This is showing lots of potential …

    Chris

  11. Josh Smith says:

    I agree, Chris. Dan’s idea is killer. The next feature I’ll implement is the ability to specify the type of rotation. I think that will be a great addition.

    On a side note, I received proof from Frank (who left a comment above) that ContentControl3D causes an extremely severe memory leak. Unfortunately, I cannot reproduce this problem, nor can anyone but Frank (which is very disturbing). Someone from the WPF team at Microsoft is going to look into this, so hopefully this strange problem will be solved sooner than later. I really hope that it is not a bug in WPF!!

    Thanks,
    Josh

  12. Abhinandan says:

    Hey Josh,
    Yr 3D panel Simply rocks…
    I have to design a panel which a Listbox will be hosting.My boss is killing me over the design of the panel.The panel is a 3D panoramic view and all my efforts have been in vain.
    I was hoping u cud give me some clue as to how to go ahead with it.
    Please tell me where i can mail u further details.
    Thanks .

  13. Josh Smith says:

    Adhinandan,

    Before you try to roll your own, be sure to check out Pavan Podila’s Element Flow component, which is in FluidKit.

    http://www.codeplex.com/fluidkit

    Josh