分类:
2008-10-15 13:43:40
前一阵子参与一个项目开发,好友总是抱怨工具栏按钮太简陋了:要是弄得炫一点该多好啊,看看人家mac的桌面工具栏!事实也的确如此,现在越来越多的程序界面做的是相当的酷啊,无论是什么平台mac、windows还是,其界面元素越来越丰富,一个小小的button背景都要在鼠标的不同事件激活下渐变来渐变去。但是,遍历VS IDE中默认的工具集合我们是无论如何也找不到如此复杂的控件的,所以,我们必须借助强大的框架以及GDI+自己动手来制作类似的工具栏按钮控件。
我们要创建的控件简单说就是一个动态渐变的图片按钮,示例程序界面如下:
这个button控件依旧继承自UserControl,UserControl是制作自定义UI控件绝对的父类,这里不再细说。我们为这个button取名为DynamicImageButton。制作图像按钮当然离不开绘制,所以还得用到GDI+,我曾经写过多篇关于界面元素的文章,比如”利用绘图技术制作水晶按钮控件”、” 利用实现任务栏通知窗口”、” 利用为数码照片添加拍照日期”、” 实现运行时拖动控件并调整控件大小”等等,其中都会涉及到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(); } } |
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; } |
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); } |
[1]