如何：定义简单的 Silverlight 初始屏幕

Silverlight 的托管 API 要求：在加载任何内容前，作为 Silverlight 插件的 source 引用的数据包必须完全呈现在客户端计算机上。如果这些数据包很小，用户将不会遇到明显的加载时间滞后的情况。但是，如果数据包特别大，那么当数据包在后台完成下载时，您可能想要显示一个占据整个 Silverlight 工作区的初始屏幕。初始屏幕本身只能使用 Silverlight 的 JavaScript API。当下载完成且数据包已加载并可用时，编程模型通常会从 JavaScript 切换为托管，然后在应用程序生存期内保持托管模式。

下载进度和完成事件

Silverlight 初始屏幕模型依赖于 Silverlight 插件公开的三个属性：

• splashscreensource：下载主数据包 (source) 的过程中显示的 XAML 页面的 URI。

• onsourcedownloadprogresschanged：引用一个 JavaScript 事件处理程序，在下载 source 的过程中，将会持续调用该处理程序。

• onsourcedownloadcomplete：引用一个 JavaScript 事件处理程序，source 下载完成后，将会调用一次该处理程序。（该事件在本主题中未说明。）

设置项目文件

有其他的方法来设置这种项目，但在本示例中，您将从一个基本的由 Visual Studio 生成的 Silverlight 项目开始。如果想要看到可正常工作的最终应用程序，还应该在数据包的程序集中添加数兆字节的伪数据，因为您希望下载过程持续足够长的时间，以便初始屏幕至少显示几秒钟。最初，您将从默认的初始屏幕行为开始。

设置项目文件

1. 打开 Visual Studio。从应用程序的 Silverlight 项目开始。对于本示例，将项目命名为 SplashScreenSource
2. 为了引入足够长的下载时间以使初始屏幕可检测到，特意使数据包大一些。要实现该目的，最快捷的方法是将大型嵌入式资源文件（即使实际上并不引用这些文件，它们也会增加数据包的大小）与主程序集打包在一起。项目已经将该程序集作为数据包的一部分生成。在计算机上找一些打包到程序集和 XAP 数据包时不会进行压缩的大文件（照片图像很符合这个要求，多页面的二进制格式文档也可以）。将这些文件复制并粘贴到项目目录中，然后将其作为现有项添加到项目中。将其中每个文件的生成操作设置为 "资源"。目标就是将至少 5 MB 的资源引入到程序集和数据包中。

3. （可选）。将一个 TextBlock 或其他某个可视 UI 元素添加到 mainpage.xaml（托管 API 应用程序的初始页）中，以便可以很容易地看到源已完成下载，当前正在显示来自主应用程序数据包的 XAML。

4. 生成项目并确保它编译。此时启动操作将只播放默认的初始屏幕。接下来，您将替换此默认行为。

添加自定义初始屏幕

要替换默认行为，您需要更改的是 SplashScreenSource_Web 项目，而不是 SplashScreenSource 项目。这是因为初始屏幕的 XAML 页一定位于数据包之外。否则，在下载数据包本身的过程中，将无法使用该页。

添加自定义初始屏幕

1. 在解决方案资源浏览器中右键单击 SplashScreenSource.Web，然后选择"属性"。单击"Web"选项卡。将"启动操作"的默认页从 SplashScreenSourceTestPage.aspx 改为 SplashScreenSourceTestPage.html。

2. 在解决方案资源浏览器中右键单击 SplashScreenSource.Web，然后依次选择"添加"、"新建项"。在"类别"树视图中选择"Silverlight"选项。选择"Silverlight JScript 页"选项。将页面命名为 SplashScreen.xaml。单击"添加"。

