A CoverFlow Control for Windows 8 and Your Surface RT

A few years ago, I needed a CoverFlow control for a Silverlight project I was working on. Since Silverlight didn’t include a CoverFlow control, I did a little searching and found an open-source XAML CoverFlow control on CodePlex. So I downloaded the code, tweaked it a bit, and quickly had a control with the basic functionality I needed for my project.

Fast forward to this week. I needed a CoverFlow control again, this time for a Windows Store app that I’m building. (Called MyComix, it lets you browse my comic book collection stored in the cloud, and it demonstrates a lot of cool programming techniques and best practices for Windows Store developers. I’ll publish it soon.) So I pulled up the source code I downloaded from CodePlex many years ago, dropped it into a Windows Store class library project, and began porting it over to the new environment. A few hours later, I was done. Here’s what the control looks like running in a demonstration project:

Doing the port was relatively easy. I had to change a few .NET types to WinRT types (for example, IEasingFunction to EasingFunctionBase). I had to remove an OpacityMask from Generic.xaml since Windows 8 doesn’t support OpacityMask, and I had to convert code for mouse events into pointer events. I also added gesture support to the control using Tapped events and Manipulation events, and I added mousewheel support while I was at it. I’m still tweaking the gesture code to make it feel as natural as possible (especially on touch screens), but it’s pretty close right now – close enough for me to publish the sample so you can let me know what you think.

Start by downloading the Visual Studio solution containing the demo project (CoverFlowDemo) and the control project (CoverFlowControl). Make sure you have an Internet connection since the comic book covers come down over HTTP, and then fire up CoverFlowDemo. You’ll see a screen similar to the one above, and you can cycle through the comics by swiping horizontally, tapping or clicking any comic other than the one in the center, or rolling the mousewheel while the cursor’s over the control. I really do own all those comics, BTW, except for Fantastic Four #1, which I once owned but no longer do. I couldn’t resist leaving it in the database just so people would ask about it. 🙂

How hard was it to use the CoverFlow control once I imported it into my project? Not difficult at all. Here’s the XAML that declares a control instance and templates the data items:

<controls:CoverFlow x:Name="CoverFlowControl" Height="400">
    <controls:CoverFlow.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}" Height="400" />                    
        </DataTemplate>
    </controls:CoverFlow.ItemTemplate>            
</controls:CoverFlow>

And here’s the code that initializes the data source (a collection of image URLs) and binds it to the CoverFlow control:

var comics = new ObservableCollection<string>();

foreach (string id in _ids)
    comics.Add("http://wintellect-demo.com/services/mycomix.svc/cover240/" + id);

CoverFlowControl.ItemsSource = comics;

Couldn’t be much simpler than that! Keep in mind that I still have work to do on the CoverFlow control, doing a general code cleanup and adding dependency properties to make it more configurable, among other things. But don’t let that stop you from trying it out. Let me know if you have suggestions for improving the feel and response – for example, does it scroll too quickly or too slowly when you drag your finger across it on a touch screen? Are there other interactions it should support? All feedback welcome.