Silverlight载入动画（简易）

最新推荐文章于 2024-09-23 08:37:48 发布

weixin_33802505

最新推荐文章于 2024-09-23 08:37:48 发布

阅读量79

点赞数

文章标签： javascript 操作系统 c# ViewUI

Silverlight提供了一个比较清晰的应用程序模型。如果要实现一个简单的Silverlight应用，我们可以将这个模型抛之脑后。但是，如果想实现一些特殊的功能，例如：传递自定义参数、使用自定义的载入动画，就需要对Silverlight的应用程序模型有所了解。了解Silverlight的应用程序模型，我们才能了解Silverlight应用程序的始末。

Silverlight生命周期

　　一个Silverlight应用程序，从开始请求到完全载入，一般经过6个步骤：

- 用户请求HTML页面，HTML页面中含有Silverlight的入口；
- 浏览器下载Silverlight插件和对应的XAP文件；
- Silverlight插件开始工作，读取XAP文件里的AppManifast.xml文件来载入需要用到的Assemblies；
- Silverlight插件创建一个App类的实例；
- Application的默认构造函数引发Startup事件；
- Silverlight应用程序处理Startup事件。

　　直到Silverlight应用遇到异常或者用户关闭页面，Silverlight应用程序结束。

应用程序入口

　　由Silverlight的生命周期看到，Silverlight插件下载好了以后创建的第一个类就应该是App类，因此，App类的默认构造函数，也就成为了Silverlight的应用程序入口了。让我们打开app.xaml.cs来瞥一眼App类的默认构造函数：

view source

print ?

01
public partial class App : Application 

02
{ 

03
public App() 

04
{ 

05
this.Startup += this.Application_Startup; 

06
this.Exit += this.Application_Exit; 

07
this.UnhandledException += this.Application_UnhandledException; 

08
 

09
InitializeComponent(); 

10
} 

11
}

　　因此，App什么都没有做，只是傻傻的添加了三个事件的处理程序，分别对应了Silverlight的启动、退出和出现异常。而真正意义上的代码，发生在应用程序的Startup事件中：

view source

print ?

1
private void Application_Startup(object sender, StartupEventArgs e) 

2
{ 

3
this.RootVisual = new MainPage(); 

4
}

　　这里虽然只有一行代码，但是，它调用了我们的主窗口的构造函数，并且，将生成的对象赋给了App对象的RootVisual属性。这样，Silverlight应用程序就被引入到用户的代码片段中。

应用程序事件

　　在应用程序载入的过程中，我们看到App类的构造函数中注册了3个应用程序事件的处理程序。App类中有很大篇幅是用来处理这三个重要的应用程序事件的。

- Startup

　　　　　　Silverlight应用程序启动时触发，前节中已经涉及到了其处理程序，它用于生成启动页面类的实例并且赋值给Application.Current.RootVisual。另外，我们可以通过e来获取初始化的参数。方法如下：

　　首先，把需要的参数添加到HTML中：

view source

print ?

01
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" 

02
width="100%" height="100%"> 

03
<param name="source" value="ClientBin/ApplicationModel.xap" /> 

04
<param name="onError" value="onSilverlightError" /> 

05
<param name="background" value="white" /> 

06
<param name="minRuntimeVersion" value="3.0.40818.0" /> 

07
<param name="autoUpgrade" value="true" /> 

08
<param name="initParams" value="initWords1=Hello,initWords2=World" /> 

09
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0" style="text-decoration: none"> 

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

11
style="border-style: none" /> 

12
</a> 

13
</object>

　　这个参数必须以“initParams”命名，参数的键与值之间以等号分隔；多个参数之间用逗号分隔。然后，我们就可以通过e.InitParams对初始化参数进行访问了，例如：

view source

print ?

01
private void Application_Startup(object sender, StartupEventArgs e) 

02
{ 

03
this.RootVisual = new MainPage(); 

04
if (e.InitParams.ContainsKey("initWords2")) 

05
{ 

06
TextBlock tb = new TextBlock(); 

07
tb.Text = e.InitParams["initWords2"].ToString(); 

08
((MainPage)this.RootVisual).LayoutRoot.Children.Add(tb); 

09
} 

10
}

　　我们取出了参数列表中的第二个参数，把它赋给了一个TextBlock并且添加到了MainPage的Grid中去。

- Exit

　　　　　　Exit事件在Silverlight退出时，会被触发。这一事件可以给程序一个最后的机会来保存用户相关的数据，例如记录当前用户的偏好等。

- UnhandledException

　　　　　　顾名思义，UnhandledException会发生在有未处理的异常被系统捕获到的时候触发。Silverlight为我们生成了一些默认的处理程序：

view source

print ?

01
private void Application_UnhandledException(object sender, ApplicationUnhandledExceptionEventArgs e) 

