稳扎稳打Silverlight(30) - 2.0Tip/Trick之Silverlight.js, Silverlight.supportedUserAgent.js

[索引页]
[源码下载]

稳扎稳打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>

 

 

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
[源码下载]