[索引页]
[源码下载]
作者： webabcd
介绍
Silverlight 2.0 提示和技巧系列
在线DEMO
http://webabcd.blog.51cto.com/1787395/342779
示例
1、Silverlight.js 和 Silverlight.supportedUserAgent.js 的常用函数的演示和说明
SilverlightDotJsDemo.html
/*
* 如何响应鼠标滚轮事件，可以参看 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();
}
}
}
[源码下载]
稳扎稳打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://webabcd.blog.51cto.com/1787395/342779
示例
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>
详解 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
启动界面的 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>
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
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" />
<! --下载 source 指定的 xap 的过程中所显示的 xaml 的地址-- >
< param name ="splashScreenSource" value ="SplashScreen.xaml" />
<! --下载 source 指定的 xap 的过程中所持续调用的事件-- >
< param name ="onSourceDownloadProgressChanged" value ="onSourceDownloadProgressChanged" />
<! --souce 指定的 xap 被完全下载后所触发的事件-- >
< 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>
< 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" />
<! --下载 source 指定的 xap 的过程中所显示的 xaml 的地址-- >
< param name ="splashScreenSource" value ="SplashScreen.xaml" />
<! --下载 source 指定的 xap 的过程中所持续调用的事件-- >
< param name ="onSourceDownloadProgressChanged" value ="onSourceDownloadProgressChanged" />
<! --souce 指定的 xap 被完全下载后所触发的事件-- >
< 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
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>
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();
}
}
}
本文转自webabcd 51CTO博客，原文链接：http://blog.51cto.com/webabcd/343939
，如需转载请自行联系原作者
