随笔 - 616, 文章 - 0, 评论 - 10492
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
[索引页]
[源码下载]


稳扎稳打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">
        
<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" />
            
            
<!--下载 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
<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
[源码下载]