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

在本例中,我们采用javascript来操作managed code,关于这个具体是什么样用法我会在以后的silverlight文章中给大家做例子,现在我们先看这个是怎么做出来的
首先我们利用vs2008创建一个silverlight应用程序,命名为silverlightZoom,然后我们page.xml里面放个图片代码如下:
 1用silverlight做了一个小的放大缩小的小demo,共享给大家<UserControl x:Class="silverlightZoom.Page"
 2用silverlight做了一个小的放大缩小的小demo,共享给大家    xmlns="http://schemas.microsoft.com/client/2007" 
 3用silverlight做了一个小的放大缩小的小demo,共享给大家    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
 4用silverlight做了一个小的放大缩小的小demo,共享给大家    Width="400" Height="300">
 5用silverlight做了一个小的放大缩小的小demo,共享给大家    <Canvas>
 6用silverlight做了一个小的放大缩小的小demo,共享给大家
 7用silverlight做了一个小的放大缩小的小demo,共享给大家        <Canvas.RenderTransform>
 8用silverlight做了一个小的放大缩小的小demo,共享给大家
 9用silverlight做了一个小的放大缩小的小demo,共享给大家            <ScaleTransform x:Name="ZoomTransform" />
10用silverlight做了一个小的放大缩小的小demo,共享给大家
11用silverlight做了一个小的放大缩小的小demo,共享给大家        </Canvas.RenderTransform>
12用silverlight做了一个小的放大缩小的小demo,共享给大家        <Image Source="01.jpg" x:Name="img"></Image>
13用silverlight做了一个小的放大缩小的小demo,共享给大家    </Canvas>
14用silverlight做了一个小的放大缩小的小demo,共享给大家
15用silverlight做了一个小的放大缩小的小demo,共享给大家
16用silverlight做了一个小的放大缩小的小demo,共享给大家</UserControl>
下一步我们想增加放大缩小的方法,1.0的时候我们要写javascript,2.0里我们应该怎么做呢。ok,打开page.xmal.cs页面
增加下面的代码:
注意:要加上using System.Windows.Browser;
 1用silverlight做了一个小的放大缩小的小demo,共享给大家   [ScriptableMember()]
 2用silverlight做了一个小的放大缩小的小demo,共享给大家        public void ZoomIn()
 3        }
现在我们已经添加了放大缩小方法,下一步,我们要实现鼠标滚轮的时候图片放大缩小,所以我们要在silverlightZoomTestPage.aspx这个页面增加javascript方法来判断,代码如下:
 1用silverlight做了一个小的放大缩小的小demo,共享给大家  var _control;
 2用silverlight做了一个小的放大缩小的小demo,共享给大家 
 3用silverlight做了一个小的放大缩小的小demo,共享给大家
 4用silverlight做了一个小的放大缩小的小demo,共享给大家function onLoad(sender)
 5用silverlight做了一个小的放大缩小的小demo,共享给大家
 6
接下来再这个js后面增加调用托管代码的javascript方法:
 1用silverlight做了一个小的放大缩小的小demo,共享给大家function OnMouseWheelTurned(event)
 2用silverlight做了一个小的放大缩小的小demo,共享给大家
 3}

下一步,我们要在程序运行的时候把我们前面定义的托管方法注册到js里面,这样在load的时候才能够找到,打开app.xml.cs页面增加下面的代码:
用silverlight做了一个小的放大缩小的小demo,共享给大家 private void Application_Startup(object sender, StartupEventArgs e)
        }
最后我们在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

相关文章: