Silverlight图片元素——创建DeepZoom应用程序
在上一篇博文中，我们介绍了Deep Zoom Composer的使用方法，下面我们就来自己做一个简单的图片缩放项目吧!
首先我们来看一下我们所要实现的效果：
现在我们就用到了我们用Deep Zoom Composer工具生成的项目文件了。我们把生成的文件复制到VS2010的Silverlight项目目录中。如果我们使用的是动态生成测试页面，则需要将其复制到\Bin\Debug目录中；如果使用的是测试站点，则需要复制到\ClientBin中。由于Deep Zoom金字塔是以外部资源的形式存在，所以我们不需要添加到项目中。
下面我们需要在XAML文档中添加如下代码：
<Canvas x:Name="LayoutRoot" Background="White">
        <MultiScaleImage x:Name="msi" Width="500" Height="400"
          Source="GeneratedImages/dzc_output.xml"
          MouseMove="msi_MouseMove"
          MouseLeftButtonDown="msi_MouseLeftButtonDown"
          MouseLeftButtonUp="msi_MouseLeftButtonUp"
          MouseLeave="msi_MouseLeave"/>
        <Button Content="恢复" Width="75" Canvas.Left="264" Canvas.Top="378" x:Name="BtnResume" Click="BtnResume_lick"/>
        <Button Content="放大" Width="75" Canvas.Left="0" Canvas.Top="378" x:Name="BtnBig" Click="BtnBig_lick"/>
        <Button Content="缩小" Width="75" Canvas.Left="125" Canvas.Top="378" x:Name="BtnSmail" Click="BtnSmail_lick"/>
    </Canvas>
 
MultiScaleImage对象使用来加载图片金字塔，Source属性设置的是由Deep Zoom Composer生成的集合文件。然后我们添加了3个按钮用于实现恢复，放大，缩小图片的功能。下面我们来看一下隐藏类的代码：
public partial class MainPage : UserControl
    {
        Point lastMouse = new Point();
        double _zoom = 1;
        bool mouseButtonPress = false;
        bool mouseIsDragging = false;
        Point dragOffSet;
        Point currentPosition;
 
        public double ZoomFactor
        {
            get { return _zoom; }
            set { _zoom = value; }
        }
 
        public MainPage()
        {          
            InitializeComponent();
        }
 
        public void Zoom(double zoom, Point pointToZoom)
        {
            Point logicalPoint = this.msi.ElementToLogicalPoint(pointToZoom);
            this.msi.ZoomAboutLogicalPoint(zoom, logicalPoint.X, logicalPoint.Y);
        }
                   //处理鼠标移动事件
        private void msi_MouseMove(object sender, MouseEventArgs e)
        {
            if (mouseButtonPress)
            {
                mouseIsDragging = true;
            }
            //处理非拖拽事件
            if (mouseIsDragging)
            {
                Point newOrigin = new Point();
                newOrigin.X = currentPosition.X - (((e.GetPosition(msi).X - dragOffSet.X) / msi.ActualWidth) * msi.ViewportWidth);
                newOrigin.Y = currentPosition.Y - (((e.GetPosition(msi).Y - dragOffSet.Y) / msi.ActualHeight) * msi.ActualHeight);
                msi.ViewportOrigin = newOrigin;
            }
        }
                   //处理鼠标左键按下事件
        private void msi_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            mouseButtonPress = true;
            mouseIsDragging = false;
            dragOffSet = e.GetPosition(this);
            currentPosition = msi.ViewportOrigin;
        }
                   //处理鼠标左键弹起事件
        private void msi_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            mouseButtonPress = false;
            this.lastMouse = e.GetPosition(this.msi);
            //处理非拖拽事件
            if (mouseIsDragging == false)
            {
                bool shiftDowm = (Keyboard.Modifiers & ModifierKeys.Shift) == ModifierKeys.Shift;
                ZoomFactor = 2.0;
                if (shiftDowm)
                {
                    ZoomFactor = 0.5;
                }
                Zoom(ZoomFactor, this.lastMouse);
            }
            mouseIsDragging = false;
        }
                   //处理鼠标左键离开事件
        private void msi_MouseLeave(object sender, MouseEventArgs e)
        {
            mouseIsDragging = false;
        }
                   //实现图片恢复
        private void BtnResume_lick(object sender, RoutedEventArgs e)
        {
            this.msi.ViewportOrigin = new Point(0, 0);
            this.msi.ViewportWidth = 1;
        }
//实现图片放大
 
        private void BtnBig_lick(object sender, RoutedEventArgs e)
        {
            Zoom(1.2, new Point(this.ActualWidth / 2, this.ActualHeight / 2));
        }
//实现图片缩小
        private void BtnSmail_lick(object sender, RoutedEventArgs e)
        {
            Zoom(0.8, new Point(this.ActualWidth / 2, this.ActualHeight / 2));
        }
    }
 
在这里我们需要添加3个鼠标Click事件方法：BtnResume_lick；BtnBig_lick；BtnSmail_lick，分别代表我们点击恢复，放大，缩小按钮。当我们点击这些按钮时，将会根据当前的逻辑坐标，调用Zoom方法调整缩放。其中Zoom方法第一个参数表示缩放倍数，如果大于1表示放大，小于1表示缩小，第二和第三个参数表示设置图片在MultiScaleImage对象区域中的新位置。点击恢复按钮会把我们的图片显示位置和宽度恢复初始值。
这里我们需要主要一段代码是：
this.lastMouse = e.GetPosition(this.msi);
这句代码用于表示获取鼠标的逻辑位置，并将它作为参数给Zoom（）。如果我们没有写这句话，图片放大的位置始终是对象区域的左上角，而不是我们选择的区域。