稳扎稳打Silverlight(30) - 2.0Tip/Trick之Silverlight.js, Silverlight.supportedUserAgent.js, 自定义启动界面, 响应鼠标滚轮事件

原创于 2009-05-18 09:42:00 发布 · 818 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#silverlight #浏览器 #function #object #null

Silverlight 专栏收录该内容

718 篇文章

订阅专栏

本文介绍了Silverlight 2.0的一些实用技巧，包括利用Silverlight.js进行插件嵌入及安装体验定制，判断浏览器对Silverlight的支持情况，自定义启动界面及加载进度显示，以及如何响应鼠标的滚轮事件。

[索引页]
[源码下载]

稳扎稳打Silverlight(30) - 2.0Tip/Trick之Silverlight.js, Silverlight.supportedUserAgent.js, 自定义启动界面, 响应鼠标滚轮事件

作者： webabcd

介绍
Silverlight 2.0 提示和技巧系列

Silverlight.js - 一些 js 帮助函数，用于嵌为入 Silverlight 插件以及自定义安装体验等提供帮助
Silverlight.supportedUserAgent.js - 就一个函数，用于判断 Silverlight 是否支持用户的浏览器
自定义启动界面 - 三个参数的综合应用：splashScreenSource, onSourceDownloadProgressChanged, onSourceDownloadComplete
响应鼠标滚轮事件 - 响应并处理鼠标的滚轮事件

在线DEMO
http://www.cnblogs.com/webabcd/archive/2008/10/09/1307486.html

示例
1、Silverlight.js 和 Silverlight.supportedUserAgent.js 的常用函数的演示和说明
SilverlightDotJsDemo.html

<!--

详解 Silverlight.js

Silverlight.js - 一些 js 帮助函数，用于嵌为入 Silverlight 插件以及自定义安装体验等提供帮助，其最新版本在如下地址下载

http://code.msdn.microsoft.com/silverlightjs

Silverlight.supportedUserAgent.js - 就一个函数，用于判断 Silverlight 是否支持用户的浏览器，其最新版本在如下地址下载

http://code.msdn.microsoft.com/SLsupportedUA

-->

<! 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 > Silverlight.js </ title >

< script type ="text/javascript" src ="../Silverlight.js" ></ script >

< script src ="../Silverlight.supportedUserAgent.js" type ="text/javascript" ></ script >

</ head >

< body >

< div id ="container" >

< a href ="http://go.microsoft.com/fwlink/?LinkID=124807" style ="text-decoration: none;" >

< img src ="http://go.microsoft.com/fwlink/?LinkId=108181" alt ="Get Microsoft Silverlight"

style ="border-style: none" />

</ a >

</ div >

< script type ="text/javascript" >

// Silverlight.createObject() - 生成一个嵌入了 Silverlight 插件的 object 元素

Silverlight.createObject(

"../ClientBin/Silverlight20.xap", // .xap 的地址

document.getElementById('container'), // 包含此 object 元素的父元素

"slPlugin", // object 元素的 id

{

width: "100%",

height: "100%",

minRuntimeVersion: "2.0.31005.0"

}, // Silverlight 插件的属性数组

{

onLoad: onSLLoad,

onError: onSLError,

onSourceDownloadComplete: onSourceDownloadComplete

}, // Silverlight 插件的事件处理程序数组

"key1=value1,key2=value2", // 为 Silverlight 程序传递初始化参数(key=value的形式)。用“,”分隔

"myContext" // 上下文信息，可以在插件的 onLoad 事件中获取

);

function onSLLoad(plugin, userContext, sender) {

alert(plugin.id + " - " + userContext + " - " + sender.toString());

}

function onSLError(sender, args) {

// args - Sys.UI.Silverlight.ErrorEventArgs 类型

// ErrorEventArgs.errorType - 错误类型

// ErrorEventArgs.errorMessage - 错误信息

// ErrorEventArgs.errorCode - 错误代码

// 程序 throw 出的异常可以在此处捕获到

alert(args.errorType + "/n" + args.errorMessage + "/n" + args.errorCode);

}

function onSourceDownloadComplete(sender, args) {

alert("SourceDownloadComplete");

}

// Silverlight.createObjectEx(params) - 将所有参数放入一个数组中传入，其内部会解析这个数组中的参数，然后调用 Silverlight.createObject()

// Silverlight.default_error_handler = function (sender, args){} - onError 事件的默认处理程序，不需要的话可以将其置为 null

