每一款商业的Silverlight项目,为了体现项目个性化,都会有不同的界面设计,项目UI设计的第一步就是创建个性的自定义启动画面,本文将介绍如何创建Silverlight自定义启动画面,也就是经常说的Splash Screen.
Silverlight初始化建立启动画面如下图:
经过修改,将改如下图:
根据上图我们可以看出,该启动画面分为三个部分,图片部分,进度条部分,百分比部分,对于图片部分,以后我们将修改为动画图片,现在着重介绍进度条和百分比部分。
1. 首先,使用文本工具创建一个空文件,命名为“SplashScreen.xaml”,该文档是为了承载自定义启动画面的控件代码所用,由于我们创建自定义启动画面,需要覆盖替换原始启动画面,为了不让该文件封装到XAP包中,我们使用其他文本工具先创建一个独立的空文件。文件创建后,可以使用VS2008或者Blend添加到项目中。
2. 现在可以使用VS2008或者Blend打开SplashScreen.xaml文件,填写以下代码:
2 xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" 3 VerticalAlignment ="Center" Margin ="0,100,0" > 4 <!-- 头部图片 --> 5 Image x:Name ="myImage" Source ="/silverlightchina.png" 6 Height ="56" 7 Width ="220" 8 HorizontalAlignment 9 VerticalAlignment 10 Margin ="10" /> 11 12 HorizontalAlignment ="Center" 13 进度条 14 Grid 15 Rectangle stroke ="#FFDEE6F0" HorizontalAlignment ="Left" Width ="300" Height RadiusX ="2" RadiusY strokeThickness ="1" 16 Fill ="#FF7E99C8" VerticalAlignment ="0" ="296" ="6" x:Name ="progressBar" RenderTransformOrigin ="4" 17 Rectangle.RenderTransform 18 ScaleTransform ="progressBarScale" 19 </ 20 Rectangle 21 Grid 22 23 百分比 24 25 TextBlock ="progresstext" ="18,17,19" ="26" Text ="0%" FontSize ="16" Opacity ="0.8" ="Bottom" TextAlignment ="Right" 26 ="progresstext2" ="70" ="50" ="0.04" FontWeight ="Bold" 27 28 StackPanel 29 >
代码中的进度条部分,我们定义了两个矩形,一个是外部的边框矩形,一个是内部的进度矩形,通过属性设置其显示效果。
百分比部分,我们定义了两个TextBlock,显示百分比数值。
3. 在新建的Silverlight项目中,VS2008会自动创建测试页面CustomizeSplashScreenTestPage.html和CustomizeSplashScreenTestPage.aspx,该测试页面是通过Object对XAP进行下载和调用,为了让Silverlight项目识别自定义启动画面,我们需要在OBJECT中添加以下参数,在代码下载中,我仅修改了CustomizeSplashScreenTestPage.html:
1
param
name
="splashscreensource"
value
="SplashScreen.xaml"
2
="onSourceDownloadProgressChanged"
/>