C#动态图像按钮创建步骤

前一阵子参与一个项目开发，好友总是抱怨工具栏按钮太简陋了：要是弄得炫一点该多好啊，看看人家mac的桌面工具栏！事实也的确如此，现在越来越多的程序界面做的是相当的酷啊，无论是什么平台mac、windows还是linux，其界面元素越来越丰富，一个小小的button背景都要在鼠标的不同事件激活下渐变来渐变去。但是，遍历VS IDE中默认的工具集合我们是无论如何也找不到如此复杂的控件的，所以，我们必须借助强大的.Net框架以及GDI+自己动手来制作类似的工具栏按钮控件。

成都创新互联主要从事网站设计制作、成都网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务温县,10年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792

我们要创建的控件简单说就是一个动态渐变的C#动态图像按钮

这个button控件依旧继承自UserControl，UserControl是制作自定义UI控件绝对的父类，这里不再细说。我们为这个button取名为DynamicImageButton。制作图像按钮当然离不开绘制，所以还得用到GDI+，我曾经写过多篇关于界面元素的文章，比如”利用.Net绘图技术制作水晶按钮控件”、” 利用C#实现任务栏通知窗口”、” 利用C#为数码照片添加拍照日期”、” C#实现运行时拖动控件并调整控件大小”等等，其中都会涉及到GDI+的诸多方面，可见GDI+在设计制作UI上是多么的重要啊！

对于按钮图片透明度渐变的操作则比较有技巧，采取了个人认为比较另类却极其高效的方法。制作图片按钮肯定是要为这个button赋值一个图像文件的，我们需要公开一个属性，代码如下：

 
 
 
 
      
  
  
  
  1. public Bitmap Image  
    2.   
  
  
  
  2. {  
    3.   
  
  
  
  3. get { return bmp[0]; }  
    4.   
  
  
  
  4. set  
    5.   
  
  
  
  5. {  
    6.   
  
  
  
  6. bmp[0] = value;  
    7.   
  
  
  
  7. bmp[1] = returnAlpha(value, 60);  
    8.   
  
  
  
  8. bmp[2] = returnAlpha(value, 120); ;  
    9.   
  
  
  
  9. bmp[3] = returnAlpha(value, 180); ;  
    10.   
  
  
  
  10. draw();  
    11.   
  
  
  
  11. }  
    12.   
  
  
  
  12. } 
    13.

大家注意到，当给这个DynamicImageButton的 image属性赋值一幅图片后，立即就会对这个原始图片经过4种不同的alpha过滤后分别存放到bmp位图数组下。bmp[0]保存原始图像，bmp[3]的图像则最透明。这就是本程序的特点所在，也就是在运行时是不进行图像透明度渐变计算的，在给image属性赋值时计算工作同时也已经完成了，这样可以省下鼠标移动事件的巨大计算量。

returnAlpha方法就是将原始图像中的每一个像素按照相应的alpha值进行重新绘制后保存在bmp数组中，不同透明度的图像作为bmp数组的不同元素进行保存。代码如下：

 
 
 
 
      
  
  
  
  1. public static Bitmap returnAlpha(Bitmap bmp, int alpha)  
    2.   
  
  
  
  2. {  
    3.   
  
  
  
  3. Color col;  
    4.   
  
  
  
  4. Bitmap bmp2 = new Bitmap(bmp);  
    5.   
  
  
  
  5. for (int i = 0; i < bmp.Width; i++)  
    6.   
  
  
  
  6. for (int j = 0; j < bmp.Height; j++)  
    7.   
  
  
  
  7. {  
    8.   
  
  
  
  8. col = bmp.GetPixel(i, j);  
    9.   
  
  
  
  9. if (col.A > 0)  
    10.   
  
  
  
  10. bmp2.SetPixel(i, j, Color.FromArgb(min(col.A - alpha), col.R, col.G, col.B));  
    11.   
  
  
  
  11. }  
    12.   
  
  
  
  12. return bmp2;  
    13.   
  
  
  
  13. } 
    14.

