《Silverlight与HTML的集成与交互》
立即解锁
发布时间: 2025-08-26 01:38:44 阅读量: 2 订阅数: 14 


Silverlight 5编程与应用实例解析
### 《Silverlight与HTML的集成与交互》
#### 1. 样式属性修改与JavaScript事件处理
在开发中,你可以在任何时候使用`SetStyleAttribute()`方法来更改单个样式属性,而无需考虑样式最初是如何设置的,甚至在还未设置其他样式属性时也能使用。若想查看可用于配置元素的CSS属性,可参考www.w3schools.com/css。
除了查找、检查和更改HTML元素,你还能处理它们的事件。这就需要你了解HTML DOM事件的名称,具备一定的JavaScript技能以便在Silverlight和HTML之间进行交互。以下是一些常用的HTML DOM事件:
| 事件 | 描述 |
| --- | --- |
| onchange | 用户更改输入控件中的值时触发,在文本控件中,用户将焦点转移到其他控件后触发此事件 |
| onclick | 用户点击控件时触发 |
| onmouseover | 用户将鼠标指针移到控件上时触发 |
| onmouseout | 用户将鼠标指针移开控件时触发 |
| onkeydown | 用户按下按键时触发 |
| onkeyup | 用户释放按下的按键时触发 |
| onselect | 用户在输入控件中选择部分文本时触发 |
| onfocus | 控件获得焦点时触发 |
| onblur | 控件失去焦点时触发 |
| onabort | 用户取消图像下载时触发 |
| onerror | 图像无法下载(可能是因为URL错误)时触发 |
| onload | 新页面下载完成时触发 |
| onunload | 页面卸载时触发(通常在输入新URL或点击链接后发生,在新页面下载前触发) |
要附加事件处理程序,可使用`HtmlElement.AttachEvent()`方法,该方法可在任何时候调用,适用于现有或新创建的元素。例如,监听段落的`onclick`事件:
```csharp
element.AttachEvent("onclick", paragraph_Click);
```
你可以使用`HtmlElement.AttachEvent()`处理任何HTML元素引发的事件,也可以使用`HtmlWindow.AttachEvent()`处理浏览器窗口(DOM窗口对象)引发的事件,使用`HtmlDocument.AttachEvent()`处理顶级文档(DOM文档对象)引发的事件。事件处理程序会接收一个`HtmlEventArgs`对象,它能提供大量额外信息。对于鼠标事件,你可以检查鼠标的精确坐标(相对于引发事件的元素)以及不同鼠标按钮的状态。
以下是一个事件处理程序的示例,它会更改段落的文本和背景颜色:
```csharp
private void paragraph_Click(object sender, HtmlEventArgs e)
{
HtmlElement element = (HtmlElement)sender;
element.SetProperty("innerHTML",
"You clicked this HTML element, and Silverlight handled it.");
element.SetStyleAttribute("background", "#00ff00");
}
```
通过这种技术,你可以使用Silverlight作为中介,用客户端C#代码编写HTML页面脚本,而无需使用通常所需的JavaScript。
#### 2. 代码交互
前面介绍了Silverlight应用程序如何与浏览器交互,以执行导航和操作HTML元素。但这种方法存在一个弱点,即代码耦合紧密,Silverlight应用程序对当前页面上的HTML元素及其唯一ID有硬编码假设。一旦HTML页面中的这些细节发生变化,与之交互的Silverlight代码将无法正常工作。
为解决这个问题,可采用代码交互的方式,而非直接操作元素。例如,Silverlight应用程序可以通过调用页面中的JavaScript方法来更新HTML页面的内容。JavaScript代码在Silverlight代码和HTML内容之间增加了一层灵活性,即使页面上的HTML元素发生变化,只需更新JavaScript方法,Silverlight应用程序无需重新编译。同样,也可以编写JavaScript代码来调用用托管C#代码编写的Silverlight方法。
#### 2.1 从Silverlight调用浏览器脚本
利用`System.Windows.Browser`命名空间中的Silverlight类,你可以调用脚本块中声明的JavaScript函数。这为Silverlight代码与页面交互提供了一种规范、可控的方式。如果你已有一个功能完备的页面,包含完整的JavaScript函数,就无需重复编写操作页面元素的代码,直接调用现有的方法即可。
假设在HTML页面的`<head>`部分定义了如下函数:
```html
<script type="text/javascript">
function changeParagraph(newText) {
var element = document.getElementById("paragraph");
element.innerHTML = newText;
}
</script>
```
要调用这个方法,需使用`HtmlWindow.GetProperty()`方法并传入函数名,会得到一个`ScriptObject`,可随时调用`InvokeSelf()`方法执行它。
```csharp
ScriptObject script = (ScriptObject)HtmlPage.Window.GetProperty("changeParagraph");
```
调用`InvokeSelf()`时,需传入所有参数。`changeParagraph()`函数需要一个字符串参数,调用方式如下:
```csharp
script.InvokeSelf("Changed through JavaScript.");
```
#### 2.2 从浏览器调用Silverlight方法
有趣的是,Silverlight还具备让JavaScript代码调用托管代码编写的方法的能力,不过这个过程稍微复杂一些。要实现这一点,需按以下步骤操作:
1. 在Silverlight代码中创建一个公共方法,该方法应暴露网页所需的信息或功能。可以将该方法放在页面类或单独的类中,尽量使用简单的数据类型,如字符串、布尔值和数字,除非你愿意将对象序列化为更简单的形式。
2. 在要从JavaScript调用的方法声明中添加`ScriptableMember`属性。
3. 在包含可脚本化方法的类声明中添加`ScriptableType`属性。
4. 调用`HtmlPage.RegisterScriptableObject()`方法,将Silverlight方法暴露给JavaScript。
完成这些步骤后,JavaScript代码就可以通过代表Silverlight内容区域的`<object>`元素调用Silverlight方法。为便于操作,给`<object>`元素赋予一个唯一ID很重要。默认情况下,Visual Studio创建的测试页面会为包含`<object>`元素的`<div>`元素命名(`silverlightControlHost`),但不会为内部的`<object>`元素命名。在继续之前,你应该创建一个包含此细节的测试页面:
```html
<div id="silverlightControlHost">
<object data="data:application/x-silverlight,"
type="application/x-silverlight-2-b1" width="400" height="300"
id="silverlightControl">
...
</object>
<iframe style="visibility:hidden;height:0;width:0;border:0px"></iframe>
</div>
```
以下是一个示例,创建一个包含可脚本化方法的自定义页面类:
```csharp
[ScriptableType()]
public partial class ScriptableSilverlight: UserControl
{
public ScriptableSilverlight()
{
InitializeComponent();
HtmlPage.RegisterScriptableObject("Page", this);
}
[ScriptableMember()]
public void ChangeText(string newText)
{
lbl.Text = newText;
}
}
```
注册可脚本化类型时,需指定一个JavaScript对象名称并传递相应对象的引用。这里,`ScriptableSilverlight`类的实例以`Page`名称注册,这会让Silverlight在JavaScript页面的Silverlight控件中创建一个名为`Page`的属性。因此,要调用这个方法,JavaScript代码需要找到Silverlight控件,获取其内容,然后调用`Page.ChangeText()`方法。
以下是一个实现此功能的JavaScript函数示例:
```html
<script type="text/javascript">
function updateSilverlightText()
{
var control = document.getElementById("silverlightCo
```
0
0
复制全文
相关推荐




