Silverlight 系统初始加载进度条美化

使用Silverlight进行Web开发的都非常熟悉下面的Microsoft自带的进度加载条：

这个美观上先不说，而且和实际的xap加载内容时间上较长，让用户等待时间过长，用户体验差。

这里提供一个方法：

首先看下效果图：

在美观度和加载时间上都有较大改善。

下面将实现方法罗列如下：

1、在网站根目录下增加一个SplashScreen.xaml的文件，你可以新建一个txt文档，然后拷贝下面的代码，然后将后缀名txt修改成xaml即可，里面的图片根据你实际的来，可以使用网络上的绝对路径图片，也可以使用相对路径，图片放在网站根目录下，其中的代码为：

<StackPanel xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             VerticalAlignment="Center" Margin="0,200,0,0">
    <!--头部图片-->
   <Image x:Name="myImage" 
             Source="http://www.baidu.com/img/bd_logo1.png"
                   Height="142"
                   Width="998"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"/>
    <StackPanel HorizontalAlignment="Center" Width="400" VerticalAlignment="Center">
        <Grid HorizontalAlignment="Center" Height="22">
            <Rectangle Stroke="#FFDEE6F0" HorizontalAlignment="Left" Width="400" Height="10" RadiusX="2" RadiusY="2" StrokeThickness="1"/>
            <Rectangle Fill="#FF7E99C8" HorizontalAlignment="Left" VerticalAlignment="Center" StrokeThickness="0" RadiusX="0" RadiusY="0" Width="398" Height="20" x:Name="progressBar" RenderTransformOrigin="0,0.5" Margin="2,4">
                <Rectangle.RenderTransform>
                    <ScaleTransform x:Name="progressBarScale" />
                </Rectangle.RenderTransform>
            </Rectangle>
        </Grid>
        <!--百分比-->
        <Grid HorizontalAlignment="Center">
            <TextBlock x:Name="progressText" Margin="18,0,17,19" Height="26" Text="0%" FontSize="21.333" Opacity="0.8" VerticalAlignment="Bottom" TextAlignment="Right" FontFamily="Microsoft YaHei"/>
            <TextBlock x:Name="progressText2" Margin="0" Height="70" Text="0%" FontSize="48" Opacity="0.04" FontWeight="Bold" VerticalAlignment="Center" TextAlignment="Right" FontFamily="Microsoft YaHei" HorizontalAlignment="Center"/>
        </Grid>
    </StackPanel>
</StackPanel>

2、在网站的根目录下，修改Silverlight.js文件，在后面追加如下一段js函数：

function onSourceDownloadProgressChanged(sender, eventArgs) {
    sender.findName("progressText").Text = Math.round(eventArgs.progress * 100) + "%";
    sender.findName("progressText2").Text = Math.round(eventArgs.progress * 100) + "%";
    sender.findName("progressBarScale").ScaleX = eventArgs.progress;
}

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
            width="100%" height="100%">
            <param name="source" value="ClientBin/WebMain.xap" />
            <param name="onError" value="onSilverlightError" />
            <param name="background" value="white" />
            <param name="minRuntimeVersion" value="4.0.50826.0" />
            <param name="autoUpgrade" value="true" />
            <param name="windowless" value="true" />
            <param name="splashscreensource" value="SplashScreen.xaml"/>    
            <param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged" />
            <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration: none">
                <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="获取 Microsoft Silverlight"
                    style="border-style: none" />
            </a>
        </object>

经过上面三步后，你就可以看到上图所示的效果啦！

注：更多关于Silverlight、asp.net、WebGIS的技术交流，请关注群：106887513