Jeff Prosise's Blog

A Touch of Silverlight

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

On May 5 2007 3:00 PMBy jprosise With 10 Comments

Comments (10)

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


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

  3. Hello.
    I don't know if you know it, but at 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.

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


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

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

Leave a Comment