3. 如果 SplashScreen.xaml 尚未打开，请打开它进行编辑。您将要在其中创作初始屏幕。"全选"，"粘贴"下面的代码以覆盖现有代码，然后保存文件：                                                 
   <Canvas
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   x:Name="parentCanvas"
   Width="850"
   Height="600"
   Background="OldLace">
   <Canvas Canvas.Top="228.834" Canvas.Left="246.329" Width="357" Height="31.379">
   <Rectangle Width="27.545" Height="1" x:Name="uxProgress" Canvas.Top="29.545" Canvas.Left="1.4">
   <Rectangle.RenderTransform>
   <TransformGroup>
   <ScaleTransform x:Name="uxProgressBar" ScaleX="1" ScaleY="0"/>
   <SkewTransform AngleX="0" AngleY="0"/>
   <RotateTransform Angle="270"/>
   <TranslateTransform X="0" Y="0"/>
   </TransformGroup>
   </Rectangle.RenderTransform>
   <Rectangle.Fill>
   <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
   <GradientStop Color="#FFFFFFFF" Offset="1"/>
   <GradientStop Color="#FFFFFFFF" Offset="0"/>
   <GradientStop Color="#FF2975D0" Offset="0.28"/>
   <GradientStop Color="#FF2975D0" Offset="0.72"/>
   </LinearGradientBrush>
   </Rectangle.Fill>
   </Rectangle>                                                                                 
   <TextBlock x:Name="uxStatus" Height="25" Canvas.Left="125" Text="Loading..." TextWrapping="Wrap" Canvas.Top="4.16"/>                                                     
   <Path Width="356.85" Height="1" Fill="#FF3A3A3A" Stretch="Fill" Stroke="#FF000000" Canvas.Top="0" Data="M0,170.5 L356.84209,170.5" Opacity="0.35"/>
   <Path Width="1.662" Height="29.03" Fill="#FF3A3A3A" Stretch="Fill" Stroke="#FF000000" Canvas.Top="0.48" Canvas.Left="0.2" Data="M360,168 L360,0" Opacity="0.35" />             
   <Path Width="357.84" Height="1" Fill="#FF3A3A3A" Stretch="Fill" Stroke="#FF000000" Canvas.Top="29" Data="M0,170.5 L356.84209,170.5" Opacity="0.35"/>
   <Path Width="358.85" Height="1" Fill="#FFA2A2A2" Stretch="Fill" Stroke="#FF000000" Canvas.Top="30" Data="M0,170.5 L356.84209,170.5" Opacity="0.25"/>
   <Path Width="1.662" Height="30" Fill="#FF3A3A3A" Stretch="Fill" Stroke="#FF000000" Canvas.Left="356.01" Data="M360,168 L360,0" Opacity="0.35" Canvas.Top="-0.498"/>
   <Path Width="1" Height="31" Fill="#FFA2A2A2" Stretch="Fill" Stroke="#FF000000" Canvas.Left="357.333" Data="M360,168 L360,0" Opacity="0.245" Canvas.Top="-0.498" />
   </Canvas>
   </Canvas>

4. 返回到 SplashScreenSourceTestPage.html 的 Silverlight object 元素区域进行编辑。请注意，当前已存在大量作为 object 的子元素的"params"元素。现在将要添加几个 params 元素以添加您的自定义初始屏幕信息。添加以下 params 元素：                                                            
   <param name="splashscreensource" value="SplashScreen.xaml"/>
   <param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged" />

5. 第二个 params 元素引用一个 JavaScript 事件处理程序，您必须现在定义该处理程序。在解决方案资源浏览器中右键单击 SplashScreenSource.Web。在解决方案的文件列表中找到文件 SplashScreen.js（该文件是在上一步添加 SplashScreen.xaml 时添加的）。打开 SplashScreen.js 进行编辑。

6. 删除 SplashScreen.js 中所有之前存在的内容。在其中粘贴下面的 onSourceDownloadProgressChanged 函数，该函数将会更新 SplashScreen.xaml 中的进度栏。
   function onSourceDownloadProgressChanged(sender, eventArgs)
   {
   sender.findName("uxStatus").Text =  "Loading: " + Math.round((eventArgs.progress * 1000)) / 10 + "%";
   sender.findName("uxProgressBar").ScaleY = eventArgs.progress * 356;
   }

7. 返回到 SplashScreenSourceTestPage.html 进行编辑。您仍旧需要引用刚刚创建的 JavaScript 文件。在紧挨 HTML 中 head 元素的后面，添加以下内容：
   <script type="text/javascript" src="splashscreen.js"></script>

8. 生成项目并确保它编译。此时启动操作现在将加载 SplashScreenSourceTestPage.html，并首先加载初始屏幕，然后加载源。

9. 清除浏览器缓存（否则，浏览器可能仍会将程序集作为内容缓存，这样您就体验不到加载过程）。再次运行该应用程序。

以上摘自于MSDN,地址为http://msdn.microsoft.com/zh-cn/library/cc903962(VS.95).aspx

通过实践个人总结：

1.在解决方案资源浏览器中右键单击 SplashScreenSource.Web，然后选择"属性"。单击"Web"选项卡。将"启动操作"的默认页从 SplashScreenSourceTestPage.aspx 改为 SplashScreenSourceTestPage.html。

同时也可以使用默认的aspx页面，同样在aspx中添加相应文件即可。

2.对html或者aspx页面进行相应操作后，不要对文件进行编码格式化，否则无法实现初始化页面的效果，切忌。

3. SplashScreen.xaml 页面，则为我们初始化页面所展现的内容，可根据每个人的不同需求进行不同的设计，但是此xaml页面不能嵌入Image标签，他无法显示Image的uri，只能通过矢量进行展现。

希望通过msdn和我个人的总结，能够对你的使用起到事半功倍的效果。O(∩_∩)O~