Silverlight 4.0 自定义启动画面

在Silverlight 4.0中,启动画面模型依赖于Silverlight暴露的三个属性。这些属性允许开发者在主程序包下载时展示一个自定义的XAML页面。以下是实现自定义启动画面的步骤和代码示例。

属性介绍

启动画面模型主要依赖以下三个属性:

  • splashscreensource: 显示在主程序包下载时的XAML页面的URI。
  • onsourcedownloadprogresschanged: 引用一个JavaScript事件处理程序,当源下载进度发生变化时会被连续调用。
  • onsourcedownloadcomplete: 引用一个JavaScript事件处理程序,当源下载完成时会被调用一次。

创建自定义启动画面

要添加自定义启动画面,请按照以下步骤操作:

  1. 在Visual Studio中创建一个名为"CustomSplashScreen"的Silverlight应用程序。
  2. 为了替换默认行为,需要修改"CustomSplashScreen_Web"项目,而不是"CustomSplashScreen"项目。这是因为启动画面的XAML页面必须在包之外,否则在包本身下载时它将不可用。
  3. 在解决方案资源管理器中右键点击"CustomSplashScreen.Web",选择"属性"。点击“Web”标签,将启动操作默认页面从"CustomSplashScreenTestPage.aspx"更改为"CustomSplashScreenTestPage.html"。
  4. 在解决方案资源管理器中右键点击"CustomSplashScreen.Web",选择"添加","新建项"。在类别树视图中选择"Silverlight"选项,然后选择"Silverlight JScript页面"。将页面命名为"SplashScreen.xaml",然后点击"添加"。
  5. 打开"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>

接下来,回到"SplashScreenSourceTestPage.html"进行编辑。注意,object元素中已经有多个"param"子元素。现在,将添加几个"param"元素以添加自定义启动画面信息。添加以下"param"元素:

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

第二个"param"元素引用了一个JavaScript事件处理程序,现在必须定义它。在解决方案资源管理器中右键点击"CustomSplashScreen.Web"。在解决方案的文件列表中找到"SplashScreen.js"文件(这个文件是在之前添加"SplashScreen.xaml"时添加的)。打开"SplashScreen.js"进行编辑。

删除"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; }

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

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

...到项目中,并确保它编译。此时的启动操作将首先加载"CustomSplashScreenTestPage.html",然后加载启动画面,最后加载源。

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485