Introducing ContentControl3D

A couple years ago, Ian Griffiths blogged about a way to create flippable list items in WPF.  His approach involves using a VisualBrush to display the 2D content in 3D space, because he implemented it before Viewport2DVisual3D was introduced in .NET 3.5.  Also, his approach was not very easy to reuse in many applications because the functionality was not placed into a custom control.  Tonight, I decided to remedy this by making use of Viewport2DVisual3D in a reusable control.

The code associated with this post is a working prototype.  I intend on turning this into something more complete, but want to share it with the world as soon as possible, hoping to get some feedback and feature requests early on.

I created a control that derives ContentControl, called ContentControl3D.  It allows you to assign the BackContent property to specify what should be shown after you first flip the control over.  The Content property, inherited from ContentControl, specifies what to display on the front side of the surface.  You can also assign the BackContentTemplate property a DataTemplate, if BackContent is set to a data object (instead of a visual element).

Here is a screenshot of the demo application when it first loads up:

front
After clicking the “Flip Over” button, the UI performs an animated rotation, leaving you with a view of the back side of the surface.  This is shown below…

back
Naturally, you can put whatever content you want on the front and back sides.

Here is the XAML which configures the ContentControl3D in the demo window:

xaml
If you would like to check this control out, you can download the source code here: ContentControl3D Source Code.  NOTE: Be sure to change the file extension from .DOC to .ZIP and then decompress the file.

Your feedback is welcome.  Thanks!

About these ads

17 Responses to Introducing ContentControl3D

  1. myWarez says:

    Hello,

    Very nice control. Thanks for sharing.
    Can i use it on my appplication for Front and back cover ?

    Thanks for your reply.

    Regards

  2. Shahbour says:

    Hello Josh,

    Very nice control and thanks for sharing it.

    I always got a question and didn’t know where to get the answer,when using these 3D effect are we going to use the VGA (VideoCard) processor if it got 3D engine.

    Thanks and great you are bloging again.

  3. sacha says:

    Josh I actually did this exact same thing some time ago in my http://www.codeproject.com/KB/WPF/MyFriends.aspx article.

    For once it seems I pipped you to the post. Of course your wraps this into a nice control.

    Well done

  4. Frank says:

    Hi Josh, i played a little bit with your app. if you click and click and click and flip around enough, a nice out of memory exception fires up.

    btw can i set a control on the backcontent?

  5. Frank says:

    hi josh,
    there is a out of memory exception when you flip around many times.

    btw can i set a control to he backcontent?

  6. Pramod.P.V says:

    Wonderful as Always…
    Though it seems small.. it opens up a whole bag of ideas where i could use it.. I commend the effort you put in for the articles. Thanks..

  7. Josh Smith says:

    @myWarez – Yes, feel free to use this control in your applications.

    @sacha – I knew that you had implemented the 3D flip, but couldn’t remember which of your articles contained it! :)

    @Frank – Thanks for letting me know about the memory exception. I’ll have to look into that! Yes, you can set the BackContent to whatever you want, including a control.

  8. I love this effect :) It would also be good to have a System.Windows.Window based control like Window3D where you can have 3D flippable dialog. I can already use this one though with a transparent and chromeless Window.

    Btw I have flipped your demo project dozens times but didn’t get any OOM exceptions (on Windows XP SP3 & .NET 3.5 SP1)

  9. Josh Smith says:

    Thanks Huseyin! :D

    I was not able to get a memory exception either, though I did notice that there is a very minor memory leak. I’m not sure if it’s my code or WPF, but after flipping the control dozens of times, the app’s memory usage increases and never goes down. I’m going to look into it soon, hopefully it’s a bug in my code!

    Josh

  10. Chris says:

    What a fun control :-) I tried to click it many times but couldn’t get the OOM exception. I did notice that it is creating new animations each and every time it is clicked whether or not the animation length had changed. I don’t see why that would hurt … but, other than that I didn’t see anything obvious. I already have a use for this control :-)
    Chris

  11. Martin says:

    @Hüseyin: This is only possible with a layered window.

    @Josh: Great to have this in a reusable control!

  12. Another thing I’ve seen is that the back side is stretched. One solution is changing the BackContentTemplate to something like this:

    Keep up the awesome work!

    Roberto

  13. (Sorry, XAML didn’t show up in last comment, see http://snipt.org/zkh)

  14. Justin says:

    This is related to your MVVM pattern article and really WPF in general. How do you handle Cancels on an edit page. In your demo app supplied with the article if I add a new customer and click Save it is added to the All Customers List as expected. However, if I then change the First Name on the customer detail view and simply close it (without saving) the first name is updated in the All Customers List. How would you suggest using WPF data binding but also support the ability to cancel changes without leaving other bound UI objects updated. This is a simple question that has bugged me for some time, and although I have gotten around the issue I am not sure I have done it in the best way. I would love to hear your feedback.

    Thanks
    Justin

  15. [...] 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 [...]

Follow

Get every new post delivered to your Inbox.

Join 285 other followers

%d bloggers like this: