Silverlight 加载进度

日期:2007-12-22   作者:由灵 

一个完善的Silverlight程序一般都会需要一个很强大的动画链接库和很长XAML文件加一些资源文件,在加载中可能浪费很长时间。这时候我们需要显示一个状态和进度为浏览者显示出来,不至于误会成没响应到程序错误。本文的主要技术在与使用Downloader对象的使用,和使用下载以后的文件。
 首先我们需要进立2个XAML文件,第一个命名为“Loading.xaml“,另一个为Main.xaml。Loading.xaml的语言支持采用了Javascript,因为Loading必须要文件小,很快让浏览都看到效果。Main.xaml文件采用了MSIL动态链接库,虽然在下载过程中需要很多的安全检查,但是在运行中得到了最佳的性能。
浏览效果: style="WIDTH: 599px; HEIGHT: 283px" border="0" src="xamls/wpfhome_loading/Default.html" frameborder="0" width="588" scrolling="no" height="118">

Downloader类常用成员
  
类型 名称 说明
方法 Abort() 中断下载
方法 Open(string verb, System.Uri URI) 使Downloader对象载入网址参数
方法 Send() 发送请求
属性 double DownloadProgress 下载进度,可以在DownloadProgressChanged发生时调用
属性 String ResponseText 通过send方法以后,如果是文本可以使用此方法读取!
属性 int Status Downloader的状态代码
属性 String StatusText Downloader对象的状态说明
事件 Completed 下载完成时发生
事件 DownloadFailed 下载失败时发生
事件 DownloadProgressChanged 下载进度改变时发生

代码说明:
 要下载文件URI数组,您只要更改此数组来下载您的文件:

 var loadArray=new Array(
  "ClientBin/wpfhome_Loadding.dll",
  "main.xaml",
  "pics/1.jpg",
  "pics/2.jpg",
  "pics/3.jpg",
  "pics/4.jpg",
  "pics/5.jpg",
  "pics/6.jpg",
  "pics/7.jpg",
  "pics/8.jpg",
  "pics/9.jpg"
 );