02
{ 

03
// If the app is running outside of the debugger then report the exception using 

04
// the browser's exception mechanism. On IE this will display it a yellow alert 

05
// icon in the status bar and Firefox will display a script error. 

06
if (!System.Diagnostics.Debugger.IsAttached) 

07
{ 

08
 

09
// NOTE: This will allow the application to continue running after an exception has been thrown 

10
// but not handled. 

11
// For production applications this error handling should be replaced with something that will 

12
// report the error to the website and stop the application. 

13
e.Handled = true; 

14
Deployment.Current.Dispatcher.BeginInvoke(delegate { ReportErrorToDOM(e); }); 

15
} 

16
}

　　　　　　e.Handled来表明这个异常是不是已经被处理了。当Debug时，e.Handled会被设置为true，并且通过一个匿名方法异步的调用ReportErrorToDOM方法。而这个方法，则把异常信息以显示出来：

view source

print ?

01
private void ReportErrorToDOM(ApplicationUnhandledExceptionEventArgs e) 

02
{ 

03
try 

04
{ 

05
string errorMsg = e.ExceptionObject.Message + e.ExceptionObject.StackTrace; 

06
errorMsg = errorMsg.Replace('"', '\'').Replace("\r\n", @"\n"); 

07
 

08
System.Windows.Browser.HtmlPage.Window.Eval("throw new Error(\"Unhandled Error in Silverlight 2 Application " + errorMsg + "\");"); 

09
} 

10
catch (Exception) 

11
{ 

12
} 

13
}

自定义载入动画

　　在浏览器下载XAP文件时，如果下载时间超过500毫秒，就会加载一个载入动画。Silverlight提供了一个默认的装载动画，但是，大家都用默认动画，会让人觉得千篇一律。Silverlight在应用程序模型中提供了对自定义载入动画的支持。

　　要完成一个自定义动画，需要三件东西：XAML、javascript和Silverlight参数。

　　我们需要通过XAML来构造载入动画的界面。由于载入动画发生在XAP文件被下载之前，因此，它必须独立于XAP文件；载入时，系统还没有能够创建SLR运行的环境，因此，我们无法使用C#或者VB.NET等托管代码。这也是为什么我们需要javascript。javascript提供对当前下载进度的追踪，并且更新界面。Sliverlight参数则指定自定义动画所在的XAML文件和所使用的javascript函数。

让我们来小实战一把。首先，准备一个载入界面的XAML。我们可以通过添加Silverlight模板里的“Silverlight JScript Page”来添加一个XAML页面。这个XAML很简单，就提供了一个简单的进度条：

view source

print ?

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

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

03
<StackPanel VerticalAlignment="Center"> 

04
<Grid> 

05
<Rectangle x:Name="progressBarBackground" Fill="White" Stroke="Black" StrokeThickness="1" Height="30" Width="200"></Rectangle> 

06
<Rectangle x:Name="progressBar" Fill="Green" Height="28" Width="0"></Rectangle> 

07
</Grid> 

08
<TextBlock x:Name="progressText" HorizontalAlignment="Center" Text="0% downloaded ..."></TextBlock> 

09
</StackPanel> 

10
</Grid>

　　然后，我们在包含有Silverlight的HTML页面中，添加Javascript来处理下载进度：

view source

print ?

1
<script type="text/javascript"> 

2
function onSourceDownloadProgressChanged(sender, eventArgs) { 

3
sender.findName("progressText").Text = Math.round((eventArgs.progress * 100)) + "% downloaded ..."; 

4
sender.findName("progressBar").Width = eventArgs.progress * sender.findName("progressBarBackground").Width; 

5
} 

6
</script>

　　这里，我们通过findName来获得XAML中创建的控件，然后，通过eventArgs.progress来计划出下载量，并且对progressBar和progressText进行调整。

　　最后，我们通过参数，把自定义载入动画的XAML和javascript代码添加到Silverlight对象中：

view source

print ?

01
<div id="silverlightControlHost"> 

02
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" 

03
width="100%" height="100%"> 

04
<param name="source" value="ClientBin/CustomSplashDemo.xap" /> 

05
<param name="onError" value="onSilverlightError" /> 

06
<param name="background" value="white" /> 

07
<param name="minRuntimeVersion" value="3.0.40818.0" /> 

08
<param name="autoUpgrade" value="true" /> 

09
 

10
<param name="splashscreensource" value="NewSplash.xaml" /> 

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

12
 

13
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0" style="text-decoration: none"> 

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

15
style="border-style: none" /> 

16
</a> 

17
</object> 

18
<iframe id="_sl_historyFrame" style="visibility: hidden; height: 0px; width: 0px; 

19
border: 0px"></iframe> 

20
</div>

　　由于我们的Silverlight太小，看不到载入动画。这里有一个技巧，我们可以把startup事件处理程序中的this.RootVisual = new MainPage();注释掉，这样，Silverlight在载入完成后，就不会用MainPage的对象覆盖住自定义的载入动画，我们就可以看到载入动画的效果了。

　　由于VS2010 Beta2存在BUG，添加了XAML以后，WebSite无法编译，最后，只能用VS2008完成这个例子。