每一款商業(yè)的Silverlight項(xiàng)目，為了體現(xiàn)項(xiàng)目個(gè)性化，都會(huì)有不同的界面設(shè)計(jì)，項(xiàng)目UI設(shè)計(jì)的第一步就是創(chuàng)建個(gè)性的自定義啟動(dòng)畫面，本文將介紹如何創(chuàng)建Silverlight自定義啟動(dòng)畫面，也就是經(jīng)常說的Splash Screen.

Silverlight初始化建立啟動(dòng)畫面如下圖：

?

經(jīng)過修改，將改如下圖：

?

根據(jù)上圖我們可以看出，該啟動(dòng)畫面分為三個(gè)部分，圖片部分，進(jìn)度條部分，百分比部分，對于圖片部分，以后我們將修改為動(dòng)畫圖片，現(xiàn)在著重介紹進(jìn)度條和百分比部分。

?

1. 首先，使用文本工具創(chuàng)建一個(gè)空文件，命名為“SplashScreen.xaml”，該文檔是為了承載自定義啟動(dòng)畫面的控件代碼所用，由于我們創(chuàng)建自定義啟動(dòng)畫面，需要覆蓋替換原始啟動(dòng)畫面，為了不讓該文件封裝到XAP包中，我們使用其他文本工具先創(chuàng)建一個(gè)獨(dú)立的空文件。文件創(chuàng)建后，可以使用VS2008或者Blend添加到項(xiàng)目中。

?

?

2. 現(xiàn)在可以使用VS2008或者Blend打開SplashScreen.xaml文件，填寫以下代碼：

?

?1?<StackPanel?xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
?2?????????????xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
?3?????????????VerticalAlignment="Center"?Margin="0,100,0,0">
?4???<!--頭部圖片-->
?5?<Image?x:Name="myImage"?Source="/silverlightchina.png"
?6???????????????????????Height="56"
?7???????????????????Width="220"
?8???????????????????HorizontalAlignment="Center"
?9???????????????????VerticalAlignment="Center"
10???????????????????Margin="10"?/>
11?
12?<StackPanel?HorizontalAlignment="Center">
13?<!--進(jìn)度條-->
14?????<Grid?HorizontalAlignment="Center">
15?????<Rectangle?Stroke="#FFDEE6F0"?HorizontalAlignment="Left"?Width="300"?Height="10"?RadiusX="2"?RadiusY="2"?StrokeThickness="1"/>
16?????<Rectangle?Fill="#FF7E99C8"?HorizontalAlignment="Left"?VerticalAlignment="Center"?StrokeThickness="0"?RadiusX="0"?RadiusY="0"?Width="296"?Height="6"?x:Name="progressBar"?RenderTransformOrigin="0,0.5"?Margin="4">
17???????<Rectangle.RenderTransform>
18?????????<ScaleTransform?x:Name="progressBarScale"?/>
19???????</Rectangle.RenderTransform>
20?????</Rectangle>
21?????</Grid>
22?
23?<!--百分比-->
24?????<Grid?HorizontalAlignment="Center">
25?????<TextBlock?x:Name="progressText"?Margin="18,0,17,19"?Height="26"?Text="0%"?FontSize="16"?Opacity="0.8"?VerticalAlignment="Bottom"?TextAlignment="Right"/>
26?????<TextBlock?x:Name="progressText2"?Margin="18,0,7,8"?Height="70"?Text="0%"?FontSize="50"?Opacity="0.04"?FontWeight="Bold"?VerticalAlignment="Bottom"?TextAlignment="Right"/>
27?????</Grid>
28???</StackPanel>
29?</StackPanel>

?

?

代碼中的進(jìn)度條部分，我們定義了兩個(gè)矩形，一個(gè)是外部的邊框矩形，一個(gè)是內(nèi)部的進(jìn)度矩形，通過屬性設(shè)置其顯示效果。

百分比部分，我們定義了兩個(gè)TextBlock，顯示百分比數(shù)值。

