Silverlight载入动画(简易)
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<BR>
02
{<BR>
03
public
App()<BR>
04
{<BR>
05
this
.Startup +=
this
.Application_Startup;<BR>
06
this
.Exit +=
this
.Application_Exit;<BR>
07
this
.UnhandledException +=
this
.Application_UnhandledException;<BR>
08
<BR>
09
InitializeComponent();<BR>
10
}<BR>
11
}
因此,App什么都没有做,只是傻傻的添加了三个事件的处理程序,分别对应了Silverlight的启动、退出和出现异常。而真正意义上的代码,发生在应用程序的Startup事件中:
view source
print?
1
private
void
Application_Startup(
object
sender, StartupEventArgs e)<BR>
2
{<BR>
3
this
.RootVisual =
new
MainPage();<BR>
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"
<BR>
02
width="100%" height="100%"><
BR
>
03
<
param
name
=
"source"
value
=
"ClientBin/ApplicationModel.xap"
/><
BR
>
04
<
param
name
=
"onError"
value
=
"onSilverlightError"
/><
BR
>
05
<
param
name
=
"background"
value
=
"white"
/><
BR
>
06
<
param
name
=
"minRuntimeVersion"
value
=
"3.0.40818.0"
/><
BR
>
07
<
param
name
=
"autoUpgrade"
value
=
"true"
/><
BR
>
08
<
param
name
=
"initParams"
value
=
"initWords1=Hello,initWords2=World"
/><
BR
>
09
<
a
href
=
"http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0"
style
=
"text-decoration: none"
><
BR
>
10
<
img
src
=
"http://go.microsoft.com/fwlink/?LinkId=161376"
alt
=
"Get Microsoft Silverlight"
<BR>
11
style="border-style: none" /><
BR
>
12
</
a
><
BR
>
13
</
object
>
这个参数必须以“initParams”命名,参数的键与值之间以等号分隔;多个参数之间用逗号分隔。然后,我们就可以通过e.InitParams对初始化参数进行访问了,例如:
view source
print?
01
private
void
Application_Startup(
object
sender, StartupEventArgs e)<BR>
02
{<BR>
03
this
.RootVisual =
new
MainPage();<BR>
04
if
(e.InitParams.ContainsKey(
"initWords2"
))<BR>
05
{<BR>
06
TextBlock tb =
new
TextBlock();<BR>
07
tb.Text = e.InitParams[
"initWords2"
].ToString();<BR>
08
((MainPage)
this
.RootVisual).LayoutRoot.Children.Add(tb);<BR>
09
}<BR>
10
}
我们取出了参数列表中的第二个参数,把它赋给了一个TextBlock并且添加到了MainPage的Grid中去。
- Exit
Exit事件在Silverlight退出时,会被触发。这一事件可以给程序一个最后的机会来保存用户相关的数据,例如记录当前用户的偏好等。
- UnhandledException
顾名思义,UnhandledException会发生在有未处理的异常被系统捕获到的时候触发。Silverlight为我们生成了一些默认的处理程序:
view source
print?
01
private
void
Application_UnhandledException(
object
sender, ApplicationUnhandledExceptionEventArgs e)<BR>
02
{<BR>
03
// If the app is running outside of the debugger then report the exception using<BR>
04
// the browser's exception mechanism. On IE this will display it a yellow alert <BR>
05
// icon in the status bar and Firefox will display a script error.<BR>
06
if
(!System.Diagnostics.Debugger.IsAttached)<BR>
07
{<BR>
08
<BR>
09
// NOTE: This will allow the application to continue running after an exception has been thrown<BR>
10
// but not handled. <BR>
11
// For production applications this error handling should be replaced with something that will <BR>
12
// report the error to the website and stop the application.<BR>
13
e.Handled =
true
;<BR>
14
Deployment.Current.Dispatcher.BeginInvoke(
delegate
{ ReportErrorToDOM(e); });<BR>
15
}<BR>
16
}
e.Handled来表明这个异常是不是已经被处理了。当Debug时,e.Handled会被设置为true,并且通过一个匿名方法异步的调用ReportErrorToDOM方法。而这个方法,则把异常信息以显示出来:
view source
print?
01
private
void
ReportErrorToDOM(ApplicationUnhandledExceptionEventArgs e)<BR>
02
{<BR>
03
try
<BR>
04
{<BR>
05
string
errorMsg = e.ExceptionObject.Message + e.ExceptionObject.StackTrace;<BR>
06
errorMsg = errorMsg.Replace(
'"'
,
'\''
).Replace("\r\n
", @"
\n");<BR>
07
<BR>
08
System.Windows.Browser.HtmlPage.Window.Eval(
"throw new Error(\"Unhandled Error in Silverlight 2 Application "
+ errorMsg +
"\");"
);<BR>
09
}<BR>
10
catch
(Exception)<BR>
11
{<BR>
12
}<BR>
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"
<BR>
02
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"><
BR
>
03
<
StackPanel
VerticalAlignment
=
"Center"
><
BR
>
04
<
Grid
><
BR
>
05
<
Rectangle
x:Name
=
"progressBarBackground"
Fill
=
"White"
Stroke
=
"Black"
StrokeThickness
=
"1"
Height
=
"30"
Width
=
"200"
></
Rectangle
><
BR
>
06
<
Rectangle
x:Name
=
"progressBar"
Fill
=
"Green"
Height
=
"28"
Width
=
"0"
></
Rectangle
><
BR
>
07
</
Grid
><
BR
>
08
<
TextBlock
x:Name
=
"progressText"
HorizontalAlignment
=
"Center"
Text
=
"0% downloaded ..."
></
TextBlock
><
BR
>
09
</
StackPanel
><
BR
>
10
</
Grid
>
然后,我们在包含有Silverlight的HTML页面中,添加Javascript来处理下载进度:
view source
print?
1
<script type=
"text/javascript"
><BR>
2
function
onSourceDownloadProgressChanged(sender, eventArgs) {<BR>
3
sender.findName(
"progressText"
).Text = Math.round((eventArgs.progress * 100)) +
"% downloaded ..."
;<BR>
4
sender.findName(
"progressBar"
).Width = eventArgs.progress * sender.findName(
"progressBarBackground"
).Width;<BR>
5
}<BR>
6
</script>
这里,我们通过findName来获得XAML中创建的控件,然后,通过eventArgs.progress来计划出下载量,并且对progressBar和progressText进行调整。
最后,我们通过参数,把自定义载入动画的XAML和javascript代码添加到Silverlight对象中:
view source
print?
01
<
div
id
=
"silverlightControlHost"
><
BR
>
02
<
object
data
=
"data:application/x-silverlight-2,"
type
=
"application/x-silverlight-2"
<BR>
03
width="100%" height="100%"><
BR
>
04
<
param
name
=
"source"
value
=
"ClientBin/CustomSplashDemo.xap"
/><
BR
>
05
<
param
name
=
"onError"
value
=
"onSilverlightError"
/><
BR
>
06
<
param
name
=
"background"
value
=
"white"
/><
BR
>
07
<
param
name
=
"minRuntimeVersion"
value
=
"3.0.40818.0"
/><
BR
>
08
<
param
name
=
"autoUpgrade"
value
=
"true"
/><
BR
>
09
<
BR
>
10
<
param
name
=
"splashscreensource"
value
=
"NewSplash.xaml"
/><
BR
>
11
<
param
name
=
"onsourcedownloadprogresschanged"
value
=
"onSourceDownloadProgressChanged"
/><
BR
>
12
<
BR
>
13
<
a
href
=
"http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0"
style
=
"text-decoration: none"
><
BR
>
14
<
img
src
=
"http://go.microsoft.com/fwlink/?LinkId=108181"
alt
=
"Get Microsoft Silverlight"
<BR>
15
style="border-style: none" /><
BR
>
16
</
a
><
BR
>
17
</
object
><
BR
>
18
<
iframe
id
=
"_sl_historyFrame"
style="visibility: hidden; height: 0px; width: 0px;<BR>
19
border: 0px"></
iframe
><
BR
>
20
</
div
>
由于我们的Silverlight太小,看不到载入动画。这里有一个技巧,我们可以把startup事件处理程序中的this.RootVisual = new MainPage();注释掉,这样,Silverlight在载入完成后,就不会用MainPage的对象覆盖住自定义的载入动画,我们就可以看到载入动画的效果了。
由于VS2010 Beta2存在BUG,添加了XAML以后,WebSite无法编译,最后,只能用VS2008完成这个例子。
写在最后
Silverlight从插件被下载到正常运行,一共6个步骤。这六步中,会触发Startup事件;到遇到用户未处理异常时,会触发UnhandledException事件;而Silverlight退出时,会触发Exit事件。
Silverlight为自定义载入动画提供了良好的支持。只是由于其载入阶段较早,无法使用托管代码。幸运的是,对应的javascript还算比较直接、明了。
Silverlight载入动画(简易)相关推荐
- Silverlight Blend动画设计系列六:动画技巧(Animation Techniques)之对象与路径转化、波感特效...
原文:Silverlight & Blend动画设计系列六:动画技巧(Animation Techniques)之对象与路径转化.波感特效 当我们在进行Silverlight & Bl ...
- Silverlight Blend动画设计系列四:倾斜动画(SkewTransform)
Silverlight中的倾斜变化动画(SkewTransform)能够实现对象元素的水平.垂直方向的倾斜变化动画效果.我们现实生活中的倾斜变化效果是非常常见的,比如翻书的纸张效果,关门开门的时候门缝 ...
- 用silverlight做动画-相机
用silverlight做动画-相机 适合初学者学习 做一个相机的动画 和做flash动画一样,准备好素材 将素材放入项目中 开始正式制作前为了方便以后重用,就把这个动画做成usercontrol(和 ...
- Silverlight Blend动画设计系列五:故事板(StoryBoards)和动画(Animations)
原文:Silverlight & Blend动画设计系列五:故事板(StoryBoards)和动画(Animations) 正如你所看到的,Blend是一个非常强大的节约时间的设计工具,在Bl ...
- 网页图表Highcharts实践教程之标签组与载入动画
网页图表Highcharts实践教程之标签组与载入动画 Highcharts标签组 在图表的大部分元素都提供了标签功能.但很多时候,我们需要额外说明一些信息.这个时候借助原有的图表元素的标签功能就不 ...
- Windows Phone开发之路(9) Silverlight之动画
动画(Animation)是Silverlight(以下简称SL)的一项关键特性,因为它提供了一些炫目的效果,而这些是那些基于服务器编程框架所无法仿效的(比如ASP.NET).在SL中,动画可以实现很 ...
- Silverlight Blend动画设计系列八:拖放(Drag-Drop)操作与拖放行为(DragBehavior)
Silverlight & Blend动画设计系列八:拖放(Drag-Drop)操作与拖放行为(DragBehavior) 原文:Silverlight & Blend动画设计系列八: ...
- 网页图表Highcharts实践教程之标签组与载入动画
网页图表Highcharts实践教程之标签组与载入动画 Highcharts标签组 在图表的大部分元素都提供了标签功能.但很多时候,我们需要额外说明一些信息.这个时候借助原有的图表元素的标签功能就不是 ...
- Silverlight Blend动画设计系列十二:三角函数(Trigonometry)动画之自由旋转(Free-form rotation)...
说到对象的旋转,或许就会联想到对象角度的概念.对象的旋转实现实际上就是利用对象的角度改变来实现的位置变换,在<Silverlight & Blend动画设计系列二:旋转动画(Rotate ...
- Silverlight Blend动画设计系列七:模糊效果(BlurEffect)与阴影效果(DropShadowEffect)...
模糊效果(BlurEffect)与阴影效果(DropShadowEffect)是两个非常实用和常用的两个特效,比如在开发相册中,可以对照片的缩略图添加模糊效果,在放大照片的过程中动态改变照片的大小和模 ...
最新文章
- UITableviewcell重用机制以及解决重绘出现的重叠现象
- vue.js 三种方式安装--npm安装
- 今日代码(200725)--数据录入(python+mysql)
- 堆栈verilog设计实现及仿真
- LeetCode —— 145. 二叉树的后序遍历【递归与迭代】(Python)
- ajax回调给全局变量,jquery.Ajax回调成功后数据赋值给全局变量的问题
- python dropout_Python slim.dropout方法代码示例
- 统计学习方法读书笔记10-决策树
- VUE页面中加载外部HTML
- Java代理模式——CGLIB动态代理
- 10月17日 Spring Cloud 周三
- Redis的读写分离
- 做好职业规划,做一个平凡而不平庸的自己
- apk编辑器android源码,apk编辑器电脑版_apk编辑器电脑版下载[apk编译]- 下载之家
- 影片相继撤档“520”,在线票务平台等待下一个“黄金档”
- asc和desc的英文全称
- 锐捷客户端-您不在许可范围中,请确认您的权限
- CPU 与 GPU 渲染:如何选择及原因?
- 【STM32 HAL库+STM32CUBEMX】使用usart1打印串口数据
- windows使用命令行创建文件echo >test.txt(可以是.gp .js .ts..)
热门文章
- H264的码率控制方法(CBR, VBR, CVBR,ABR)
- 一元二次方程共轭复根c语言,共轭复根怎么求(共轭虚根α和β怎么求)
- Element-UI下拉框el-select实现拼音搜索
- html5 canvas 虚线,HTML5 canvas画带箭头的虚线
- 计算机画图怎样更改文字,一招教你利用画图工具修改图片上的文字
- 《百词斩背单词》四级词汇(3486个)-1
- 索尼计算机bios正确设置,索尼vaio笔记本如何进入bios设置_索尼笔记本进入bios图解...
- datastore java_Java Datastore.find方法代码示例
- android expandablerecycle 动画,Android Expandable RecyclerView不同卡高
- python label背景透明_如何使tkinter标签的背景透明,以便只看到文本?