Silverlight 2 手把手(之一) Deep Zoom

Silverlight 2 手把手(之一) Deep Zoom

下面的例子介紹了如何利用一刻鐘的時間快速實現一個 Deep Zoom 應用，供您參考。

1. 啟動 Deep Zoom Composer 預覽版

2. 使用 Deep Zoom Composer 建立 SDI（Sea Dragon Index） 檔案集

選取使用照片

布置照片

輸出 SDI 檔案

輸出結果

3. 使用 Visual Studio 2008 建立 Silverlight 網站應用程式

如果你沒有安裝 Silverlight 2 beta1 的外掛程式，可以到這裡下載。

4. 添加 SDI　檔案集到 ClientBin 目錄下

5. 使用 <MultiScaleImage> 引用 info.bin

<MultiScaleImage x:Name="DeepZoomCan" Source="[yourfolder]/info.bin" Height="294" Width="456" Canvas.Left="68" Canvas.Top="51" />

在 Page.xaml 中使用 MultiScaleImage 標籤引用 DZC 打包產生的編譯檔案 info.bin

6. 編譯，預覽

7. 輸入使用者提示資訊

您可以在 Expression Blend 2.5 3月預覽版中調整文字的位置和大小，您也可以使用 VS2008，使用 <TextBlock /> 標籤，調整文字資訊。

8. 添加滑鼠鍵盤響應事件

在 Page.xaml.cs 中加入對滑鼠和鍵盤的事件響應，代碼如下：

   1: namespace DeepZoomTest1

   2: {

   3:     public partial class Page : UserControl

   4:     {

   5:         Point mousePosition = new Point();

   6:  

   7:         public Page()

   8:         {

   9:             InitializeComponent();

  10:             InitializeMouseEvent();

  11:         }

  12:  

  13:         private void InitializeMouseEvent()

  14:         {

  15:             this.MouseMove += new MouseEventHandler(Page_MouseMove);

  16:             this.KeyDown += new KeyEventHandler(Page_KeyDown);

  17:         }

  18:  

  19:         void Page_KeyDown(object sender, KeyEventArgs e)

  20:         {

  21:  

  22:             if (e.Key == Key.W)

  23:             {

  24:                 Zoom(1.2f, mousePosition);

  25:  

  26:             }

  27:  

  28:             else if (e.Key == Key.X)

  29:             {

  30:                 Zoom(0.8f, mousePosition);

  31:             }

  32:             else

  33:             {

  34:                 HtmlPage.Window.Alert("請輸入 W 或者 X 進行縮放!");

  35:             }

  36:         }

  37:  

  38:         void Page_MouseMove(object sender, MouseEventArgs e)

  39:         {

  40:             mousePosition = e.GetPosition(this);

  41:         }

  42:         public void Zoom(double zoom, Point pointToZoom)

  43:         {

  44:             Point logicalPoint = this.DeepZoomCan.ElementToLogicalPoint(pointToZoom);

  45:             this.DeepZoomCan.ZoomAboutLogicalPoint(zoom, logicalPoint.X, logicalPoint.Y);

  46:         }

  47:     }

  48: }

9. 添加對使用者提示的 Alert 事件

Silverlight 2 中原生支援了對頁面中的 DOM 調用！！！為了給使用者更多的提示，在 Silverlight 2 中你可以添加以下鍵盤事件的判斷，給使用者更好的提示：

   1: else

   2: {

   3:     HtmlPage.Window.Alert("請輸入"W"或者"X"進行縮放!");

   4: }

注意：你需要在 Silverlight 2 項目的預設引用中添加如下 namespace 的引用

   1: using System.Windows.Browser;

10. 最終效果

你可以到下面地址下載項目的源檔案：

 

更多參考部落格：

Expression 產品組部落格

Dan Waters 的部落格

Published 30 March 08 11:17 by jijia Filed under: Silverlight