As I wrote the Contoso Cookbook app and accompanying labs for Microsoft last winter, I found myself thinking that it would be cool to build another end-to-end Windows Store sample – one that could go beyond the basics and demonstrate fun features and programming techniques that Contoso Cookbook did not. At the same time, I’ve been wanting to carve out time to create a Windows Store app to catalog my comic book collection, which currently comprises more than 1,700 Silver Age comics, mostly DC and Marvel, from the 1960s and early 70s. That way, when I’m shopping on eBay or at a comic convention or something, I can pull out my trusty Surface RT and quickly find out which comics I have, what condition they’re in, and so on.
And so was born MyComix Reader, a Windows Store app that is both of the above: a sample whose source code can be perused by developers, and a tool that I (and others) can use to browse my comic book collection in the cloud. I’ve given the first release a version number of 0.5 since I still have a rather lengthy list of enhancements to make – mostly UX-related – and features to add. But it’s complete enough now that I actually use it at home to sort through comics. It’s called MyComix Reader because it presents a read-only view of my collection, but doesn’t let you add. modify, or delete comics. I have a separate version that does that, but for now I’ll keep that one to myself in case I’ve missed something that would allow a malicious person to trash my comic book database. I do plan to publish the full version eventually, but I want to be sure it’s ready before I do.
If you’d like to give MyComix Reader a try, you can download the Visual Studio 2012 solution containing it and take it for a spin. The first thing you’ll see when it starts up is the main page:
That page hosts a GridView control that has been customized to show variable-sized items and uses a custom item-template selector. (I’ll write about both of those in a future blog post.) The cover images – indeed, all the comic data, which is provided in JSON format – come from a REST service hosted in the cloud, so they may take a few seconds to load. You’ll see them “pop” into view one at a time, thanks to a custom control that hooks Image.ImageOpened events and applies a couple of XAML animations once an image download has completed. Scroll horizontally to view all the different titles in my collection. They’re ordered alphabetically from “80 Page Giant” to “X-Men Annual.” The first comic group – “Latest Additions” – is a phantom group that shows the 25 comics most recently added to the collection. I decided to add this feature so that each time you visit, you can immediately see any new and exciting comics I’ve purchased.
Of course, the main screen supports semantic zoom, so you can zoom out to see each and every title in the collection:
Tap one of the group headers – the titles on the main page – to go to the group-detail page, which uses a custom CoverFlow control when the device is in landscape mode to show all the comics in the group:
You can scroll backward and forward through the titles using a finger, your mouse, or the mousewheel. Tapping the comic in the center takes you to the item-detail page, which shows a detail of the comic, including the year of publication, the grade (1 to 10 using the traditional CGC grading scale, with 10 being mint condition), and any comments I’ve added:
The full cover image is actually larger than what’s shown on the screen, and on a tablet, you can rotate the device to see a higher-res view. (Eventually, I’ll most likely add pinch-zoom support, but I haven’t gotten around to that yet.) Of course, the covers are shown in a FlipView control, so you can scroll sideways to view all the comics in a group. For fun, tap one of the cover images and see what happens. I won’t spoil the surprise. 🙂
Version 0.5 includes support for sharing, snapping, and searching. To try out the search functionality, select the Search charm and type in a comic book title, an artist’s name such as “Kirby” or “Ditko,” or anything else you can think of. The search logic checks the comic book title, issue number, and comments. Here’s how it looked after I searched on the term “torch,” as in Human Torch:
The robustness of the search depends a lot on how diligent I’ve been in annotating each comic with comments, and I’m adding and editing comments every day. Among other things, I’m slowly adding all the story titles to the comments. You might find that a search for “torch” turns up 7 comics today and 10 tomorrow. You never know.
I’ll be updating the solution from time to time and updating the zip file you downloaded, so check back occasionally to download the latest and greatest bits. I’m aware of a few nuances that need to be addressed – for example, the horizontal list of titles on the search-results page can easily extend out of view beyond the right edge of the screen – and will be fixing those even as I add new features. I’m trying to come up with a snazzy background to replace the stark-white background that’s currently there, but want to be sure that it’s subtle enough that it doesn’t take away from the cover images themselves or make the screen look too busy. I’m also planning a Windows Phone 8 version of the app. More soon…in the meantime, enjoy!