Silverlight 遊戲開發小技巧：血條和進度條

遊戲中血條的顯示非常普遍，直觀的看到人物生命狀態，還有看其他人的生命狀態，血條並非只應用在介面當中，玩家自身和怪物的生命值顯示也都會即時的出現在遊戲場景當中，好的血條效果可以為遊戲增光不少，這次咱們就簡單的製作幾個血條。

看著園子裡Silverlight越來越繁榮，甚是欣慰，因為就在去年，還仍然在為Silverlight技術感到孤單，如今有了這麼多並肩作戰的兄弟們，除了欣慰也甚狂喜，對於Silverlight還是沒有看走眼啊。

血條的做法有多種，一般來說都是做成一個獨立的控制項，這樣方便的放在任何地方，如果深入講起來，一般來說血條可能包含如下屬性：最大值、當前值、狀態等等，而我講講述最基本的做法，更多的擴展應用可以在在此基礎上修改獲得。

現在打開MainPage，在上面畫一個Rectange：

然後將其複製，並編組成Grid：

有兩個矩形分別在上下，我們用上面的矩形作為血條的填充物，而下面的做底面：

選擇最上層的填充為紅色，我們知道任何控制項都是有寬高和顯示寬高，所以要將這兩個屬性用起來，就可以達到效果了。

但是我們要考慮邊距問題，所以將水準對齊為考左，如果血條是上下的可以設置對齊上下的範圍。

現在只需要控制最上面的矩形Width屬性就能產生增加或減少的血條效果，在後臺代碼控制或綁定屬性也可以，但是這是一個未知最大數位的數值，所以我們需要父容器的ActualWidth屬性來獲取，具體演算法並不難：Width = ActualWidth * percent；percent是血條計算出來的，如果將其設計成為獨立的控制項時候，可以帶有MaxHP之類的屬性參與運算得到百分比。

如果想要更多的有趣的效果，可以在其中填充圖片，下面是選定一個矩形時候的影像筆刷的簡單操作。

在最開始的圖片中，可以看到，我已經準備好了一些演示，因為時間倉促也就不做的那麼精緻，有好的UI設計師來幫忙，可以達到非常不錯的介面體驗。

有興趣的同學可以直接下載原始程式碼進行研究，本身並不複雜，用Blend打開就可以預覽和修改，有舉一反三能力的能人，一定會想到血條和進度條的形式很一致，因此只需要簡單的修改就可以當進度條使用，但是需要注意前後台的ＵＩ執行緒問題。

本篇工程原始程式碼下載位址如下：點擊直接下載