用silverlight做了一个小的放大缩小的小demo，共享给大家

          我们在看很多silverlight的showcase的时候有很多放大缩小的例子，在1.0的时候都是用js来操作，silverlight2.0出来以后，我们可以用managed code 来操作.

在本例中，我们采用javascript来操作managed code,关于这个具体是什么样用法我会在以后的silverlight文章中给大家做例子，现在我们先看这个是怎么做出来的
首先我们利用vs2008创建一个silverlight应用程序，命名为 silverlightZoom，然后我们page.xml里面放个图片代码如下：

 1 < UserControl  x:Class ="silverlightZoom.Page"
 2     xmlns ="http://schemas.microsoft.com/client/2007"  
 3     xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"  
 4     Width ="400"  Height ="300" >
 5      < Canvas >
 6
 7          < Canvas.RenderTransform >
 8
 9              < ScaleTransform  x:Name ="ZoomTransform"   />
10
11          </ Canvas.RenderTransform >
12          < Image  Source ="01.jpg"  x:Name ="img" ></ Image >
13      </ Canvas >
14
15
16 </ UserControl >

下一步我们想增加放大缩小的方法，1.0的时候我们要写javascript,2.0里我们应该怎么做呢。ok，打开page.xmal.cs页面
增加下面的代码：
注意：要加上 using System.Windows.Browser;

 1    [ScriptableMember()]
 2          public   void  ZoomIn()
 3          {
 4
 5            ZoomTransform.ScaleX += 0.1;
 6
 7            ZoomTransform.ScaleY += 0.1;
 8
 9        }
10
11         [ScriptableMember()]
12
13          public   void  ZoomOut()
14          {
15
16            ZoomTransform.ScaleX -= 0.1;
17
18            ZoomTransform.ScaleY -= 0.1;
19
20        }

现在我们已经添加了放大缩小方法，下一步，我们要实现鼠标滚轮的时候图片放大缩小，所以我们要在 silverlightZoomTestPage.aspx这个页面增加javascript方法来判断，代码如下：

 1    var  _control;
 2  
 3
 4 function  onLoad(sender)
 5
 6 {
 7
 8    _control =sender.get_element();
 9
10    if (window.addEventListener)
11
12        window.addEventListener('DOMMouseScroll',
13
14            OnMouseWheelTurned, false);
15
16    window.onmousewheel = document.onmousewheel =
17
18        OnMouseWheelTurned;
19
20}
21
22

接下来再这个js后面增加调用托管代码的javascript方法：

 1 function  OnMouseWheelTurned(event)
 2
 3 {
 4
 5    var delta = 0;
 6
 7    if (!event)
 8
 9        event = window.event;
10
11 
12
13    if (event.wheelDelta)
14
15    {
16
17        delta = event.wheelDelta;
18
19        if (window.opera)
20
21            delta = -delta;
22
23    }
24
25    else if (event.detail)
26
27        delta = -event.detail;
28
29 
30
31    if (delta)
32
33    {
34
35        if (delta > 0)
36
37            _control.content.magic.ZoomIn();
38
39        else
40
41            _control.content.magic.ZoomOut();
42
43    }
44
45 
46
47    if (event.preventDefault)
48
49        event.preventDefault();
50
51    event.returnValue = false;
52
53}

下一步，我们要在程序运行的时候把我们前面定义的托管方法注册到js里面，这样在load的时候才能够找到，打开app.xml.cs页面增加下面的代码：

  private   void  Application_Startup( object  sender, StartupEventArgs e)
         {
            // Load the main control
            this.RootVisual = new Page();
            HtmlPage.RegisterScriptableObject("magic", RootVisual);

        }

最后我们在aspx页面的plugin里面增加onpluginloaded方法如下：

    < div   style ="height:100%;" >
             < asp:Silverlight  ID ="Xaml1"  OnPluginLoaded ="onLoad"  runat ="server"  Source ="~/ClientBin/silverlightZoom.xap"  Version ="2.0"  Width ="100%"  Height ="100%"   />
         </ div >

好了，f5运行一下看看吧，呵呵
代码下载地址： www.crfly.com/ silverlightZoom.rar