Silverlight加载界面实现方法解析

Silverlight加载界面的实现方法在这篇文章中将会为大家详细介绍。希望对一些又需要的朋友men有些帮助。在一个解决方案中，有SplashScreenSourceweb和SplashScreenSource两个项目。#t#

要往silverlight中加入自定义装载界面，需要加入到SplashScreenSourceweb项目中，这样，自定义装载界面就不会和其它xaml文件一起打包到silverlight程序包中。

Silverlight加载界面步骤如下：

1.右击silverlightapplicationweb项目，选择属性，选择启动选项，把SplashScreenSourceTestPage.html设为启动页面。

2.右击silverlightapplicationweb项目，选择添加新项，选择添加一个Silverlight JScript 页，命名为SplashScreen.xaml。

3.打开SplashScreen.xaml，换成如下代码：

< Canvas 
xmlns="http://schemas.microsoft.
com/client/2007"   
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，把代码

< param name="source" 
value="ClientBin/Splash
ScreenSource.xap"/> 

改成

< param name="source" 
value="SplashScreenSource.xap"/>  

5.在解决方案资源管理器中，把ClientBin目录下的SplashScreenSource.xap拖到SplashScreenSourceWeb根目录下。

6.打开SplashScreenSourceTestPage.html，加入如下代码：

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

Silverlight加载界面7.打开SplashScreen.js，输入以下代码：

function onSourceDownload
ProgressChanged(sender, eventArgs)  
{  
sender.findName("uxStatus").
Text = "Loading: " + Math.
round((eventArgs.progress * 
1000)) / 10 + "%";  
sender.findName("uxProgressBar").
ScaleY = eventArgs.progress * 356;  
} 

8.打开SplashScreenSourceTestPage.html，加入以下代码：

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

9.运行Silverlight加载界面！