Jeff takes off the cover of his CoverFlow Control for Windows 8 & Windows RT
- Posted: Dec 10, 2012 at 6:00AM
- 7,007 views
- 1 comment
Loading user information from Channel 9
Something went wrong getting user information from Channel 9
Loading user information from MSDN
Something went wrong getting user information from MSDN
Loading Visual Studio Achievements
Something went wrong getting the Visual Studio Achievements
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 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....
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:...
Here's a snap of the Solution;
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.
And the code used to populate it;
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...