Coding4Fun Blog

Jeff takes off the cover of his CoverFlow Control for Windows 8 & Windows RT

Description

Today's Modern Monday post is from one of the great guys at Wintellect, Jeff Prosise. He's sharing a coverflow control with us, helping us build our own cool looking app's and also showing how a Silverlight control can be ported to WindowsRT

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....

...

image

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. Smiley

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:...

Here's a snap of the Solution;

image

The sample compiled and ran for me the first time, and it works just as advertised. 

In his post he shows how easily you can use it in your project. Here's a XAML snip from the sample app included in the download.

image

And the code used to populate it;

image

In short, it looks very simple and easy to add and us this in our app's today.

Also make sure you check out Jeff's Introducing MyComix Reader, Version 0.5 where he shows off this control and a good deal more (all with source too). I'll be watching this project and it's very likely to get it's own post here in the future... Smiley

The Discussion

  • CalvinDale2

    The control is quite jittery/jerky when dragging left or right with a finger on my system.  23" Acer touchscreen, Asus i7 Essentio.

Comments closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums, or Contact Us and let us know.