[Silverlight]客製化你的Loading Bar -----Day5

2008-12-07

14661
0
ASP.NET
2009-02-12

我們一般在執行Silverlight程式時，下載時的顯示模式通常是如下圖，如果要客製化這個Loading Bar，有沒有辦法呢?

有的，讓我們跟著下列步驟來完成Loading Bar的設計：

首先我們開啟Visual Studio 2008，新增一個Silverlight專案，如果你不知道要怎麼新增，請參考[Silverlight]Hello Siverlight ----- Day 1

在App_D5.Web的屬性視窗中(筆者專案命名為App_D5，這邊請視您的專案名稱去找其屬性視窗)，選擇Web標籤，然後設定起始頁

面為App_D5TestPage.html(因為這個Loading項目在Html中才有效用)。

在App_D5.Web專案中，選擇Add New Item(新增項目)，然後選擇Silverlight JScriptPage，然後命名為CustomLoadingBar.xaml。

在開啟的CustomLoadingBar.xaml檔案，以下列xaml程式碼代替：

<Canvas

xmlns="http://schemas.microsoft.com/client/2007"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

x:Name="parentCanvas"

Width="850"

Height="600"

Background="OldLace"

<Rectangle.RenderTransform>

</TransformGroup>

</Rectangle.RenderTransform>

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

</Canvas>

開啟App_D5TestPage.html，在其內容中找到[ClientBin/App_D5.xap]這段文字，然後移除[ClientBin/]這段文字，只留下App_D5.xap就好。

編譯方案，然後將App_D5.xap移至App_D5.Web專案的根目錄下，然後在App_D5TestPage.html中新增下列兩個參數：

其中一個是要專案要Loading的xaml檔，另一個是取得或設定來源下載進度變更時所呼叫的事件處理常式的名稱：

放置位置可以參考下圖：

在App_D5.Web專案中，找到剛剛新增CustomLoadingBar.xaml後產生的CustomLoadingBar.js，然後以下列程式碼代替：

function onSourceDownloadProgressChanged(sender, eventArgs) {

sender.findName("uxStatus").Text = "Loading: " + Math.round((eventArgs.progress * 1000)) / 10 + "%";

sender.findName("uxProgressBar").ScaleY = eventArgs.progress * 356;

}

然後在App_D5TestPage.html的head標籤中，加入下列程式碼：

因為需要下載的Page.xaml夠大，才能夠顯示出Loading Bar，所以我們再度拿出印象派的那張圖來套用，需要回憶請按此：

(謎之聲，不是說好不用了嗎? ..Orz)

10.

按下F5執行編譯。

因為在本機上，通常跑得都很快，所以建議Page.xmal要放大一些才有效果出現(建議大於6mb以上)。

如果看完後要再看一次，要記得清除瀏覽器的快取檔案。

線上看Demo(基本版)

線上看Demo(蠟筆小新版)

這次圖應該畫得比較好一些了....Orz

修煉大會，我們下次見!!!

如果您有微軟技術開發的問題，可以到MSDN Forum發問。

如果您有微軟IT管理的問題，可以到TechNet Forum發問喔。

回首頁

Response.Write("Hello LOLOTA")

Just Code4Fun