SilverLight之路(十六)

来源:互联网 时间:1970-01-01

做到这里,基本上这个系统涉及到的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中以便客户端浏览器进行下载,现在再运行看看,可以看到我们更新后的加载页面了

 

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

本文来自第八颗流星的博客,原文地址:http://www.cnblogs.com/meteortent/archive/2011/06/30/2093606.html


相关阅读:
Top