介绍
Silverlight 2.0 使用c#开发可脚本化的代码，Silverlight与宿主页面的DOM之间的交互，Silverlight与宿主页面的JavaScript之间的交互
ScriptableMemberAttribute - 需要脚本化的属性、方法、事件要标记为此
HtmlPage.RegisterScriptableObject - 将可脚本化对象注册到客户端
HtmlElement - 表示网页的文档对象模型 (DOM) 中的 HTML 元素
HtmlWindow - 提供 JavaScript 的 window 对象的 Silverlight 端的托管表示形式
示例
1、Silverlight对可脚本化的支持
Scriptable.cs
Scriptable.cs
using ...System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;
namespace Silverlight20.WebPage
...{
/**//*
* 脚本化的类必须是 public 的
* 需要脚本化的属性、方法、事件要标记为 [ScriptableMember]
* 如果类被标记为 [ScriptableType]，则意味着其属性、方法、事件都是ScriptableMemberAttribute
*/
/**//// <summary>
/// 用于演示脚本化的类
/// </summary>
// [ScriptableType]
public class Scriptable
...{
/**//// <summary>
/// 当前服务端的时间
/// </summary>
[ScriptableMember]
public DateTime CurrentTime ...{ get; set; }
/**//// <summary>
/// Hello 方法
/// </summary>
/// <param name="name">名字</param>
/// <returns></returns>
[ScriptableMember] /// <summary>
/// 开始事件
/// </summary>
[ScriptableMember]
public event EventHandler<StartEventArgs> Start;
/**//// <summary>
/// 触发开始事件所调用的方法
/// </summary>
/// <param name="dt"></param>
public void OnStart(DateTime dt)
...{
if (Start != null)
...{
Start(this, new StartEventArgs()
...{
CurrentTime = dt
});
}
}
}
public string Hello(string name)
...{
return string.Format("Hello: ...{0}", name);
}
/**/
/**//// <summary>
/// 开始事件的 EventArgs
/// </summary>
public class StartEventArgs : EventArgs
...{
/**//// <summary>
/// 当前服务端的时间
/// </summary>
[ScriptableMember]
public DateTime CurrentTime ...{ get; set; }
}
}
ScriptableDemo.xaml.cs
ScriptableDemo.xaml.cs
using ...System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;
namespace Silverlight20.WebPage
...{
public partial class ScriptableDemo : UserControl
...{
System.Threading.Timer _timer;
System.Threading.SynchronizationContext _syncContext;
public ScriptableDemo()
...{
InitializeComponent();
this.Loaded += new RoutedEventHandler(ScriptableDemo_Loaded);
}
void ScriptableDemo_Loaded(object sender, RoutedEventArgs e)
...{
// UI 线程
_syncContext = System.Threading.SynchronizationContext.Current;
Scriptable s = new Scriptable() ...{ CurrentTime = DateTime.Now };
// 将 Scriptable 对象注册到客户端中，所对应的客户端的对象名为 scriptable
HtmlPage.RegisterScriptableObject("scriptable", s);
_timer = new System.Threading.Timer(MyTimerCallback, s, 0, 1000);
}
private void MyTimerCallback(object state)
...{
Scriptable s = state as Scriptable;
// 每秒调用一次 UI 线程上的指定的方法
_syncContext.Post(OnStart, s);
}
void OnStart(object state)
...{
Scriptable s = state as Scriptable;
// 调用 Scriptable 对象的 OnStart() 方法，以触发 Start 事件
s.OnStart(DateTime.Now);
}
}
}
ScriptableDemo.html
ScriptableDemo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Silverlight20</title>
<style type="text/css">
html, body
{}{
height: 100%;
overflow: auto;
}
body
{}{
padding: 0;
margin: 0;
}
#silverlightControlHost
{}{
height: 100%;
}
</style>
<script type="text/javascript" src="../Silverlight.js"></script>
<script type="text/javascript">
function scriptableDemo() {
// scriptable - Silverlight 注册到客户端的对象
var obj = document.getElementById("xaml1").content.scriptable;
var output = document.getElementById('result');
output.innerHTML += obj.CurrentTime
output.innerHTML += '<br />';
output.innerHTML += obj.Hello("webabcd");
output.innerHTML += '<br />';
// obj.Start = responseStart;
// addEventListener - 添加事件监听器
// removeEventListener - 移除事件监听器
obj.addEventListener("Start", responseStart);
}
function responseStart(sender, args) {
document.getElementById('result').innerHTML += args.CurrentTime;
document.getElementById('result').innerHTML += '<br />';
}
</script>
</head>
<body>
<div style="font-size: 12px" id="result">
</div>
<div style="font-size: 12px" onclick="scriptableDemo();">
加载了 Silverlight20.WebPage.ScriptableDemo 后，单击这里以测试 Silverlight 对可脚本化的支持</div>
<div id="silverlightControlHost">
<object id="xaml1" data="data:application/x-silverlight-2," type="application/x-silverlight-2"
width="100%" height="100%">
<param name="source" value="../ClientBin/Silverlight20.xap" />
<param name="EnableHtmlAccess" value="true" />
</object>
<iframe style='visibility: hidden; height: 0; width: 0; border: 0px'></iframe>
</div>
</body>
</html>
2、Silverlight与网页的DOM之间的交互
DOMDemo.xaml
DOMDemo.xaml
<UserControl x:Class="Silverlight20.WebPage.DOMDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel HorizontalAlignment="Left" Margin="5">
<TextBox x:Name="txtMsg" />
</StackPanel>
</UserControl>
DOMDemo.xaml.cs
DOMDemo.xaml.cs
using ...System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;
namespace Silverlight20.WebPage
...{
public partial class DOMDemo : UserControl
...{
public DOMDemo()
...{
InitializeComponent();
Demo();
}
void Demo()
...{
// 获取当前页面的 id 为 hello 的DOM，并设置其样式
HtmlElement container = HtmlPage.Document.GetElementById("hello");
container.SetStyleAttribute("display", "block");
// 创建一个 ul
HtmlElement ul = HtmlPage.Document.CreateElement("ul");
for (int i = 0; i < 10; i++)
...{
// 创建一个 li ，并设置其显示的内容
HtmlElement li = HtmlPage.Document.CreateElement("li");
li.SetAttribute("innerText", "hi: DOM");
// 将 li 添加到 ul 内
ul.AppendChild(li);
}
// 将 ul 添加到 id 为 hello 的 DOM 内
container.AppendChild(ul);
// 创建一个页面的 button ，并设置其 value 属性和 onclick 事件
HtmlElement button = HtmlPage.Document.CreateElement("button");
button.SetProperty("value", "hi: Silverlight");
button.AttachEvent("onclick", new EventHandler<HtmlEventArgs>(HelloClick));
// 将 button 添加到 id 为 hello 的 DOM 内
container.AppendChild(button);
}
void HelloClick(object sender, HtmlEventArgs e)
...{
// 页面的 button 单击后所需执行的逻辑
txtMsg.Text += "hi: Silverlight\r\n";
}
}
}
DOMDemo.html
DOMDemo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Silverlight20</title>
<style type="text/css">
html, body
{}{
height: 100%;
overflow: auto;
}
body
{}{
padding: 0;
margin: 0;
}
#silverlightControlHost
{}{
height: 100%;
}
</style>
<script type="text/javascript" src="../Silverlight.js"></script>
</head>
<body>
<!--由 Silverlight 控制此 id 为 hello 的 DOM-->
<div style="font-size: 12px; display: none" id="hello">
</div>
<div style="font-size: 12px">
加载 Silverlight20.WebPage.DOMDemo 后，测试 Silverlight 和页面 DOM 的交互</div>
<div id="silverlightControlHost">
<object id="xaml1" data="data:application/x-silverlight-2," type="application/x-silverlight-2"
width="100%" height="100%">
<param name="source" value="../ClientBin/Silverlight20.xap" />
<param name="EnableHtmlAccess" value="true" />
</object>
<iframe style='visibility: hidden; height: 0; width: 0; border: 0px'></iframe>
</div>
</body>
</html>
3、Silverlight与网页的JavaScript之间的交互
JSDemo.xaml
JSDemo.xaml
<UserControl x:Class="Silverlight20.WebPage.JSDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel HorizontalAlignment="Left" Margin="5">
<Button Margin="5" x:Name="invokeJS" Content="调用JavaScript" Click="invokeJS_Click" />
<TextBox Margin="5" x:Name="txtMsg" />
</StackPanel>
</UserControl>
JSDemo.xaml.cs
JSDemo.xaml.cs
using ...System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;
namespace Silverlight20.WebPage
...{
public partial class JSDemo : UserControl
...{
public JSDemo()
...{
InitializeComponent();
this.Loaded += new RoutedEventHandler(JSDemo_Loaded);
}
private void invokeJS_Click(object sender, RoutedEventArgs e)
...{
// 调用页面的 JavaScript 方法
HtmlPage.Window.Invoke("silverlightInvokeJS", "webabcd");
// 执行任意 JavaScript 语句
HtmlPage.Window.Eval("silverlightInvokeJS('webabcd2')");
}
void JSDemo_Loaded(object sender, RoutedEventArgs e)
...{
HtmlPage.Document.GetElementById("btnHello").SetStyleAttribute("display", "inline");
// 将此对象注册到客户端中，所对应的客户端的对象名为 silverlightObject
HtmlPage.RegisterScriptableObject("silverlightObject", this);
}
/**//// <summary>
/// Hello 方法
/// 暴露给页面的方法，调用后在 Silverlight 中显示结果
/// </summary>
/// <param name="name">名字</param>
[ScriptableMember] // 脚本化此方法
public void hello(string name)
...{
txtMsg.Text += string.Format("Hello: ...{0}\r\n", name);
}
}
}
JSDemo.html
JSDemo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Silverlight20</title>
<style type="text/css">
html, body
{}{
height: 100%;
overflow: auto;
}
body
{}{
padding: 0;
margin: 0;
}
#silverlightControlHost
{}{
height: 100%;
}
</style>
<script type="text/javascript" src="../Silverlight.js"></script>
<script type="text/javascript">
function silverlightInvokeJS(name) {
// Silverlight 调用 JavaScript 方法，在页面上显示结果
document.getElementById('result').innerHTML += "hello: " + name + "<br />";
}
function jsInvokeSilverlight(name) {
// JavaScript 调用 Silverlight 方法，在 Silverlight 上显示结果
var obj = document.getElementById("xaml1").content.silverlightObject;
obj.hello(name);
}
</script>
</head>
<body>
<div style="font-size: 12px" id="result">
</div>
<div style="font-size: 12px">
加载 Silverlight20.WebPage.JSDemo 后，测试 Silverlight 和页面 JavaScript 的交互
<input type="button" id="btnHello" value="HelloSilverlight" onclick="jsInvokeSilverlight('webabcd')"
style="display: none" />
</div>
<div id="silverlightControlHost">
<object id="xaml1" data="data:application/x-silverlight-2," type="application/x-silverlight-2"
width="100%" height="100%">
<param name="source" value="../ClientBin/Silverlight20.xap" />
<param name="EnableHtmlAccess" value="true" />
</object>
<iframe style='visibility: hidden; height: 0; width: 0; border: 0px'></iframe>
</div>
</body>
</html>
希望对你学习有所帮助！