到这里大家可能就已经明白我的用意了，没错！从原始图像到最终图像的透明渐变我只设计了4帧！其实，这对于一个小小的button动画来说已经完全足够了。对于图像的绘制方法我们仍旧采用双缓冲区绘制，也就是内存复制，实际上就是双bitmap对象交替使用，这样可以更好的防止图像闪烁(参见我的另一篇文章” .NET框架下使用双缓冲技术绘图”)。相关代码如下：

 
 
 
 
      
  
  
  
  1. private void DynamicImageButton_Paint(object sender, System.EventArgs e)  
    2.   
  
  
  
  2. {  
    3.   
  
  
  
  3. g2 = Graphics.FromImage(dblbuffer);  
    4.   
  
  
  
  4. g2.Clear(this.BackColor);  
    5.   
  
  
  
  5. curx = (int)((double)Width) / 6;  
    6.   
  
  
  
  6. cury = (int)((double)Height) / 6;  
    7.   
  
  
  
  7. curwidth = (int)((double)Width) / 3 * 2;  
    8.   
  
  
  
  8. curheight = (int)((double)Height) / 3 * 2;  
    9.   
  
  
  
  9. itvwidth = (Width - curwidth) / 2;  
    10.   
  
  
  
  10. g2.DrawImage(bmp[3], curx, cury, curwidth, curheight);  
    11.   
  
  
  
  11. g.DrawImageUnscaled(dblbuffer, 0, 0);  
    12.   
  
  
  
  12. } 
    13.

然后就是对C#动态图像按钮大小渐变的控制了，如下图所示：

