Deepzoom是silverlight2.0的新特性之一,通过它,用户可以无限放大图片以浏览清晰的图片。以下就通过一个简单的实例来实现一个deepzoom应用。
首先启动Deep Zoom Composer (这个东西最近刚更新,给出的下载地址是最新版本的,界面可能会和下面的图有点不同但功能都是一样的):

新建一个project,然后输入project名字

接下来就可以看到如下的界面

然后选择Add image,把图片文件导入到project中。

然后选择上方的Compose,把图片按照你想的方式排列好。这个时候在下方可以看到这样一条工具栏:

从第5个图标开始就是内建的一些排列方式,有向左或右对齐、水平或垂直对齐等等。比如这次我就做了类似于九宫格的排列方式:

然后就可以导出了:

导出后即得到如下SDI文件:

至此,deep zoom应用的图片源文件就制作完成了,下面就是设计和coding部分了。
启动visual studio 2008,新建silverlight工程。然后复制如上的SDI文件粘贴到Clientbin文件夹下:

之后在page.xml使用<MultiScaleImage>应用文件中的info.bin文件
<MultiScaleImage Source=”ws2008/info.bin” Height=”440″ x:Name=”ws2008rtm” Width=”600″ Canvas.Left=”20″ Canvas.Top=”20″ Grid.Row=”0″ Grid.RowSpan=”6″ Grid.Column=”0″ Grid.ColumnSpan=”3″/>
之后可以编辑page.xml.cs,加入一些鼠标事件,比如拖动阿、使用滚轮放大缩小等等。
部分源代码如下,本来想上传到skydrive上的,但是最近国内电信访问不了,需要完整的可以发e-mail给我,[email protected]:
这里用到了MouseWheelHelper类,以下为部分MouseWheelHelper类的源代码,需要的依然可以给我mail。

按f5进行调试并预览:

至此,一个简单的deep zoom应用做完了,需要完整solution的可以发e-mail给我: [email protected] 。
Continue reading “Deepzoom教程”