SilverLight 学习篇七

 

本主题包括下列各节。

  • 初始屏幕使用情况
  • JavaScript API
  • 默认初始屏幕体验
  • 应用程序项目中的基本初始屏幕
  • 初始屏幕使用情况详述
  • 使用 OnSourceDownloadComplete
  • 相关主题

 

初始屏幕使用情况

可用于构造 Silverlight 初始屏幕的功能集旨在处理以下情况，但并不仅限于这些方面：

  • 显示下载进度

  • 显示动画，即使不必使用它们来显示下载进度

  • 提供品牌，这可以包括文本、向量图形甚至视频

  • 显示产品信息，例如免责声明

在本主题的相关节中将进一步论述这些使用情况。一般而言，可用的功能集与可用于 Silverlight 的 JavaScript API 的功能集相同，并且还有一些专门支持初始屏幕功能的特定 API。

如果您的主要源内容也在使用 JavaScript API，则您将无法高效地使用此初始屏幕模型。这是因为初始屏幕模型依赖于来自加载的托管 AppDomain 的通知，该通知用作停止显示 SplashScreenSource 和开始显示 Source 的信号。您可以通过以下序列模拟相同的明显转换行为：

  1. 加载作为"初始屏幕"的初始 Source XAML 页。

  2. 使用 Downloader 开始下载主要源 XAML 页和任何初始资源，例如页面要求的图像或视频。

  3. 一旦每个 Downloader 为所有内容都引发 Completed 后，更改位于 HTML DOM 级别的实际 Source 值，这将卸载"初始屏幕"并加载您的主要内容。这一转换在此时是瞬时的，因为所需的每个元素都已预加载到浏览器缓存中。

JavaScript API

如果您已针对 Silverlight 1.0 进行了开发，则可能已对用于 Silverlight 的 JavaScript API 十分熟悉。如果您以前未针对 Silverlight 1.0 进行过开发，请参见 Silverlight 的 JavaScript API。JavaScript API 与针对 HTML DOM 的编程十分相似，并且实际上是在主机的脚本引擎中执行的，就像针对 DOM 的脚本一样，但 Silverlight API 扩展到在 XAML 页作为 Silverlight 插件的内容加载时创建的对象树中。这使您可以处理针对特定对象的事件，设置属性值，以及在运行时替换对象树的部分等。

默认初始屏幕体验

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

为了替换默认初始屏幕，您为在 HTML 中定义 object 元素的 Silverlight 插件的 splashScreenSource 参数提供一个值。

应用程序项目中的基本初始屏幕

在 Silverlight 中对于初始屏幕的基本支持在 Silverlight 插件基本代码级别定义。这将向处于 ActiveX 或 NPAPI 控件模型（取决于特定的浏览器）中的浏览器宿主公开，并且一般通过实例化 Silverlight 插件的 object 元素向 HTML DOM 和 HTML 公开。

Silverlight 插件的以下 params 选项专门用于初始屏幕支持：

 

参数

说明

SplashScreenSource

设置为初始屏幕提供视觉效果的 XAML 页的 URI。此页在 JavaScript API 下作为初始 Silverlight 内容加载。

OnSourceDownloadProgressChanged

设置正在下载 Source 期间对以增量方式调用的事件处理程序的名称。

OnSourceDownloadComplete

设置在 Source 下载完成后立即调用的事件处理程序的名称。

如果您为 OnSourceDownloadProgressChanged 或 OnSourceDownloadComplete 指定了一个处理程序，则引用的函数必须在运行时可用于浏览器脚本引擎。通常，这是通过在单独的 JavaScript 文件中定义该函数实现的。然后，您为承载定义 object 元素的 Silverlight 插件的 HTML 页包括脚本。在以下参考主题中提供针对事件处理程序原型的文档：OnSourceDownloadProgressChanged、OnSourceDownloadComplete。

用于 SplashScreenSource 的 XAML 页应可从某一 Web 服务器获取。此 XAML 页提供给 Silverlight 客户端，就像提供图像或托管 XAP 包之类的其他内容一样。应该对您的 Web 服务器进行配置，以便 .xaml 扩展名和用于 XAML 的相应 MIME 类型允许作为提供的内容。

初始屏幕具有安全注意事项，因为它们涉及跨 API 模式的转换，以及 HTML 页内的 Silverlight 初始化。为使这些转换更安全，您必须从相同的域提供初始屏幕进程的所有三个元素（宿主 HTML 页、初始屏幕 XAML、在初始屏幕显示时正下载的 XAP 包）。您可以选择通过 HTTPS 提供这些元素，但如果您这样做了，则必须将所有元素都作为 HTTPS 提供。

