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;
}

3、在承載Silverlight的Web網頁部分的object標籤內增加如下紅色部分：

<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