在Silverlight 4.0中,启动画面模型依赖于Silverlight暴露的三个属性。这些属性允许开发者在主程序包下载时展示一个自定义的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",然后加载启动画面,最后加载源。