製作Silverlight的Deep Zoom網頁動畫效果(二)

在上一篇製作Silverlight的Deep Zoom網頁動畫效果(一)裡，我們學習到了不需要寫程式，也可以產生Deep Zoom放大縮小的特效，但若此特效只想要在Expression Blend裡設計的部分區域使用，則可以參考本篇文章，順便也可以藉此了解一下，如何參照額外的.dll檔來進行擴增，以快速加入某些新功能。

請先到Expression gallery 下載 DeepZoom Touch & Mouse這外掛的行為(Behavior)檔案，網址在http://gallery.expression.microsoft.com/DeepZoomTouch/，點選位於右下角的「DOWNLOAD BEHAVIOR」鈕，下載DeepZoomTouch.zip檔案到您的電腦裡。

 

完成下載後，記得將檔案解壓縮，會看到產生的目錄裡有一個DeepZoomTouch.dll，請記得此檔所在位置。

 

開啟Expression Blend，在功能表上選擇「檔案 / 新增專案」。

選擇「Silverlight / Silverlight 應用程式+網站」，給予名稱與資料夾位置後，語言選擇C#，版本選擇4.0，按下「確定」鈕。

 

請先到「專案」裡，在此專案名稱下的「參照」上，按下滑鼠右鍵選擇「新增參照」。

 

將位置選擇到之前我們下載並解壓縮後的DeepZoomTouch.dll後，按下「開啟舊檔」鈕。

加入參照後，需要執行功能表上的「專案 / 重建專案」。

此時再回到「專案」區裡，就可以看到產生了一個「ClientBin」的資料夾，請在此資料夾上按下滑鼠右鍵，選擇「在Windows檔案總管中開啟資料夾」。

請另外開一個檔案總管，把在上一篇文章裡，使用Deep Zoom Composer產生的檔案(兩個資料夾與一個.xml)進行複製。

將資料複製到剛才在Expression Blend裡，「在Windows檔案總管中開啟資料夾」所打開的資料夾下。

完成後請回到Expression Blend，在「專案」裡「ClientBin」的資料夾上，按下滑鼠右鍵，選擇「重新整理資料夾」。

就可以看到剛剛複製過去的資料。

接著請在「資產 / 位置」裡，挑選「MultiScaleImage」物件，並將此物件使用滑鼠拖曳到「物件與時間軸」裡的「LayoutRoot」下面。

如此「LayoutRoot」下就會顯示出「MultiScaleImage」物件。

維持點選「MultiScaleImage」物件的狀態，在「屬性 / 一般屬性」裡的「Source」按下「選擇影像」鈕。

挑選dzc_output.xml，就可以看到MultiScaleImage物件裡已經有顯示圖片了，您可以再使用工具箱上的「選取」工具，將MultiScaleImage物件移到適當位置以及調整大小。

完成後的MultiScaleImage物件，目前仍是無法支援使用滑鼠滾輪變大變小的DeepZoom效果，還需要到「資產 / 位置 / DeepZoomTouch.dll」裡，將DeepZoomMouse物件拖曳到MultiScaleImage物件下。

完成上述步驟後，請選擇功能表上的「專案 / 執行專案」，到瀏覽器上看一下效果吧！確實可以完成一個局部區域影像的DeepZoom效果，在上面使用滑鼠滾輪，確實可以達成放大縮小的動畫特效。