Silverlight 2 手把手(之一) Deep Zoom

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. 最终效果