利用C#实现超酷动态图像按钮

最新推荐文章于 2023-03-22 15:27:41 发布
最新推荐文章于 2023-03-22 15:27:41 发布
阅读量652 收藏 2
点赞数
文章标签： c# ui

继续我们的.Net控件开发之旅….

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

我们要创建的控件简单说就是一个动态渐变的图片按钮，示例程序界面如下：

bb

这个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);

}

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

bb

    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环境下编译调试通过。

【本文附带源码】

fj.pngDynamicImageButton1.jpg

fj.pngDynamicImageButton2.jpg

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/14325734/viewspace-426850/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/14325734/viewspace-426850/

clj2012
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
C#实现用键盘移动窗体上的图片
05-20
C#实现用键盘生的w,a,s,d键上下左右，移动窗体上的图片，
C# 控件的动画显示效果 导航栏动画 字体动画效果制作
小何程序员的博客
10-30 3095
第一步 新建一个winform项目 并且添加需要动画显示的控件 我以 点击按钮 动画显示checkedlistbox控件为例子 第二步 添加动画展示静态类 在窗口类的下面添加下面的代码 public static class Animation { private static readonly int MoveStep = 25; //每次timer 执行Tick的时候 控件展示的多少 privat
亲测有效——C#制作图片Button
李豆豆的博客
05-24 1万+
系统原按钮图标样式太丑，如何制作一个自己满意的图片Button，先上图： 原图： 改为网上找的素材： 颜色稍微深一点，作为鼠标移入时显示： 1、首先导入准备好的图片，圆角不可以用JPG格式图片，因为JPG格式不支持透明。这里用PNG格式（图片角上设置为透明）； 图片尺寸不合适时要设置自动适应。 this.btn.BackgroundImageLayout = S
C# winform美化窗体
susan的博客
01-25 998
记录一下winform美化工具CSkin 一个.Net的UI库。 参考链接：https://blog.csdn.net/yyl7727/article/details/78904125?spm=1001.2014.3001.5502
【C# Demo】真的好炫酷！霓虹灯字体特效
最新发布
王二仙
03-22 558
C#中有多种显示框架，常见的普通框架，显示效果一般，用于个人使用或内部人员使用是足够的，但是给用户使用的客户端，界面就不能太过简洁，所以就有了XAML。 XAML简化了.Net Framework 3.0编程模式上的用户界面创建过程，使用XAML开发人员可以对WPF程序的所有用户界面元素(例如文本、按钮、图像和列表框等)进行详细的定置，同时还可以对整个界面进行合理化的布局，这与使用HTML非常相似。
c# 利用C#实现超酷动态图像按钮
03-29
本文将深入探讨如何通过C#来实现一个超酷的动态图像按钮，提升用户界面的互动性和吸引力。 首先，我们需要了解C#中的Button控件。Button是Windows Forms或WPF中最基础的控件之一，用于接收用户的点击事件。通常，它...
利用C_实现超酷动态图像按钮
10-25
利用C#实现超酷动态图像按钮。 现在越来越多的程序界面做的是相当的酷啊，无论是什么平台mac、windows还是linux，其界面元素越来越丰富，一个小小的button背景都要在鼠标的不同事件激活下渐变来渐变去。但是，遍历...
如何用C#实现漂亮的动态图像按钮
06-08
在 DynamicImageButton 中，我们可以使用双缓冲技术来实现按钮的动态图像效果。 六、结论 使用 C# 实现漂亮的动态图像按钮需要了解 GDI+ 的功能，并掌握 C# 的事件处理机制和双缓冲技术。通过本文，我们可以了解...
C#动态创建button按钮的方法实例详解
12-26
C#编程中经常需要动态创建，本文主要介绍C#动态创建button按钮的方法，涉及C#按钮属性动态设置的相关技巧，以供借鉴参考。具体实现方法如下： 例子： using System; using System.Collections.Generic; using ...
c# winform自定义动态按钮控件
03-22
dll文件，拖拽至工具栏即可使用，可自行更换颜色和按钮状态
C#编写的带动画效果按钮
12-14
用C#编写的动画效果按钮，背景颜色会变换，很好看哦
C#动画控件（超炫）
08-31
C#动画控件（超炫）,包括源代码，十分炫酷，This article demonstrates how to create a perfect, useless control using C# WinForms and .NET 2.0. The control uses pure managed code, and all visual elements can be adjusted through its properties.
C#按钮效果
08-18
自制按钮：按钮按下时的不同效果，当鼠标经过、按下、双击时显示的不同效果图
C#圆形按钮，非常漂亮动态
06-02
C#圆形按钮，非常漂亮动态 Button,有源代码和例子，这是网上很少有的，兄弟们快下载呀！
WPF 窗体跳转动画 及按钮特效
02-12
WPF 窗体跳转动画 及按钮特效
C#学习笔记：动态设置控件的背景图片
热门推荐
qq_28249373的博客
05-29 2万+
本文主要探讨的是在C#窗体设计过程中，如何设置控件的背景图片，以及图片的布局。谈到的控件属性有BackgroundImage，BackgroundImageLayout和Image。使用到的结构体、类、方法主要有，Image类，ImageLayout枚举类型，Bitmap类。
Winform实现给按钮添加图片效果
CoffeMilk的博客
05-10 6729
一、实现效果 二、实现方法步骤 ①准备好需要给按钮添加图片的素材 ②打开【工具箱】找到【Button】拖拽到Winform界面 ③选中刚才拖入winfrom界面的【button1】按钮查看设置面板，找到Image属性设置按钮图片 ④调节按钮大小和设置图片与文字方向 ⑤最终的效果如下 ⑥后面的几个按钮只用复制制作好的这个按钮修改一下按钮图片与按钮名称就可以了 ...
c# winform 显示动态gif图片的简单方法
06-02 6277
1、添加Label控件 2、准备个gif图片 3、Label控件的Image属性设成gif图 4、AutoSize=false 5、设置控件大小 大功告成！！！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值