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中以便客户端浏览器进行下载，现在再运行看看，可以看到我们更新后的加载页面了
呼~想抓这张图还真不容易啊，呵呵！对了，回头记得把那个大家伙去掉，不然你每次生成的时候都要有一个复制过程，很慢啊~！