初始屏幕源必须是 XAML 文件。将 XAP 指定为初始屏幕源无效并且将会生成一个错误。

在如何定义简单的 Silverlight 初始屏幕主题中介绍了定义和打包一个简单的 Silverlight 初始屏幕的基本过程。

初始屏幕使用情况详述

下载进度

用于初始屏幕的一个常见情形就是显示可视进度指示器。对于许多用户而言，最基本和最熟悉的进度指示器是进度栏。典型的进度栏设计显示一个水平延伸的矩形区域，该区域最初显示为白色或空。在下载或操作正在进行时，这个空区域逐渐被更深颜色的栏填充，并且只要更深颜色的栏完全填充该矩形，进度即完成。有时候，这一视觉效果通过显示数字百分比的文本区域来实现。

在 Silverlight 初始屏幕模型中，确定下载进度的方法是通过从 OnSourceDownloadProgressChanged 处理程序的事件数据内读取 Progress 属性的值。

尽管进度栏在视觉外观上可能与动画类似，但通常不需要使用 Silverlight 动画 API 来生成进度栏。您只需通过在 OnSourceDownloadProgressChanged 的每次迭代时使用 Progress 的某个因子来更新某个属性。

例如，以下 XAML 定义此类进度栏的一个简单版本：

 复制代码 
<Canvas Background="Black" Width="302" Height="52">
  <Rectangle Canvas.Left="1" Canvas.Top="1" Width="300" Height="30" Fill="White"/>
  <Rectangle x:Name="progressBarFill" Canvas.Left="1" Canvas.Top="1" Height="30" Fill="Blue"/>
</Canvas>

为了生成可视进度，您通过在处理程序中设置 progressBarFill 的宽度，在每次迭代时重置填充栏的值。progress 是介于 0 和 1 之间的值，因此您将其用作相对于进度栏区域的可能总宽度的因子。

 复制代码 
function onProgressChanged(sender, eventArgs)
{
    var slPlugin = sender.getHost();
    slPlugin.content.findName("progressBarFill").width = eventArgs.progress * 300;
}

动画不是必需的，因为 Silverlight 呈现系统会检测到对象树中运行时更改的属性值并相应重绘视觉效果。

动画

用于初始屏幕的另一个常见情形就是显示循环动画。循环动画用于向用户指示应用程序和浏览器仍在运行并且能够呈现更新，还指示未发生任何意外（浏览器崩溃、连接错误等）。

对于这些动画类型，总的动画持续时间是不确定的，因为其目的是为了在用户等待下载完成这一时间段中运行动画。因此，要使用的动画的最佳类型是具有自然循环行为并具有 Forever 运行时的动画。在整个 XAML 页被卸载后该动画将"停止"，并且 Silverlight 插件将从下载完成包中加载内容。

通常可以完全在 XAML 中编写动画。若要运行动画，可以在 XAML 标记中使用 Storyboard 的 EventTrigger 包容，以便在首次加载动画时运行该动画。或者，您可以在 JavaScript API 下在根元素上处理 Loaded 之类的对象生存期事件，从某一 Resources 集合检索相关的 Storyboard，并且对 Storyboard 调用 Storyboard..::..Begin 以开始动画。

有关如何编写动画以及动画的一般工作方式的更多信息，请参见动画概述。请注意，动画概述主题主要是为托管 API 的用户编写的，可能没有适合 JavaScript API 情形的代码示例或特定信息。请阅读这一概述来加深概念上的理解。在概述中提供的某些 XAML 示例可能很有用，只需执行少量工作（例如删除 x:Class 之类的托管 API 细节）便可以利用这些示例。然后，您可以根据需要从 Silverlight 的 JavaScript API 参考的以下主题中了解更多信息：

  • ColorAnimation

  • DoubleAnimation

  • PointAnimation

  • Storyboard

  • 资源

  • EventTrigger

您还可以通过将非线性内插用于位置和速度，使用关键帧动画来用于更精细微调的动画。它们可用于初始屏幕中非常简单的物理模拟，例如回力球。有关更多信息，请参见关键帧动画。就强调 XAML 示例的托管编程和可能的应用而言，适用同样的条件。另请参见 Silverlight 的 JavaScript API 参考中的下列主题：

  • ColorAnimationUsingKeyFrames

  • DoubleAnimationUsingKeyFrames

  • PointAnimationUsingKeyFrames

  • KeySpline

