Find an image in your collection that will do for the background for your Deep Zoom viewer, as we shall call this application – perhaps some sort of texture? This isn’t quite a case of drag-and-drop, but it isn’t difficult once you know how. Use Project | Add Existing Item and navigate to this image, which will add the image to your project. Next, drag the image to your design area, preferably somewhere away from your main design. Now create an ImageBrush Resource from this image by selecting Tools | Make Brush Resource | Make ImageBrush Resource. Once you’ve done this, you can select your black box with a hole in it, and Brush Resource from the Brushes panel and voila! Your boring box still has its elliptical hole but it’s no longer black and has a nice graphic applied to it. It’s starting to look a little better now.
One of the reasons for developing an application in Silverlight could well be the ease of achieving animations, so I thought it would be rather cool to have some rotating cogs as you zoom in or out with the mouse wheel. The principle here is to wire up the angle property of the cog image to the Zoom function, so first we need a suitable image. Because my image of a cogwheel had spokes, I needed a transparent image for the background to show through. My first choice would be a transparent GIF, but for the fact that Expression Blend doesn’t support them (aargh!). After a little experimentation I found that PNGs worked as well.
The next step is to enable RotateTransform on the object, which is done in the XAML code of your Silverlight application, within the Image tag:
I’ve also given the RotateTransform for that image a unique name, TCog1, which will make it easier to access from my code. Now in the page.xaml.cs code page, add the following lines to the function that handles the zoom. In the code generated by the Deep Zoom Composer, look for “public void Zoom(double zoom, Point pointToZoom )” and add:
if (ZoomFactor >= 1.2)
{
TCog1.Angle = TCog1.Angle – 12
}
else
{
TCog1.Angle = TCog1.Angle + 12;
}
The “else” clause is there so that the cog rotates in a different direction depending on whether you’re zooming in or out. Job done! If you want to take a look at my work, you can do so at www.ecats.co.uk/wbfphotos.
As you can see, getting a basic Deep Zoom application to work is no longer difficult, and the rest is up to your creative design abilities. So why did it take me so long? Well apart from the development tools crashing, and the fun of finding out how to achieve the rotation, there are several nice little bugs that will no doubt trip you up along the way! Take, for example, setting the origin for the rotation. For a circular object the obvious point of rotation is its centre, which would reasonably be defined as 0,0. Not in Blend it isn’t. An origin of 0,0 causes the whole object to fly around your background tracing a large arc, which is hardly optimal. However, setting the origin to 0.5,0.5 works fine, although with its centre a bit off-centre the cog looks a little wobbly. Just one of the many ways that developing with beta products makes your life that little bit more interesting!
Disclaimer: Some pages on this site may include an affiliate link. This does not effect our editorial in any way.
