用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

11 [ScriptableMember()]

12

13 public void ZoomOut()

14 var _control;

2

3

4function onLoad(sender)

5

6

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

1function OnMouseWheelTurned(event)

2

3 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