品牌

在许多应用程序模型中，传统的初始屏幕只显示单个较大的位图，并且可能显示进度指示器作为用户界面的较小部分。此类初始屏幕的一般目标是突出显示产品品牌信息。没有什么可以妨碍您为 Silverlight 初始屏幕采用此方法。在最简单的层级上，您的初始屏幕 XAML 可以只由显示位图的单个 Image 元素构成。不过，这可能不是理想方法；因为如果位图较大，图像源将以异步方式下载，所以您的初始屏幕在显示前可能会稍微延迟。

充分利用 Silverlight 的强大功能的一个更好方法是将您的初始屏幕编写为矢量图形。您可以使用在路径标记语法主题中描述的路径在某些情况下导入现有矢量信息。或者，您可以使用生成与 Silverlight 兼容的 XAML 标记的设计工具，例如 Microsoft Expression Design。此外，您可以集成由此类工具在设计时生成的任何动画，或者通过将固定矢量图形集的某些属性作为目标并使用演示图板对它们进行动画处理，在以后将动画添加到图形。

产品信息

您的初始屏幕可能要显示主要包含文本的区域。为了简化本地化，您可能要将文本保持在内容的矢量图形部分之外。JavaScript API 不像托管 API 那样具有成熟的本地化框架，但即便如此，它仍可用于在整个标记中将本地化需求隔离到某些控件。

在您为某一初始屏幕显示文本时，将被限制在可用于 JavaScript API 的文本元素上。对于只读文本有两种可能的技术：TextBlock 或 标志符号。

TextBlock 可能是更轻量级的技术，特别是在您只是针对拉丁字母区域性时。您将 TextBlock 内容指定为一个字符串。在 TextBlock 内，您可以进行一些基本的文本格式设置，例如调整大小、应用颜色或画笔以及使用 LineBreak 进行块级格式设置。如果您想要使用在 TextBlock 中描述的默认字体之外的其他字体，则必须下载该字体；请参见 SetFontSource。

标志符号 是更通用的技术，因为您可以提供划分了子集的字体以及 UnicodeString，这便于使用远东字体和字符串。唯一的复杂因素就是您需要可生成划分了子集的字体和兼容的 Unicode 索引/字符串的工具。在 标志符号 中描述了使用来自 Microsoft Word 的 XPS 输出的技术。

使用 OnSourceDownloadComplete

引发 OnSourceDownloadComplete 之时也就是初始屏幕 XAML 被卸载之时，此时准备加载包。因此，执行影响 Silverlight 对象树的任何操作通常并无意义。而是可使用 OnSourceDownloadComplete 作为提示来在周围 HTML 中更新用户界面，或者可以更改您在 Silverlight 内容区域之上呈现的任何 HTML 重叠（如果您使用该技术）。

 

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

下载进度和完成事件

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

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

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

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

设置项目文件

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

设置项目文件

  1. 打开 Visual Studio 2008。从应用程序的 Silverlight 项目开始。对于本示例，将项目命名为 SplashScreenSource

    重要说明：

    选择为项目创建网站的选项。此操作的项目对话框中的 Visual Studio UI 会根据所安装的 Silverlight Tools for Visual Studio 的版本而有所不同。对于版本 2 的这些工具，请选择"创建网站"，这是默认调试/startpage 选项。对于版本 3 的这些工具，请选中"在新网站中承载 Silverlight 应用程序"复选框，这也是默认选项。必须执行该操作才能看到下载进度；如果选择其他选项，将在文件系统中查看 HTML 页面，并且文件传输的速度将会非常快，以致于看不到初始屏幕。

  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>
    说明：

    为了演示本示例，我们将为您提供初始屏幕的动画，但您也可以将自己的动画放在此处有关可能的动画技术的更多信息，请参见 Silverlight 初始屏幕。

  4. 返回到 SplashScreenSourceTestPage.html 的 Silverlightobject 元素区域进行编辑。请注意，当前已存在大量作为 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. 清除浏览器缓存（否则，浏览器可能仍会将程序集作为内容缓存，这样您就体验不到加载过程）。再次运行该应用程序。

提示：

最佳做法是将相同的 Background 颜色用于初始屏幕 XAML 和您的应用程序的一般配色方案。这可以为用户提供更好的视觉过渡。

 

posted on 2012-08-30 11:28  寒舞逸  阅读(489)  评论(0)    收藏  举报
博客园  ©  2004-2026
浙公网安备 33010602011771号 浙ICP备2021040463号-3