a、b、c和d四个矩形代表不同大小的4个帧，a帧是装载图像时的默认大小，就是bmp[0]的图像，也是4帧中***的一帧，width=75和 height=72是我们示例程序控件的大小，网友可以随意对长宽进行重新设定。这两个数值是基础，bmp[0]的图像会完全填充到这个区域内，在这个给定的长和宽的基础上我们计算出b、c和d三帧的图像大小和位置。然后创建一个计数器，当鼠标Enter或者Leave我们创建的这个 DynamicImageButton时对图像的透明度和大小的渐变进行控制。相关代码如下：

 
 
 
 
      
  
  
  
  1. private void timer1_Tick(object sender, EventArgs e)  
    2.   
  
  
  
  2. {  
    3.   
  
  
  
  3. if (mp == enumMousePosition.Enter)  
    4.   
  
  
  
  4. {  
    5.   
  
  
  
  5. if ((curx <= 0) || (cury <= 0) || (Width == curwidth) || (Height == curheight))  
    6.   
  
  
  
  6. {  
    7.   
  
  
  
  7. return;  
    8.   
  
  
  
  8. }  
    9.   
  
  
  
  9. g2 = Graphics.FromImage(dblbuffer);  
    10.   
  
  
  
  10. g2.Clear(this.BackColor);  
    11.   
  
  
  
  11. //g2.Clear(Color.White);  
    12.   
  
  
  
  12. if (curx >= itvwidth-2)  
    13.   
  
  
  
  13. {  
    14.   
  
  
  
  14. g2.DrawImage(bmp[3], curx - 1, cury - 1, curwidth + 2, curheight + 2);  
    15.   
  
  
  
  15. }  
    16.   
  
  
  
  16. else if ((curx>= itvwidth / 3 * 2) && (curx < itvwidth))  
    17.   
  
  
  
  17. {  
    18.   
  
  
  
  18. g2.DrawImage(bmp[2], curx - 1, cury - 1, curwidth + 2, curheight + 2);  
    19.   
  
  
  
  19. }  
    20.   
  
  
  
  20. else if ((curx >= itvwidth / 3) && (curx <= itvwidth / 3 * 2))  
    21.   
  
  
  
  21. {  
    22.   
  
  
  
  22. g2.DrawImage(bmp[1], curx - 1, cury - 1, curwidth + 2, curheight + 2);  
    23.   
  
  
  
  23. }  
    24.   
  
  
  
  24. else if ((curx >= 0) && (curx <= itvwidth / 3))  
    25.   
  
  
  
  25. {  
    26.   
  
  
  
  26. g2.DrawImage(bmp[0], curx - 1, cury - 1, curwidth + 2, curheight + 2);  
    27.   
  
  
  
  27. }  
    28.   
  
  
  
  28. g.DrawImageUnscaled(dblbuffer, 0, 0);  
    29.   
  
  
  
  29. curx--;  
    30.   
  
  
  
  30. cury--;  
    31.   
  
  
  
  31. curwidthcurwidth = curwidth + 2;  
    32.   
  
  
  
  32. curheightcurheight = curheight + 2;  
    33.   
  
  
  
  33. if ((curx <= 0) || (cury <= 0) || (Width == curwidth) || (Height == curheight))  
    34.   
  
  
  
  34. {  
    35.   
  
  
  
  35. timer1.Stop();  
    36.   
  
  
  
  36. }  
    37.   
  
  
  
  37. }  
    38.   
  
  
  
  38. else if (mp == enumMousePosition.Leave)  
    39.   
  
  
  
  39. {  
    40.   
  
  
  
  40. if ((curx >= (int)((double)Width) / 6) ||  
    41.   
  
  
  
  41. (cury >= (int)((double)Height) / 6) ||  
    42.   
  
  
  
  42. (curwidth <= (int)((double)Width) / 3 * 2) ||  
    43.   
  
  
  
  43. (curheight == (int)((double)Height) / 3 * 2))  
    44.   
  
  
  
  44. {  
    45.   
  
  
  
  45. return;  
    46.   
  
  
  
  46. }  
    47.   
  
  
  
  47. g2 = Graphics.FromImage(dblbuffer);  
    48.   
  
  
  
  48. g2.Clear(this.BackColor);  
    49.   
  
  
  
  49. //g2.Clear(Color.White);  
    50.   
  
  
  
  50. if (curx >= itvwidth-2)  
    51.   
  
  
  
  51. {  
    52.   
  
  
  
  52. g2.DrawImage(bmp[3], curx - 1, cury - 1, curwidth + 2, curheight + 2);  
    53.   
  
  
  
  53. }  
    54.   
  
  
  
  54. else if ((curx >= itvwidth / 3 * 2) && (curx < itvwidth))  
    55.   
  
  
  
  55. {  
    56.   
  
  
  
  56. g2.DrawImage(bmp[2], curx - 1, cury - 1, curwidth + 2, curheight + 2);  
    57.   
  
  
  
  57. }  
    58.   
  
  
  
  58. else if ((curx >= itvwidth / 3) && (curx <= itvwidth / 3 * 2))  
    59.   
  
  
  
  59. {  
    60.   
  
  
  
  60. g2.DrawImage(bmp[1], curx - 1, cury - 1, curwidth + 2, curheight + 2);  
    61.   
  
  
  
  61. }  
    62.   
  
  
  
  62. else if ((curx >= 0) && (curx <= itvwidth / 3))  
    63.   
  
  
  
  63. {  
    64.   
  
  
  
  64. g2.DrawImage(bmp[0], curx - 1, cury - 1, curwidth + 2, curheight + 2);  
    65.   
  
  
  
  65. }  
    66.   
  
  
  
  66. g.DrawImageUnscaled(dblbuffer, 0, 0);  
    67.   
  
  
  
  67. curx++;  
    68.   
  
  
  
  68. cury++;  
    69.   
  
  
  
  69. curwidthcurwidth = curwidth - 2;  
    70.   
  
  
  
  70. curheightcurheight = curheight - 2;  
    71.   
  
  
  
  71. if ((curx >= (int)((double)Width) / 6) ||  
    72.   
  
  
  
  72. (cury >= (int)((double)Height) / 6) ||  
    73.   
  
  
  
  73. (curwidth <= (int)((double)Width) / 3 * 2) ||  
    74.   
  
  
  
  74. (curheight == (int)((double)Height) / 3 * 2))  
    75.   
  
  
  
  75. {  
    76.   
  
  
  
  76. timer1.Stop();  
    77.   
  
  
  
  77. }  
    78.   
  
  
  
  78. }  
    79.   
  
  
  
  79. }  
    80.

至此，一个超酷的C#动态图像按钮就制作完毕了，该程序在Windows XP SP3 +VS2005 C# SP1环境下编译调试通过。

【编辑推荐】

  1. C#数据库查询和操作大全
  2. 浅析C#扩展方法
  3. C# Singleton的使用及优缺点探讨
  4. 详细分析C#数据库连接池
  5. C#数据库备份及还原的实现代码

文章题目：C#动态图像按钮创建步骤
标题路径：http://www.shufengxianlan.com/qtweb/news32/12582.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

静态网站知识

分类信息网

成都标牌标识牌制作公司　　 　四川内江电信机房　　 　商城系统开发　　 　成都微信开发　　 　手机网站制作　　 　雅安主机托管　　 　公司logo设计　　 　成都网络推广　　 　信衡房屋鉴定　　 　软文推广公司　　 　网站seo优化　　 　php主机　　 　成都网站制作　　 　四川主机托管　　 　网页设计　　 　成都网站建设　　 　成都网站建设　　 　成都小程序开发　　 　重庆电商网站定制　　 　响应式网站建设