If you’re building a Surface or Surface Toolkit application, there’s a pretty good chance that you’re using ScatterView. ScatterView is an ItemsControl, so it’s a great way to show information about a list of objects and allow multiple users to manipulate the objects independently. However you’re usually only showing a small amount of information about the object within a ScatterViewItem — an image thumbnail, or a song title, for example. What would be nice is if you could flip the item over to show more detail.

I’ve needed to do this more than once, and I’m not the only one. The first time was in our Kodak Surface application, and I achieved the affect with some horribly hacky and fake animations. The project I’m currently working on also has a requirement to flip items over, so I decided I’d do it right this time. That’s the real reason I put Plane together. Check it out.

Here is a Visual Studio 2010 project which includes the Plane source as well as examples of flipping ScatterViewItems in Surface and Surface Toolkit projects. You will need the Surface SDK and/or the Surface Toolkit installed to run these samples.

Silverlight has an excellent feature called PlaneProjection which enables basic perspective transforms on any display object. That’s great for Silverlight, but when I’m working with Surface, I’m still using WPF 3.5. If I want to do any kind of 3D transform there I need to use the WPF 3D library, which is very powerful and very scary, especially if all I want to do is rotate a postcard in space. What to do?

There have been a couple of attempts to create a reusable perspective transform in WPF, but I found them both lacking. The main problem I had with existing solutions is that I needed my psuedo-3D element to play perfectly well with the WPF layout system, and I also needed my text to look perfect when the object was not rotated at some strange angle. So I started with those examples, and along with some help from David Teitlebaum and my co-worker Joel Pryde, created a class simply called “Plane”.

In addition to the features illustrated in the test application, Plane lets you specify differently-sized content for the front and back sides, renders content in regular 2D when rotated to an angle parallel to the display, and has no trouble existing in the same layout with regular 2D objects.

Click the image above to download a Visual Studio 2010 project with the full source. I’ll be posting an example of it in a real application soon.