下面我們創建一個名為QXRoleFace的通用型面板控件，創建方法具體見第十四節。有了前面那麼多章節關於控件的講解，我們可以很輕松的將頭像、PK圖標、以及其他基本參數值鑲嵌進QXRoleFace控件中（如下圖）：
添加完後，剩下的是本節的一個難點：如何根據面板中值條（生命值、魔法值、活力值）槽尺寸創建相應的方塊值條進行填充？我們首先分析，這3條值應該用什麼控件來實現？大家結合本文的第一張圖不難看出，它們均為漸變的圓角矩形（為了簡單起見，我對其左右兩邊進行了對稱處理而非三角形，至於如何實現不規則矩形，大家可以參考圖片蒙版，後面的章節我也會講到）；在WPF/Silverlight中，創建漸變必須用到彩虹筆刷，我根據這3值的傳統顏色，如下定義這3把彩虹筆刷：
LinearGradientBrush[] rainbowBrush = new LinearGradIEntBrush[3];
/// <summary>
/// 初始化彩虹筆刷
/// </summary>
private void InitializeRainbowBrush() {
//血值筆刷
CreateRainbowBrush(ref rainbowBrush[0], 201, 238, 206, 60, 224, 70, 106, 234, 130);
//魔值筆刷
CreateRainbowBrush(ref rainbowBrush[1], 192, 195, 238, 86, 104, 226, 100, 104, 233);
//活值筆刷
CreateRainbowBrush(ref rainbowBrush[2], 254, 209, 172, 255, 142, 40, 255, 177, 74);
}
/// <summary>
/// 創建彩虹筆刷
/// </summary>
private void CreateRainbowBrush(ref LinearGradIEntBrush brush ,
byte r0, byte g0, byte b0, byte r1,byte g1,byte b1, byte r2, byte g2, byte b2) {
brush = new LinearGradIEntBrush();
brush.StartPoint = new Point(0, 0);
brush.EndPoint = new Point(0, 1);
brush.GradientStops.Add(new GradIEntStop(Color.FromRgb(r0, g0, b0), 0));
brush.GradientStops.Add(new GradIEntStop(Color.FromRgb(r1, g1, b1), 0.70));
brush.GradientStops.Add(new GradIEntStop(Color.FromRgb(r2, g2, b2), 1));
brush.Freeze();
}
然後通過RadiusX及RadiusY設置矩形值條的圓角邊，並添加對應的數字。最後將這3條矩形相應的嵌入到主角頭像面板中，這樣就完成了主角頭像面板的創建：