?

3. 在新建的Silverlight項(xiàng)目中，VS2008會(huì)自動(dòng)創(chuàng)建測試頁面CustomizeSplashScreenTestPage.html和CustomizeSplashScreenTestPage.aspx，該測試頁面是通過Object對XAP進(jìn)行下載和調(diào)用，為了讓Silverlight項(xiàng)目識(shí)別自定義啟動(dòng)畫面，我們需要在OBJECT中添加以下參數(shù)，在代碼下載中，我僅修改了CustomizeSplashScreenTestPage.html：

?

1?<param?name="splashscreensource"?value="SplashScreen.xaml"/>????
2?<param?name="onSourceDownloadProgressChanged"?value="onSourceDownloadProgressChanged"?/>

?

?

參數(shù)1，splashscreensource是指定自定義啟動(dòng)畫面文件名；

參數(shù)2，onSourceDownloadProgressChanged是一個(gè)Javascript函數(shù)，在下載XAP文件的時(shí)候，Silverlight客戶端會(huì)運(yùn)行該函數(shù)，如果需要使用自定義啟動(dòng)畫面，我們需要?jiǎng)?chuàng)建該函數(shù)。

?

1?<script?type="text/javascript">
2?????????????function?onSourceDownloadProgressChanged(sender,?eventArgs)?{
3?????????????????
4?????????????????sender.findName("progressText").Text?=?Math.round(eventArgs.progress?*?100)?+?"%";
5?????????????????sender.findName("progressText2").Text?=?Math.round(eventArgs.progress?*?100)?+?"%";
6?????????????????sender.findName("progressBarScale").ScaleX?=?eventArgs.progress;
7?????????????}
8?</script>???

?

在onSourceDownloadProgressChanged函數(shù)中，我們使用sender.findName獲取SplashScreen.xaml文件中的控件屬性，并賦值。 其中eventArgs.progress會(huì)返回一個(gè)從0到1的數(shù)字，該數(shù)字表示當(dāng)前載入進(jìn)程值。

從onSourceDownloadProgressChanged函數(shù)運(yùn)行，可以確認(rèn)進(jìn)度條和百分比的顯示是同步的。

?

到這里為止，我們已經(jīng)創(chuàng)建了Silverlight自定義啟動(dòng)窗口。

?

測試自定義啟動(dòng)畫面

本地運(yùn)行Silverlight項(xiàng)目，XAP載入很快，很難正常查看自定義啟動(dòng)畫面，我們可以使用以下方法，來延緩載入速度，在本地可以測試查看自定義啟動(dòng)畫面。

1. 首先在客戶端，添加一個(gè)大文件，例如視頻，音樂，或者壓縮文件之類的，這里我添加了一個(gè)壓縮文件大概100M。

?

2. 選中該文件，點(diǎn)擊右鍵編輯屬性，修改Build Action為Content，這樣，Silverlight編譯的時(shí)候，會(huì)把該文件封裝到XAP文件中，測試項(xiàng)目的時(shí)候，自定義啟動(dòng)頁面也就能正常查看了。

?

本文主要介紹了Silverilght非托管代碼的自定義啟動(dòng)畫面創(chuàng)建，如果想創(chuàng)建Silverlight托管代碼的自定義啟動(dòng)畫面，可以參考[Silverlight]通過SilverlightLoader使用托管代碼創(chuàng)建自定義載入界面（Splash Screen）。

?

對于非托管XAML+js的解決方案，也可以參考MSDN：http://msdn.microsoft.com/zh-cn/library/cc903962(VS.95).aspx

?

例程代碼下載

?

本文為原創(chuàng)文章，轉(zhuǎn)載請注明出處。

本文首發(fā)?銀光中國網(wǎng) （http://www.silverlightchina.net/)

轉(zhuǎn)載于:https://www.cnblogs.com/springside6/archive/2010/01/16/2525259.html

總結(jié)

以上是生活随笔為你收集整理的创建Silverlight自定义启动画面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。