Zoom or doom?

Once this is done, point a browser that supports Silverlight to the HTML file generated in your project, which will be called something like “myprojectnameTestPage.html”, and your composite image will appear if Silverlight is installed. If not, it will prompt you to install it, you’ll have to restart your browser (very annoying, that), and then you should be able to zoom in and out of your image with the mouse wheel and drag it around with the left button. That’s fine as far it goes, but you could do so much more: this is a Silverlight application with all sorts of wonderful graphical effects available, so let’s have a go. Rather than just covering the code basics, I’ll also explain how to add graphical fills to objects.

Into the XAML

To develop a Silverlight application you need to edit XAML, and the two main Microsoft ways of doing this are via Expression Blend and Visual Studio 2008. I also discovered another tool at the NxtGen Fest 08 (did I mention the free pizza?) called Kaxaml, which is a free download from www.kaxaml.com. Its developer Robby Ingebretsen has done an excellent job of creating a lightweight XAML development environment with immediate preview capabilities. It’s no substitute for Visual Studio, but I find it great for instantly testing bits of code.

But back to the Microsoft tools. Ideally, you’ll need Visual Studio 2008 with SP1 and Silverlight Tools Beta 2 for Visual Studio, which will give you full intellisense for coding and also full debugging capabilities for your Silverlight application. However, as mentioned above, you currently can’t use the Visual Studio design panel to design Silverlight applications. For this you need Expression Blend (the current version is 2.5 June 2008 Preview). Download this, run it and when it asks you which project you want, navigate to your previously created Deep Zoom project. The project files are compatible between Blend and Visual Studio 2008, so you can switch between them at will. Edit the XAML directly in Blend or use the graphical design tools to build your application, but when it comes to adding code you need Visual Studio.

With your Deep Zoom project open in Blend, the design panel will display an unexciting white box. I thought it would be fun to use an elliptical “porthole” to view the images, so select the rectangle tool and draw a box over the whole area (don’t worry about getting it just right, as you can resize it later). You’ll find it easier to see what you’re doing if you select a fill colour for this rectangle. Now you have an unexciting black box, so not much improvement yet. Select the ellipse tool and drag an ellipse across the middle of your black box to roughly the right size: holding down the Shift key, drag the selection so both ellipse and black box are selected. Go to the Edit | Combine menu, choose Subtract and, lo and behold, an elliptical “hole” will appear in your black box.

It would be good at this point to preview your magnificent work so far. In theory, selecting “Test application” should open a browser and display your application, but I found this preview didn’t always work for some reason (beta software I suspect). A more reliable way to test is to select “Build project” and point your browser to the HTML file that Deep Zoom Composer generated when it produced the Silverlight application. So far, so good, but we want it to look nicer than that.

Finishing touches