</ script >

< script type ="text/javascript" >

window.onload = function() {

// getSilverlight() - 尝试下载指定的版本，如果指定空字符串 "" 则为尝试下载最新版本

// Silverlight.getSilverlight("2.0.31005.0");

// isInstalled() - 判断是否安装了指定的 Silverlight 版本

alert(Silverlight.isInstalled("2.0.31005.0"));

// Silverlight.onSilverlightInstalled - 使用 Silverlight.js 时，如果客户端没有安装 Silverlight 插件，则会自动安装，然后调用此方法以刷新浏览器，可以重写此方法以自定义行为（比如在此通过 createObject() 来使新安装的插件生效，而无需刷新）。注意：如果是 Silverlight 升级，则不会调用此方法，必须重启浏览器（只刷新是不行的）

// supportedUserAgent(version, userAgent) - 判断 Silverlight 是否支持用户的浏览器，省略 userAgent 则为当前浏览器

alert(Silverlight.supportedUserAgent("2.0"));

}

</ script >

</ body >

</ html >

2、自定义 Silverlight 程序的启动界面，并显示加载进度
启动界面的 xaml 文件
SplashScreen.xaml

< Grid xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"

Background ="Bisque"

< StackPanel Orientation ="Horizontal" HorizontalAlignment ="Center" VerticalAlignment ="Center" >

< TextBlock Text ="Loading

" Margin ="3" />

< TextBlock x:Name ="percent" Text ="0%" Margin ="3" />

</ StackPanel >

</ Grid >

Silverlight 程序全部加载完成前，显示启动界面并显示加载进度
SplashScreen.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 > SplashScreen </ title >

< style type ="text/css" >

html, body

{

height: 100%;

overflow: auto;

}

body

{

padding: 0;

margin: 0;

}

#silverlightControlHost

{

height: 100%;

}

</ style >

</ head >

< body >

< 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 ="splashScreenSource" value ="SplashScreen.xaml" />

< param name ="onSourceDownloadProgressChanged" value ="onSourceDownloadProgressChanged" />

< param name ="onSourceDownloadComplete" value ="onSourceDownloadComplete" />

</ object >

< iframe style ='visibility: hidden; height: 0; width: 0; border: 0px' ></ iframe >

</ div >

< script type ="text/javascript" >

function onSourceDownloadProgressChanged(sender, args) {

// progress 属性 - 下载进度（0 - 1 之间）

sender.findName("percent").Text = Math.round(args.progress * 10000) / 100 + "%";

}

function onSourceDownloadComplete(sender, args) {

sender.findName("percent").Text = "100%";

}

</ script >

</ body >

</ html >

3、响应并处理鼠标的滚轮事件
Wheel.xaml

< UserControl x:Class ="Silverlight20.Tip.Wheel"

xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" >

< StackPanel >

< TextBox x:Name ="lblMsg" />

</ StackPanel >

</ UserControl >

Wheel.xaml.cs

* 如何响应鼠标滚轮事件，可以参看 Deep Zoom Composer 生成的 MouseWheelHelper.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.Tip

{

public partial class Wheel : UserControl

{

public Wheel()

{

InitializeComponent();

this.Loaded += new RoutedEventHandler(Wheel_Loaded);

}

void Wheel_Loaded(object sender, RoutedEventArgs e)

{

HtmlPage.Window.AttachEvent("DOMMouseScroll", OnMouseWheel);

HtmlPage.Window.AttachEvent("onmousewheel", OnMouseWheel);

HtmlPage.Document.AttachEvent("onmousewheel", OnMouseWheel);

}

private void OnMouseWheel(object sender, HtmlEventArgs args)

{

args.PreventDefault();

double mouseDelta = 0;

ScriptObject eventObj = args.EventObject;

// Mozilla and Safari

if (eventObj.GetProperty("detail") != null)

{

mouseDelta = ((double)eventObj.GetProperty("detail"));

}

// IE and Opera

else if (eventObj.GetProperty("wheelDelta") != null)

{

mouseDelta = ((double)eventObj.GetProperty("wheelDelta"));

}

// IE浏览器：mouseDelta == 120 向上滚动；mouseDelta == -120 向下滚动

// FF浏览器：mouseDelta == -3 向上滚动；mouseDelta == 3 向下滚动

lblMsg.Text += mouseDelta.ToString();

}

OK
[源码下载]