A Touch of Silverlight

10 Comments May 5, 2007

I've been playing with the Silverlight bits Microsoft published last week and am having a blast. I just finished adding a Silverlight viewer to MyComix. To check it out, go to http://mycomix.wintellect.com and click a comic book cover. (Make sure you're in thumbnail view, because I only have the Silverlight viewer wired into that view.) You should see a window similar to this one:

Silverlight Viewer 

Now here's the cool part. Drag the mouse over the comic book cover with the left button held down and watch what happens. :-)

The viewer uses the Silverlight 1.0 beta. If you don't have the beta installed, you'll see a "Get Silverlight" graphic in place of the cover image. Click the graphic to download and install the Silverlight 1.0 beta. Then you should be able to view comics just fine.

Because the viewer is written to Silverlight 1.0, it uses the Silverlight plug-in's JavaScript API. My next task is to rewrite the viewer using the Silverlight 1.1 alpha so I can replace the JavaScript with C#. I'll post a note in this blog when the C# version is available.

One of the more interesting aspects of the code is how it downloads the cover images. I use Silverlight's downloader object to simultaneously (and asynchronously) download the front cover image and the back cover image. A DownloadProgressChanged event handler displays a progress bar that updates as the downloads progress. I decided to use the downloader object for two reasons. One, it's more efficient, because I can download an image once and assign it to two XAML objects (the main cover image and the reflected cover image). Two, if the downloads don't happen quickly, the progress bar prevents the user from having to stare at a blank window and wonder what's going on.

Another interesting aspect of the code is how I combine a ScaleTransform and a SkewTransform to create a 3D effect when you rotate a comic. It's just an illusion since Silverlight lacks WPF's 3D support, but it's a pretty effective illusion. See the JavaScript Rotate() function to learn how it works.

As an aside, note that the back covers you see aren't the comics' real back covers. I currently don't have scans of all the back covers in the database, so I scanned a handful of them and wrote the viewer to use them in place of actual back cover images. Also, in this refresh of MyComix, I fixed a CSS bug that affected Firefox browsers.

Here are links to some of the comics I've added to my collection in recent weeks (displayed in the Silverlight viewer, of course):

Finally, here's a helpful note to folks who are planning to use Silverlight to publish content on their Web servers. I built and tested the app in Visual Studio 2005 using the built-in ASP.NET Development Server. It worked fine there, but when I posted it on Wintellect's Web server, Spotlight.aspx showed nothing but a black background. After some head scratching, I realized that I needed to add a new MIME type to the application in IIS: application/xaml+xml. Once I did that, the viewer worked fine in IIS, too.


10 Comments

  • Gravatar Image
    mike May 6, 2007 5:14 AM

    Very nice !!!

    I noticed though that there was no way to zoom in to see a bigger version - as it was not an image I could not even zoom the image.

    Unlike flash - there is no inbuilt zoom - or is there ???

    Mike

  • Gravatar Image
    jprosise May 6, 2007 7:21 AM

    It's easy to add a zoom feature using a ScaleTransform. In fact, I was thinking about doing that. I wanted to couple zoom to the mouse wheel, but in the beta, there is no mouse wheel support. Microsoft is considering adding mouse wheel support. In the meantime, maybe I'll add a zoom slider instead.

  • Gravatar Image
    gerard1234 May 21, 2007 2:55 AM

    Hello.
    I don't know if you know it, but at http://silverlight.net/community/gallerydetail.aspx?cat=1&sort=1#vid46 example: Silverlight Pad
    you've got the opportunity to scrol with your mouse.
    ps: sometime the example won't work by me. hope it works fine by you.
    bye

  • Gravatar Image
    Mike Harsh's Blog May 22, 2007 11:09 AM

    Jeff has been working to build an ASP.NET 2.0 sample app to search and index comic books called MyComix.

  • Gravatar Image
    Matt Hamilton May 22, 2007 7:47 PM

    Jeff,

    Give me a rundown of your file format and I'll make an exporter for Comicster so that my users can publish their collections to the web using MyComix!

    http://www.comicster.net

    Cheers,
    Matt

  • Gravatar Image
    jprosise May 22, 2007 10:12 PM

    There is no file format, Matt. All the data is stored in a back-end SQL Server database. It could be converted to use files if someone is interested enough to do it. I'd be happy to share the database schema; it's very simple.

  • Gravatar Image
    Matt Hamilton June 12, 2007 8:34 PM

    Ah ok.

    Well, if you ever decide to code an "upload" or "import" feature ... maybe accept an XML file or something ... let me know.

  • Gravatar Image
    Mirrored Blogs February 20, 2008 2:53 AM

    Jeff has been working to build an ASP.NET 2.0 sample app to search and index comic books called MyComix

  • Gravatar Image
    shamanyy July 20, 2009 5:24 AM

    In fact, I noticed though that there was no way to zoom in to see a bigger version - as it was not an image I could not even zoom the image. Is it right?

  • Gravatar Image
    Microsoft Weblogs May 22, 2012 6:39 PM

    Jeff has been working to build an ASP.NET 2.0 sample app to search and index comic books called MyComix

Have a Comment?

Archives

Tags