SilverLight之路（十六）

做到这里，基本上这个系统涉及到的sl知识点也都差不多都包含了，其它模块与功能无外乎是这些功能的重复或细化。当然，真正实现时肯定还会出现很多问题，但现在我无法预估，因此，以此篇来暂停这个项目的功能实现吧，如果以后有机会再继续完善，呵呵。

接下来，功能既然不再继续了，那我们再给项目增加一些“花边”吧，如修改一下初始化的加载页面。默认情况下，SL的加载页面是这样的

 

想不想换一个样子呢？其实很简单，有一个例子在网上好多次都转了，我也就再搬运一次吧（这让我想起了农夫山泉的广告：我们不生产水，我们只是大自然的搬运工）。

先在承载SL的站点目录下放上如下一个XAML文件，它就是我们的加载界面（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>

然后，在这个站点项目加再加入一个Js文件，如下

SplashScreen.js       

 

function onSourceDownloadProgressChanged(sender, eventArgs) {

    sender.findName("textBlock1").Text = Math.round((eventArgs.progress * 100), 0).toString();

    sender.findName("scaleTransform").ScaleX = eventArgs.progress;

}

再找到加载sl的页面，例如FT-WebFirst-SLTestPage.aspx页面，在其中的sl标记内添加一这个js文件的引用，并在sl的object内增加两个属性设置，如

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

          <param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged" />

那么到这，就应该猜到它的运行原理了吧，使用js的onSourceDownloadProgressChanged函数与SplashScreen.xaml进行通讯，以便在下载sl的过程中显示进度指示。

不过在这样做了之后，再F5编译的时候可能会通不过，因为站点项目是无法解析XAML，有两种办法：

添加相应的引用 以使XAML可以被识别。或者，干脆就把这个文件从项目中排除吧（注意可不是删除）。

现在我们运行起来看看效果吧，呃~！可能还看不出来，因为我们的项目太小了，很快就加载完了。那我们就手动把项目加大一点吧，添加一个电影啥的（别说你的电脑上没有电影），然后把它设置为“内容”就行了，这样就会在生成时把这个大的“内容”打包进xap中以便客户端浏览器进行下载，现在再运行看看，可以看到我们更新后的加载页面了

 

呼~想抓这张图还真不容易啊，呵呵！对了，回头记得把那个大家伙去掉，不然你每次生成的时候都要有一个复制过程，很慢啊~！