天天看點

Silverlight及WPF中實作自定義BusyIndicator

  在開發Silverlight或者WPF項目時,當我們調用Web服務來加載一些資料時,由于資料量比較大需要較長的時間,需要使用者等待,為了給使用者友好的提示和避免使用者在加載資料過程中進行重複操作,我們通常使用BusyIndicator這個控件來鎖定目前頁面。然而,有時候BusyIndicator這個控件的風格和我們的界面風格并不搭配,而且修改起來也比較麻煩,今天我們就來自己寫一個BusyIndicator控件,實作自定義的忙碌提示。

後面會提供源碼下載下傳。

 一、實作基本原理及最終效果

   我們先來看下面這段代碼,如圖:

Silverlight及WPF中實作自定義BusyIndicator

我們添加了三個矩形在Grid中,我們設定了矩形的寬度和高度,那麼矩形會怎麼顯示呢?從上到下順序顯示嗎?NO!不是這樣的,我們來看看顯示結果:

Silverlight及WPF中實作自定義BusyIndicator

三個矩形層疊在了一起,按照代碼的順序,依次從下往上顯示,代碼中放在最後的矩形顯示在最頂層。這是Grid的一個特性,當然在Canvas中也可以層疊顯示,不過不是居中顯示,是右上腳對齊顯示的。如果是StackPanel則是從上到下一次顯示。

根據這個特性,我們知道在Grid中後添加的UI元素會顯示在其他元素的最頂層,是以我們可以在運作時通過代碼來動态的向Grid中添加元素,并且這個元素處于最頂層,進而可以遮擋其他頁面元素。

下面我們來看看最終的實作效果:

Silverlight及WPF中實作自定義BusyIndicator

是不是有一種中國風的味道啊!下面我們來詳細說明實作方法。

 二、自定義BusyIndicator的具體實作

   這裡我是用Silverlight來示範,用WPF也是一樣的。首先建立項目,添加一個Silverlight user Control,這裡我起的名字就叫Load,頁面XAML代碼如下:

其實這個頁面很簡單,就是一個Grid、一個Image和一個TextBlock,添加兩個Storyboard是為了有個過渡效果,這樣看起來更加平滑一下,直接隐藏掉Image和TextBlock的話,會讓人感覺閃一下。其設計視圖如圖:

Silverlight及WPF中實作自定義BusyIndicator

其背景代碼如下:

背景代碼主要控制圖檔旋轉動畫和問題動畫,還有就是資料加載完畢時,隐藏頁面元素。

 三、在頁面中調用

 在MainPage中添加一個按鈕,添加click事件,代碼如下:

添加完成後按F5執行,我們在打開的頁面中單擊按鈕,就可以看到效果了。

當然,這裡隻是實作了和BusyIndicator一樣的效果,如果想像使用BusyIndicator那樣的話,我們還要進一步的進行封裝。

<a href="http://files.cnblogs.com/files/yunfeifei/SilverlightBusy.rar">點選下載下傳源碼</a>

QQ交流群:243633526

 部落格位址:http://www.cnblogs.com/yunfeifei/

 聲明:本部落格原創文字隻代表本人工作中在某一時間内總結的觀點或結論,與本人所在機關沒有直接利益關系。非商業,未授權,貼子請以現狀保留,轉載時必須保留此段聲明,且在文章頁面明顯位置給出原文連接配接。

如果大家感覺我的博文對大家有幫助,請推薦支援一把,給我寫作的動力。