前一阵子参与一个项目开发，好友总是抱怨工具栏按钮太简陋了：要是弄得炫一点该多好啊，看看人家mac的桌面工具栏！事实也的确如此，现在越来越多的程序界面做的是相当的酷啊，无论是什么平台mac、windows还是linux，其界面元素越来越丰富，一个小小的button背景都要在鼠标的不同事件激活下渐变来渐变去。但是，遍历vs ide中默认的工具集合我们是无论如何也找不到如此复杂的控件的，所以，我们必须借助强大的.net框架以及gdi+自己动手来制作类似的工具栏按钮控件。
我们要创建的控件简单说就是一个动态渐变的图片按钮，示例程序界面如下：v^2@* T[ 此文转贴于我的学习网网络编程.Net教程 http://www.Gzu521.com]v^2@* T

这个button控件依旧继承自usercontrol，usercontrol是制作自定义ui控件绝对的父类，这里不再细说。我们为这个button取名为dynamicimagebutton。制作图像按钮当然离不开绘制，所以还得用到gdi+，我曾经写过多篇关于界面元素的文章，比如”利用.net绘图技术制作水晶按钮控件”、” 利用c#实现任务栏通知窗口”、” 利用c#为数码照片添加拍照日期”、” c#实现运行时拖动控件并调整控件大小”等等，其中都会涉及到gdi+的诸多方面，可见gdi+在设计制作ui上是多么的重要啊！
对于按钮图片透明度渐变的操作则比较有技巧，采取了个人认为比较另类却极其高效的方法。制作图片按钮肯定是要为这个button赋值一个图像文件的，我们需要公开一个属性，代码如下：
 public bitmap image
{
get { return bmp[0]; }
set
{
bmp[0] = value;
bmp[1] = returnalpha(value, 60);
bmp[2] = returnalpha(value, 120); ;
bmp[3] = returnalpha(value, 180); ;
draw(); 
}
}

大家注意到，当给这个dynamicimagebutton的image属性赋值一幅图片后，立即就会对这个原始图片经过4种不同的alpha过滤后分别存放到bmp位图数组下。bmp[0]保存原始图像，bmp[3]的图像则最透明。这就是本程序的特点所在，也就是在运行时是不进行图像透明度渐变计算的，在给image属性赋值时计算工作同时也已经完成了，这样可以省下鼠标移动事件的巨大计算量。
returnalpha方法就是将原始图像中的每一个像素按照相应的alpha值进行重新绘制后保存在bmp数组中，不同透明度的图像作为bmp数组的不同元素进行保存。代码如下：
 public static bitmap returnalpha(bitmap bmp, int alpha)
{
color col;
bitmap bmp2 = new bitmap(bmp);
for (int i = 0; i < bmp.width; i++)
for (int j = 0; j < bmp.height; j++)
{
col = bmp.getpixel(i, j);
if (col.a > 0)
bmp2.setpixel(i, j, color.fromargb(min(col.a - alpha), col.r, col.g, col.b));
}
return bmp2;
}

到这里大家可能就已经明白我的用意了，没错！从原始图像到最终图像的透明渐变我只设计了4帧！其实，这对于一个小小的button动画来说已经完全足够了。对于图像的绘制方法我们仍旧采用双缓冲区绘制，也就是内存复制，实际上就是双bitmap对象交替使用，这样可以更好的防止图像闪烁(参见我的另一篇文章” .net框架下使用双缓冲技术绘图”)。相关代码如下：
 private void dynamicimagebutton_paint(object sender, system.eventargs e)
{
g2 = graphics.fromimage(dblbuffer);
g2.clear(this.backcolor);
curx = (int)((double)width) / 6;
cury = (int)((double)height) / 6;
curwidth = (int)((double)width) / 3 * 2;
curheight = (int)((double)height) / 3 * 2;
itvwidth = (width - curwidth) / 2;
g2.drawimage(bmp[3], curx, cury, curwidth, curheight);
g.drawimageunscaled(dblbuffer, 0, 0);
}

然后就是对图像大小渐变的控制了，如下图所示：

a、b、c和d四个矩形代表不同大小的4个帧，a帧是装载图像时的默认大小，就是bmp[0]的图像，也是4帧中最大的一帧，width=75和height=72是我们示例程序控件的大小，网友可以随意对长宽进行重新设定。这两个数值是基础，bmp[0]的图像会完全填充到这个区域内，在这个给定的长和宽的基础上我们计算出b、c和d三帧的图像大小和位置。然后创建一个计数器，当鼠标enter或者leave我们创建的这个dynamicimagebutton时对图像的透明度和大小的渐变进行控制。相关代码如下：
 private void timer1_tick(object sender, eventargs e)
{
if (mp == enummouseposition.enter)
{
if ((curx <= 0) || (cury <= 0) || (width == curwidth) || (height == curheight))
{
return;
}
g2 = graphics.fromimage(dblbuffer);
g2.clear(this.backcolor);
//g2.clear(color.white);
if (curx >= itvwidth-2)
{
g2.drawimage(bmp[3], curx - 1, cury - 1, curwidth + 2, curheight + 2);
}
else if ((curx>= itvwidth / 3 * 2) && (curx < itvwidth))
{
g2.drawimage(bmp[2], curx - 1, cury - 1, curwidth + 2, curheight + 2);
}
else if ((curx >= itvwidth / 3) && (curx <= itvwidth / 3 * 2))
{
g2.drawimage(bmp[1], curx - 1, cury - 1, curwidth + 2, curheight + 2);
}
else if ((curx >= 0) && (curx <= itvwidth / 3))
{
g2.drawimage(bmp[0], curx - 1, cury - 1, curwidth + 2, curheight + 2);
}
g.drawimageunscaled(dblbuffer, 0, 0);
curx--;
cury--;
curwidth = curwidth + 2;
curheight = curheight + 2;
if ((curx <= 0) || (cury <= 0) || (width == curwidth) || (height == curheight))
{
timer1.stop();
}
}
else if (mp == enummouseposition.leave)
{
if ((curx >= (int)((double)width) / 6) ||
(cury >= (int)((double)height) / 6) ||
(curwidth <= (int)((double)width) / 3 * 2) ||
(curheight == (int)((double)height) / 3 * 2))
{
return;
}
g2 = graphics.fromimage(dblbuffer);
g2.clear(this.backcolor);
//g2.clear(color.white);
if (curx >= itvwidth-2)
{
g2.drawimage(bmp[3], curx - 1, cury - 1, curwidth + 2, curheight + 2);
}
else if ((curx >= itvwidth / 3 * 2) && (curx < itvwidth))
{
g2.drawimage(bmp[2], curx - 1, cury - 1, curwidth + 2, curheight + 2);
}
else if ((curx >= itvwidth / 3) && (curx <= itvwidth / 3 * 2))
{
g2.drawimage(bmp[1], curx - 1, cury - 1, curwidth + 2, curheight + 2);
}
else if ((curx >= 0) && (curx <= itvwidth / 3))
{
g2.drawimage(bmp[0], curx - 1, cury - 1, curwidth + 2, curheight + 2);
}
g.drawimageunscaled(dblbuffer, 0, 0);
curx++;
cury++;
curwidth = curwidth - 2;
curheight = curheight - 2;
if ((curx >= (int)((double)width) / 6) ||
(cury >= (int)((double)height) / 6) ||
(curwidth <= (int)((double)width) / 3 * 2) ||
(curheight == (int)((double)height) / 3 * 2))
{
timer1.stop();
}
}

}

至此，一个超酷的动态图像按钮就制作完毕了，该程序在windows xp sp3 +vs2005 c# sp1环境下编译调试通过。