SplashScreenSource的妙用

最新推荐文章于 2025-07-02 16:34:13 发布

weixin_34150830

最新推荐文章于 2025-07-02 16:34:13 发布

阅读量77

点赞数

本文介绍如何使用自定义XAML创建Silverlight应用的加载动画，包括定义初始屏幕、通过JavaScript控制进度条显示等内容加载进度的方法。

默认初始屏幕体验

在托管 API 下为 Silverlight 定义的默认体验是：超出某一时间阈值（约为 0.5 秒）的任何加载都将在内容区域中显示基于 XAML 的动画。显示该默认动画和初始化序列的 XAML 被硬编码到 Silverlight 插件中。

为了替换默认初始屏幕，您为在 HTML 中定义 object 元素的 Silverlight 插件的 splashScreenSource 参数提供一个值。或者，用于 Silverlight 的 ASP.NET 控件将定义一些 API，这些 API 将所需的初始屏幕相关参数设置到其在 HTML 中的输出 object 元素中。

以上是其的官方解释，简单的说呢就是可以利用初始屏幕来制作自定义的loading效果。

官方的中文文档写的相当详细了，这里我就不在做重复的熬述。
http://msdn.microsoft.com/zh-cn/library/cc838130%28VS.95%29.aspx

做法
1.先自己做一个想要的初始屏幕的xaml（在blend中创建一个silverlight 1的项目，用blend画一个loading界面）

< Canvas
         xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Name ="parentCanvas"
        xmlns:d ="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc ="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable ="d" >
   < Grid x:Name ="LayoutRoot" >
     < Grid   HorizontalAlignment ="Center" VerticalAlignment ="Center" Width ="280" Height ="37.807" >
     < Canvas Width ="280" Height ="37.807" >
       < TextBlock FontSize ="22" Foreground ="#FF949494" TextWrapping ="Wrap" >
         < Run Text ="SilverAlbum" />
       </ TextBlock >
       < TextBlock x:Name ="StatusText"
                 FontSize ="10"
                 Foreground ="#FF949494"
                 TextWrapping ="Wrap"
                 Canvas.Left ="150" Text =""
                 Canvas.Top ="13.16" />
       < Canvas Canvas.Top ="25.807" Width ="280" Height ="12" >
         < Rectangle Stroke ="#FF949494" StrokeThickness ="2" Width ="280" Height ="12" />
         < Rectangle x:Name ="ProgressBar"
                   Width ="272"
                   Height ="4"
                   Fill ="#FF949494" Canvas.Left ="4.26" Canvas.Top ="4" >
           < Rectangle.RenderTransform >
             < TransformGroup >
               < ScaleTransform x:Name ="ProgressBarTransform" ScaleY ="1" ScaleX ="0" />
               < SkewTransform />
               < RotateTransform />
               < TranslateTransform Y ="0" X ="0" />
             </ TransformGroup >
           </ Rectangle.RenderTransform >
         </ Rectangle >
       </ Canvas >
     </ Canvas >
     </ Grid >
   </ Grid >
</ Canvas >

2.在html页面中silverlightHost的地方修改以下代码

3.编写js文件（做过silverlight1.0开发的朋友应该不会陌生，就是通过js来控制silverlight中的元素）

function onSourceDownloadProgressChanged(sender, eventArgs) {
    sender.findName( " LayoutRoot " ).Width = document.body.clientWidth;
    sender.findName( " LayoutRoot " ).Height = document.body.clientHeight;
    sender.findName( " StatusText " ).Text = Math.round((eventArgs.progress * 1000 )) / 10 + " percent loaded " ;
    sender.findName( " ProgressBarTransform " ).ScaleX = eventArgs.progress;
}

这样就完成了一个自定义的loading效果。：）很简单吧

看到这里再请看看不用SplashScreenSource的做法

http://www.cnblogs.com/nasa/archive/2008/07/22/1248973.html

对比下；）哪种更见当方便？

效果预览： http://grmcac.com/silverlight/lab/silveralbum/