我们在看很多silverlight的showcase的时候有很多放大缩小的例子,在1.0的时候都是用js来操作,silverlight2.0出来以后,我们可以用managed code 来操作.
在本例中,我们采用javascript来操作managed code,关于这个具体是什么样用法我会在以后的silverlight文章中给大家做例子,现在我们先看这个是怎么做出来的
首先我们利用vs2008创建一个silverlight应用程序,命名为silverlightZoom,然后我们page.xml里面放个图片代码如下:
增加下面的代码:
注意:要加上using System.Windows.Browser;
下一步,我们要在程序运行的时候把我们前面定义的托管方法注册到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);
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
}
最后我们在aspx页面的plugin里面增加onpluginloaded方法如下:
好了,f5运行一下看看吧,呵呵
代码下载地址:www.crfly.com/silverlightZoom.rar
在本例中,我们采用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![](/Images/OutliningIndicators/None.gif)
7
<Canvas.RenderTransform>
8![](/Images/OutliningIndicators/None.gif)
9
<ScaleTransform x:Name="ZoomTransform" />
10![](/Images/OutliningIndicators/None.gif)
11
</Canvas.RenderTransform>
12
<Image Source="01.jpg" x:Name="img"></Image>
13
</Canvas>
14![](/Images/OutliningIndicators/None.gif)
15![](/Images/OutliningIndicators/None.gif)
16
</UserControl>
下一步我们想增加放大缩小的方法,1.0的时候我们要写javascript,2.0里我们应该怎么做呢。ok,打开page.xmal.cs页面![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/None.gif)
4
![](/Images/OutliningIndicators/None.gif)
5
![](/Images/OutliningIndicators/None.gif)
6
![](/Images/OutliningIndicators/None.gif)
7
![](/Images/OutliningIndicators/None.gif)
8
![](/Images/OutliningIndicators/None.gif)
9
![](/Images/OutliningIndicators/None.gif)
10
![](/Images/OutliningIndicators/None.gif)
11
![](/Images/OutliningIndicators/None.gif)
12
![](/Images/OutliningIndicators/None.gif)
13
![](/Images/OutliningIndicators/None.gif)
14
![](/Images/OutliningIndicators/None.gif)
15
![](/Images/OutliningIndicators/None.gif)
16
![](/Images/OutliningIndicators/None.gif)
增加下面的代码:
注意:要加上using System.Windows.Browser;
1
[ScriptableMember()]
2
public void ZoomIn()
3
{
4![](/Images/OutliningIndicators/InBlock.gif)
5
ZoomTransform.ScaleX += 0.1;
6![](/Images/OutliningIndicators/InBlock.gif)
7
ZoomTransform.ScaleY += 0.1;
8![](/Images/OutliningIndicators/InBlock.gif)
9
}
10![](/Images/OutliningIndicators/None.gif)
11
[ScriptableMember()]
12![](/Images/OutliningIndicators/None.gif)
13
public void ZoomOut()
14
{
15![](/Images/OutliningIndicators/InBlock.gif)
16
ZoomTransform.ScaleX -= 0.1;
17![](/Images/OutliningIndicators/InBlock.gif)
18
ZoomTransform.ScaleY -= 0.1;
19![](/Images/OutliningIndicators/InBlock.gif)
20
}
现在我们已经添加了放大缩小方法,下一步,我们要实现鼠标滚轮的时候图片放大缩小,所以我们要在silverlightZoomTestPage.aspx这个页面增加javascript方法来判断,代码如下:![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
4
![](/Images/OutliningIndicators/InBlock.gif)
5
![](/Images/OutliningIndicators/InBlock.gif)
6
![](/Images/OutliningIndicators/InBlock.gif)
7
![](/Images/OutliningIndicators/InBlock.gif)
8
![](/Images/OutliningIndicators/InBlock.gif)
9
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
10
![](/Images/OutliningIndicators/None.gif)
11
![](/Images/OutliningIndicators/None.gif)
12
![](/Images/OutliningIndicators/None.gif)
13
![](/Images/OutliningIndicators/None.gif)
14
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
15
![](/Images/OutliningIndicators/InBlock.gif)
16
![](/Images/OutliningIndicators/InBlock.gif)
17
![](/Images/OutliningIndicators/InBlock.gif)
18
![](/Images/OutliningIndicators/InBlock.gif)
19
![](/Images/OutliningIndicators/InBlock.gif)
20
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
1
var _control;
2
3![](/Images/OutliningIndicators/None.gif)
4
function onLoad(sender)
5![](/Images/OutliningIndicators/None.gif)
6
{
7![](/Images/OutliningIndicators/InBlock.gif)
8
_control =sender.get_element();
9![](/Images/OutliningIndicators/InBlock.gif)
10
if (window.addEventListener)
11![](/Images/OutliningIndicators/InBlock.gif)
12
window.addEventListener('DOMMouseScroll',
13![](/Images/OutliningIndicators/InBlock.gif)
14
OnMouseWheelTurned, false);
15![](/Images/OutliningIndicators/InBlock.gif)
16
window.onmousewheel = document.onmousewheel =
17![](/Images/OutliningIndicators/InBlock.gif)
18
OnMouseWheelTurned;
19![](/Images/OutliningIndicators/InBlock.gif)
20
}
21![](/Images/OutliningIndicators/None.gif)
22![](/Images/OutliningIndicators/None.gif)
接下来再这个js后面增加调用托管代码的javascript方法:![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/None.gif)
4
![](/Images/OutliningIndicators/None.gif)
5
![](/Images/OutliningIndicators/None.gif)
6
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
7
![](/Images/OutliningIndicators/InBlock.gif)
8
![](/Images/OutliningIndicators/InBlock.gif)
9
![](/Images/OutliningIndicators/InBlock.gif)
10
![](/Images/OutliningIndicators/InBlock.gif)
11
![](/Images/OutliningIndicators/InBlock.gif)
12
![](/Images/OutliningIndicators/InBlock.gif)
13
![](/Images/OutliningIndicators/InBlock.gif)
14
![](/Images/OutliningIndicators/InBlock.gif)
15
![](/Images/OutliningIndicators/InBlock.gif)
16
![](/Images/OutliningIndicators/InBlock.gif)
17
![](/Images/OutliningIndicators/InBlock.gif)
18
![](/Images/OutliningIndicators/InBlock.gif)
19
![](/Images/OutliningIndicators/InBlock.gif)
20
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
21
![](/Images/OutliningIndicators/None.gif)
22
![](/Images/OutliningIndicators/None.gif)
1
function OnMouseWheelTurned(event)
2![](/Images/OutliningIndicators/None.gif)
3
{
4![](/Images/OutliningIndicators/InBlock.gif)
5
var delta = 0;
6![](/Images/OutliningIndicators/InBlock.gif)
7
if (!event)
8![](/Images/OutliningIndicators/InBlock.gif)
9
event = window.event;
10![](/Images/OutliningIndicators/InBlock.gif)
11
12![](/Images/OutliningIndicators/InBlock.gif)
13
if (event.wheelDelta)
14![](/Images/OutliningIndicators/InBlock.gif)
15
{
16![](/Images/OutliningIndicators/InBlock.gif)
17
delta = event.wheelDelta;
18![](/Images/OutliningIndicators/InBlock.gif)
19
if (window.opera)
20![](/Images/OutliningIndicators/InBlock.gif)
21
delta = -delta;
22![](/Images/OutliningIndicators/InBlock.gif)
23
}
24![](/Images/OutliningIndicators/InBlock.gif)
25
else if (event.detail)
26![](/Images/OutliningIndicators/InBlock.gif)
27
delta = -event.detail;
28![](/Images/OutliningIndicators/InBlock.gif)
29
30![](/Images/OutliningIndicators/InBlock.gif)
31
if (delta)
32![](/Images/OutliningIndicators/InBlock.gif)
33
{
34![](/Images/OutliningIndicators/InBlock.gif)
35
if (delta > 0)
36![](/Images/OutliningIndicators/InBlock.gif)
37
_control.content.magic.ZoomIn();
38![](/Images/OutliningIndicators/InBlock.gif)
39
else
40![](/Images/OutliningIndicators/InBlock.gif)
41
_control.content.magic.ZoomOut();
42![](/Images/OutliningIndicators/InBlock.gif)
43
}
44![](/Images/OutliningIndicators/InBlock.gif)
45
46![](/Images/OutliningIndicators/InBlock.gif)
47
if (event.preventDefault)
48![](/Images/OutliningIndicators/InBlock.gif)
49
event.preventDefault();
50![](/Images/OutliningIndicators/InBlock.gif)
51
event.returnValue = false;
52![](/Images/OutliningIndicators/InBlock.gif)
53
}
![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
4
![](/Images/OutliningIndicators/InBlock.gif)
5
![](/Images/OutliningIndicators/InBlock.gif)
6
![](/Images/OutliningIndicators/InBlock.gif)
7
![](/Images/OutliningIndicators/InBlock.gif)
8
![](/Images/OutliningIndicators/InBlock.gif)
9
![](/Images/OutliningIndicators/InBlock.gif)
10
![](/Images/OutliningIndicators/InBlock.gif)
11
![](/Images/OutliningIndicators/InBlock.gif)
12
![](/Images/OutliningIndicators/InBlock.gif)
13
![](/Images/OutliningIndicators/InBlock.gif)
14
![](/Images/OutliningIndicators/InBlock.gif)
15
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
16
![](/Images/OutliningIndicators/InBlock.gif)
17
![](/Images/OutliningIndicators/InBlock.gif)
18
![](/Images/OutliningIndicators/InBlock.gif)
19
![](/Images/OutliningIndicators/InBlock.gif)
20
![](/Images/OutliningIndicators/InBlock.gif)
21
![](/Images/OutliningIndicators/InBlock.gif)
22
![](/Images/OutliningIndicators/InBlock.gif)
23
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
24
![](/Images/OutliningIndicators/InBlock.gif)
25
![](/Images/OutliningIndicators/InBlock.gif)
26
![](/Images/OutliningIndicators/InBlock.gif)
27
![](/Images/OutliningIndicators/InBlock.gif)
28
![](/Images/OutliningIndicators/InBlock.gif)
29
![](/Images/OutliningIndicators/InBlock.gif)
30
![](/Images/OutliningIndicators/InBlock.gif)
31
![](/Images/OutliningIndicators/InBlock.gif)
32
![](/Images/OutliningIndicators/InBlock.gif)
33
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
34
![](/Images/OutliningIndicators/InBlock.gif)
35
![](/Images/OutliningIndicators/InBlock.gif)
36
![](/Images/OutliningIndicators/InBlock.gif)
37
![](/Images/OutliningIndicators/InBlock.gif)
38
![](/Images/OutliningIndicators/InBlock.gif)
39
![](/Images/OutliningIndicators/InBlock.gif)
40
![](/Images/OutliningIndicators/InBlock.gif)
41
![](/Images/OutliningIndicators/InBlock.gif)
42
![](/Images/OutliningIndicators/InBlock.gif)
43
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
44
![](/Images/OutliningIndicators/InBlock.gif)
45
![](/Images/OutliningIndicators/InBlock.gif)
46
![](/Images/OutliningIndicators/InBlock.gif)
47
![](/Images/OutliningIndicators/InBlock.gif)
48
![](/Images/OutliningIndicators/InBlock.gif)
49
![](/Images/OutliningIndicators/InBlock.gif)
50
![](/Images/OutliningIndicators/InBlock.gif)
51
![](/Images/OutliningIndicators/InBlock.gif)
52
![](/Images/OutliningIndicators/InBlock.gif)
53
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
下一步,我们要在程序运行的时候把我们前面定义的托管方法注册到js里面,这样在load的时候才能够找到,打开app.xml.cs页面增加下面的代码:
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
<div style="height:100%;">
<asp:Silverlight ID="Xaml1" OnPluginLoaded="onLoad" runat="server" Source="~/ClientBin/silverlightZoom.xap" Version="2.0" Width="100%" Height="100%" />
</div>
<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
DuanJunyi &&清新的风
------------------------------
箫心网
www.crfly.com
it.crfly.com
------------------------------
箫心网
www.crfly.com
it.crfly.com