Silverlight自定义splash page

时间：2010-10-08 来源：allanli

最近做silverlight的项目，leader要求实现一个自定义的load界面（splash page），google了之后，发现silverlight提供了相应的接口，developer可以轻松地实现splash page。

silverlight自带的splash page的load界面如下所示：

原因：为什么不使用silverlight自带的loading界面呢，1）太大众化，基本上所有的silverlight应用程序都使用这个界面；2）界面加载的百分比不是很准确。

实现步骤：

1）新建silverlight工程，命名SplashScreenSource。

2）右键点击SplashScreenSource.Web方案文件->添加新项->选择silverlight JScript Page->命名为SplashScreen.xaml。并将以下代码替换其中的代码：

<Canvas
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        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>
3)在SplashScreenSource.aspx文件中添加：

4）继续添加：

5)在SplashScreen.js中添加：

sender.findName("uxProgressBar").ScaleY = eventArgs.progress * 356;
sender.findName("uxStatus").Text = "Loading: " + Math.round((eventArgs.progress * 1000)) / 10 + "%";
至此，一个自定义的loading界面就完成了。

问题解决：

1）在进行上面第一，二步骤的时候可能出现如下错误：

Project file must include the .NET Framework assembly …

解决方案：

Change:

<Page Include="ClientBin\Themes\GreenGardenTheme.xaml" >   <SubType>Designer</SubType>   <Generator>MSBuild:Compile</Generator> </Page >

To:

<Content Include="ClientBin\Themes\GreenGardenTheme.xaml" >  </Content>

2）运行时看不见自定义的loading界面，原因是xap包不够大，载入时间没有达到0.5秒。

解决方案：

（1）放一个足够大的视频文件在clientBin下面，并且把加载属性设置为content。

（2）使用Fiddler来增加接收请求的时间。