使用 Silverlight 4.0 自定义启动画面

• 下载源码 - 41.61 KB

引言

在这篇文章中，我将向您展示如何使用 Silverlight 4.0 创建自定义启动画面。

背景

Silverlight 启动画面模型依赖于 Silverlight 公开的三个属性。

• splashscreensource：在下载主程序包（源）时显示的 XAML 页面的 URI
• onsourcedownloadprogresschanged：引用一个 JavaScript 事件处理程序，该处理程序将在下载源时连续调用
• onsourcedownloadcomplete：引用一个 JavaScript 事件处理程序，该处理程序将在源下载完成后调用一次。（有关此属性的更多信息，请单击此处。）

Using the Code

要添加自定义启动画面：

1. 在 Visual Studio 中创建一个名为“CustomSplashScreen”的 Silverlight 应用程序。
   要替换默认行为，您将更改 CustomSplashScreen_Web 项目，而不是 CustomSplashScreen 项目。 这是因为启动画面的 XAML 页面必须位于程序包之外。 否则，在下载程序包本身时它将不可用。
2. 在解决方案资源管理器中右键单击 CustomSplashScreen.Web，然后选择“属性”。 单击“Web”选项卡。 将“启动操作”默认页面从 *CustomSplashScreenTestPage.aspx* 更改为 *CustomSplashScreenTestPage.html*。
3. 在解决方案资源管理器中右键单击 CustomSplashScreen.Web，然后选择“添加”， “新建项”。 在“类别”树视图中选择“Silverlight”选项。 选择“Silverlight JScript 页面”选项。 将页面命名为 *SplashScreen.xaml*。 单击“添加”。
4. 打开 *SplashScreen.xaml* 进行编辑（如果尚未打开）。 这是您编写启动画面的地方。 全选并粘贴以下代码覆盖现有代码，然后保存文件

   <Grid x:Name="LayoutRoot"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         mc:Ignorable="d"
         d:DesignHeight="300"
         d:DesignWidth="400">
       <Grid.Background>
   
           <RadialGradientBrush>
               <RadialGradientBrush.RelativeTransform>
                   <TransformGroup>
                       <ScaleTransform CenterX="0.5"
                                       CenterY="0.5"
   
                                       ScaleX="2"
                                       ScaleY="3" />
                       <TranslateTransform X="0.5"
                                           Y="0.5" />
   
                   </TransformGroup>
               </RadialGradientBrush.RelativeTransform>
               <GradientStop Color="#FFF26300"
                             Offset="0.282" />
               <GradientStop Color="#FFE29360"
   
                             Offset="1" />
           </RadialGradientBrush>
       </Grid.Background>
   
       <Grid.RowDefinitions>
           <RowDefinition Height="*" />
   
           <RowDefinition Height="Auto" />
       </Grid.RowDefinitions>
       <Grid  Grid.Column="0"
              Width="300"
   
              Height="300"
              Grid.Row="0"
              HorizontalAlignment="Center"
              VerticalAlignment="Center">
           <Ellipse Width="200"
   
                    Height="200"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Margin="0,0,0,0"
                    Fill="#FFF4A168"
   
                    Opacity="0.8" />
           <Ellipse Width="180"
                    Height="180"
                    HorizontalAlignment="Center"
   
                    VerticalAlignment="Center"
                    Margin="0,0,0,0"
                    Fill="#FFF26300"
                    Opacity="0.5" />
   
           <TextBlock x:Name="textBlock1"
                      TextWrapping="Wrap"
                      FontSize="110"
                      FontFamily="Trebuchet MS"
   
                      Foreground="White"
                      Text="100"
                      Opacity="0.8"
                      HorizontalAlignment="Center"
                      VerticalAlignment="Center" />
       </Grid>
   
       <Grid Grid.Row="1"
             Margin="0,0,0,50">
   
           <Rectangle Height="5"
   
                      Margin="0,10"
                      HorizontalAlignment="Stretch">
               <Rectangle.Fill>
                   <LinearGradientBrush EndPoint="0.5,1"
                                        StartPoint="0.5,0">
   
                       <GradientStop Color="#FFBBD2E8"
                                     Offset="0" />
                   </LinearGradientBrush>
               </Rectangle.Fill>
           </Rectangle>
   
           <Rectangle Height="8"
                      HorizontalAlignment="Stretch">
               <Rectangle.Fill>
                   <LinearGradientBrush EndPoint="0.5,1"
                                        StartPoint="0.5,0">
   
                       <GradientStop Color="#FF6BAAE8"
                                     Offset="0" />
                       <GradientStop Color="#FF216AB1"
                                     Offset="1" />
   
                   </LinearGradientBrush>
               </Rectangle.Fill>
               <Rectangle.RenderTransform>
                   <TransformGroup>
                       <ScaleTransform ScaleX="1"
                                       ScaleY="1"
   
                                       x:Name="scaleTransform" />
                       <SkewTransform AngleX="0"
                                      AngleY="0" />
                       <RotateTransform Angle="0" />
   
                       <TranslateTransform X="0"
                                           Y="0"
                                           x:Name="translateTransform" />
                   </TransformGroup>
   
               </Rectangle.RenderTransform>
           </Rectangle>
          
       </Grid>
   </Grid>

5. 返回到 *SplashScreenSourceTestPage.html* 的 Silverlight 对象元素区域进行编辑。 请注意，作为 object 的子元素，已经有许多“params”元素。 您现在将添加几个 params 元素以添加您的自定义启动画面信息。 添加以下 params 元素

   <param name="splashscreensource" value="SplashScreen.xaml" />
   
   <param name="onSourceDownloadProgressChanged" 
   	value="onSourceDownloadProgressChanged" />

6. 第二个 params 元素引用了一个 JavaScript 事件处理程序，您现在必须定义它。 在解决方案资源管理器中右键单击 CustomSplashScreen.Web。 在解决方案的文件列表中找到文件 *SplashScreen.js*（在之前的步骤中添加 *SplashScreen.xaml* 时添加了此文件）。 打开 *SplashScreen.js* 进行编辑。
7. 删除 *SplashScreen.js* 的所有预先存在的内容。 粘贴以下 onSourceDownloadProgressChanged 函数，该函数将更新 *SplashScreen.xaml* 中的进度条。

   function onSourceDownloadProgressChanged(sender, eventArgs)
   {
   sender.findName("textBlock1").Text = 
   	Math.round((eventArgs.progress * 100), 0).toString();
   sender.findName("scaleTransform").ScaleX = eventArgs.progress;
   }

8. 返回到 *CustomSplashScreenTestPage.html* 进行编辑。 您仍然需要引用刚刚创建的 JavaScript 文件。 在 HTML 中的 head 元素之后，添加以下内容...

   <script type="text/javascript" src="splashscreen.js" />

   ... 到您的项目中，并确保它可以编译。 此时的启动操作现在将加载 *CustomSplashScreenTestPage.html*，并首先加载您的启动画面，然后加载源。

   提示：清除您的浏览器缓存（否则，程序集可能仍被浏览器缓存为内容，您将无法体验加载时间）。 再次运行该应用程序。

就这样。 享受...