var mainXamlUri="main.xaml";  //是下载完以后要转到的地址
window.onload事件中位Silverlight事件的初始化进行处理,包括事件绑定、坐标等的制定。

 


 

 
通过网上的搜索,感觉Silverlight Loader挺好用的,下面详细介绍一下怎么使用Silverlight Loader。 Silverlight Loader的下载地址如下:http://silverlightloader.codeplex.com/ 其实文章并不长,只有下面红色的部分才是需要你实现的代码,这里可能不能显示颜色,可以通过以下网址查看: http://hi.baidu.com/ck436/blog/item/a736edc487d6fea58226acab.html 下面首先介绍一下加载的原理: 其实就是建二个项目:一个较小,用于加载较大的项目文件,并在加载过程中给用户显示加载进度,假设为SLLoader.xap;另一个为我们的具体功能实现项目,不妨假设为LoadTarget.xap。 客户端下载程序时,首先加载SLLoader.xap,这个过程应该是比较快的,然后由SLLoader.xap一边加载较大的LoadTarget.xap,一边显示进度或动画,当加载LoadTarget.xap完毕后,就调用打开LoadTarget.xap,至些,我们的项目已加载完毕。 关于该加载过程的详细资料,可参考如下页面: How the Silverlight loader works http://www.apijunkie.com/APIJunkie/blog/page/How-the-Silverlight-loader-works.aspx Silverlight Loader Getting Started Guide http://www.apijunkie.com/APIJunkie/blog/page/Silverlight-Loader-Getting-Started-Guide.aspx Silverlight Loader Class Diagram http://silverlightloader.codeplex.com/wikipage?title=Class%20Diagram&referringTitle=Home 网上有一篇关于实现加载的介绍,基本上是翻译过来的,不是很详细,文章在此: http://silverlightchina.net/html/tips/2010/0115/588.html 下面我根据上面的几篇文章详细介绍项目的实现过程: 第一步:创建一个SLLoader.xap项目或在现有的SLLoader.xap项目中使用Silverlight Loader 1.在现有SLLoader.xap项目中使用SilverlightLoader:先下载SilverlightLoader压缩包,从下载的Release中找到SilverlightLoader.cs,并将其添加到SLLoader.xap项目中,具体实现方法:在SLLoader.xap项目中右键添加已有项,浏览找到SilverlightLoader.cs即可添加。 2.通过项目模板创建一个SLLoader.xap项目:将SilverlightLoader模板文件拷贝到VS的模板文件夹下,如My Documents\Visual Studio 2008\ProjectTemplates\Visual C#。而后就可以在新建项目时看到Silverlight Loader项目了。 第二步:实现ISliverlightLoader接口 1.添加对SilverlightLoader的引用 在App.xaml.cs中添加对命名空间SilverlightLoader的引用,实现代码: using SilverlightLoader; 在MainPage.xaml.cs中添加对命名空间SilverlightLoader的引用,实现代码: using SilverlightLoader; 2.创建动态加载外部数据的开始点 在App.xaml.cs中的Application_Startup事件中开始载入数据包,代码如下: private void Application_Startup(object sender, StartupEventArgs e) { //无需该默认语句 //this.RootVisual = new MainPage(); //建立加载页 MainPage loader = new MainPage(); //设置该加载页为加载项 this.RootVisual = loader; //建立加载数据包管理类,并开始加载目标xap, //该类的构造函数中的第三个参数为模拟加载网速, //为了模拟加载过程和调试,可以通过设置该参数来模拟加载速度,单位为Kb, //当设该参数为0时,则采用真实带宽加载目标xap。 PackageDownloadManager pdm = new PackageDownloadManager(loader, e.InitParams, 0); } 3.在MainPage.xaml.cs中实现ISliverlightLoader接口 有如下几个ISilverlightLoader接口需要添加,也就是在下面几接口中实现加载进度的交互显示: // 初始化加载加载的数据包列表 void initCallback(List<Uri> packageSourceList); // 回调函数,用于标识开始加载数据包 void downloadStartCallback(Uri packageSource); // 回调函数,用于标识加载进度发生变化 void downloadProgressCallback(Uri packageSource, DownloadProgressEventArgs eventArgs); // 回调函数,用于标识加载数据包结束 void downloadCompleteCallback(Uri packageSource, DownloadCompleteEventArgs eventArgs); MainPage.xaml.cs中的实现代码如下,我现在把MainPage.xaml.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 SilverlightLoader; namespace SLLoader { //注意此处的类继承:SilverlightLoader.ISilverlightLoader public partial class MainPage : UserControl, SilverlightLoader.ISilverlightLoader { public MainPage() { InitializeComponent(); } #region ISilverlightLoader Members //初始化加载加载的数据包列表 void ISilverlightLoader.initCallback(System.Collections.Generic.List<Uri> packageSourceList) { } //回调函数,用于标识开始加载数据包 void ISilverlightLoader.downloadStartCallback(Uri packageSource) { LoadProgress.Text = "加载初始化..."; } //回调函数,用于标识加载进度发生变化 void ISilverlightLoader.downloadProgressCallback(Uri packageSource, DownloadProgressEventArgs eventArgs) { float offset = ((float)eventArgs.ProgressPercentage * 4 / 100f) * 1000; TimeSpan ts = new TimeSpan(0, 0, 0, 0, (int)offset); //显示加载进度,例如下面二行代码中LoadProgress为一个Textblock,LoadProgressBar为一个进度条,则可以使用下面语句显示进度 LoadProgress.Text = eventArgs.ProgressPercentage.ToString() + "%"; LoadProgressBar.Value = eventArgs.ProgressPercentage; } //回调函数,用于标识加载数据包结束 void ISilverlightLoader.downloadCompleteCallback(Uri packageSource, DownloadCompleteEventArgs eventArgs) { LoadProgress.Text = "加载完成"; XapUtil.setCurrentXapFile(packageSource); } #endregion } } 第三步:在HTML页面或asp:Silverlight控件设置初始载入界面与载入目标 该步就是在HTML或asp:Silverlight控件中加入对SLLoader.xap的调用,并将LoadTarget.xap的名字做为参数传递给SLLoader.xap,以便加载, 可以看出,在建立整个项目的过程中,SLLoader.xap和LoadTarget.xap并不需要打交道,只在HHTML或asp:Silverlight控件设置中才把二者联系起来。 1.HTML中的设置方法: <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="550" height="400"> <param name="source" value="SLLoader.xap" /> <param name="onerror" value="onSilverlightError" /> <param name="background" value="white" /> <param name="minRuntimeVersion" value="2.0.31005.0" /> <param name="autoUpgrade" value="true" /> <param name="initParams" value="LoaderSourceList=LoadTarget.xap" /> <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> </object> 注意SLLoader.xap和LoadTarget.xap的位置,此时把HTML文件、SLLoader.xap和LoadTarget.xap放在同一目录下即可实现加载。 2.在asp:Silverlight控件中设置的方法 <asp:Silverlight ID="Xaml1" runat="server" Source="~/SLLoader.xap" MinimumVersion="2.0.31005.0" Width="550" Height="400" InitParameters="LoaderSourceList=LoadTarget.xap" /> 与在HTML中通过Object对象设置的原理相同。 3.如果此时编译SLLoader.xap项目,可能通不过,提示缺少对System.Runtime.Serialization.Json的引用, 为解决此问题,需要添加如下三个引用,参考文章:http://www.cnblogs.com/Blackie/archive/2009/07/09/1520080.html 1.System.Runtime.Serialization 2.System.ServiceModel 3.System.ServiceModel.Web 至此,一个加载功能制作完毕。 注意事项: (1)App和MailPage都需要添加对命名空间SilverlightLoader的引用; (2)PackageDownloadManager类构造函数中的第三个参数需要更改,看前面的代码注释,在此处将参数改为一个较小的值,即可减小加载速度,以便查看加载效果; (3)需要添加以下三个引用,只有同时添加,才能正确引用System.Runtime.Serialization.Json: 1.System.Runtime.Serialization 2.System.ServiceModel 3.System.ServiceModel.Web 目前已知的问题: 实现该加载功能的目的就是不想显示Silverlight默认的那个蓝色整圆圆的加载动画, 但如果网速过慢,还是会显示加载SLLoader.xap的动画,另外SLLoader.xap加载完LoadTarget.xap后,打开LoadTarget.xap的过程中也可能会出现默认的那个加载动画,虽然只是一瞬间,不知道该怎么屏蔽这个默认的动画,请大家支招。 还请大家教我实现屏蔽默认加载动画的方法,我的邮箱:ck436#126.com,把#改为@
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值