C#开发WPF/Silverlight动画及游戏系列教程(Game Course)：(二十六)通用型角色头像面板

核心提示： 然后我们按照第五节的方法将这些图片分类添加进Interface中的相应的文件夹中，到此素材准备阶段算完成了，C#开发WPF/Silverlight动画及游戏系列教程(Game Course)：(二十六)通用型角色头像面板(5)，下面我们创建一个名为QXRoleFace的通用型面板控件，创建方法具

然后我们按照第五节的方法将这些图片分类添加进Interface中的相应的文件夹中，到此素材准备阶段算完成了。

下面我们创建一个名为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();

　　　　　　　 }