【转】C#使用GDI+制作背景颜色淡入淡出效果的按钮
C#使用GDI+制作背景颜色淡入淡出效果的按钮
- 摘要:本文介绍C#使用GDI+制作背景颜色淡入淡出效果的按钮,并提供完整的示例和源码供下载。
用过QQ2009的网友都知道QQ主面板的界面非常炫丽,特别好看,鼠标移上去还有淡入淡出的效果。那这样效果是怎么做出来的呢?其实不难,只要自定义一个用户控件的外怪就可以了,用到GDI+技术和时钟控件来操作…
首先我们在VS2008里面新建一个Windows窗体控件库的项目,系统会自动生成一个用户控件UserControl1.cs出来,我们就用默认的名字吧~~
本例子下载地址:http://files.cnblogs.com/mengxin523/自定义按钮控件.rar
程序所有代码如下:
using System.Data;
using System.Drawing;
using System.Collections;
using System.Windows.Forms;
using System.ComponentModel;
using System.Drawing.Drawing2D;
namespace MyButton
...{
public partial class UserControl1 : UserControl
...{
private bool calledbykey = false;
private State mButtonState = State.None; //按钮的状态
private Timer mFadeIn = new Timer(); //淡入的时钟
private Timer mFadeOut = new Timer(); //淡出的时钟
private int mGlowAlpha = 0; //透明度
private System.ComponentModel.Container components = null;
public UserControl1()
...{
InitializeComponent();
//一下几个语句是对控件进行设置和对GDI+进行优化
this.SetStyle(ControlStyles.AllPaintingInWmPaint, true);
this.SetStyle(ControlStyles.DoubleBuffer, true);
this.SetStyle(ControlStyles.OptimizedDoubleBuffer, true);
this.SetStyle(ControlStyles.ResizeRedraw, true);
this.SetStyle(ControlStyles.Selectable, true);
this.SetStyle(ControlStyles.SupportsTransparentBackColor, true);
this.SetStyle(ControlStyles.UserPaint, true);
this.UpdateStyles();
this.BackColor = Color.Transparent; //设置控件背景色透明
mFadeIn.Interval = 20; //淡入速度
mFadeOut.Interval = 20; //淡出速度
}
protected override void Dispose(bool disposing)
...{
if (disposing)
...{
if (components != null)
...{
components.Dispose();
}
}
base.Dispose(disposing);
}
private void InitializeComponent()
...{
this.Name = "MySystemButton";
this.Size = new System.Drawing.Size(100, 32);
this.Paint += new System.Windows.Forms.PaintEventHandler(this.VistaButton_Paint);
this.KeyUp += new System.Windows.Forms.KeyEventHandler(this.VistaButton_KeyUp);
this.KeyDown += new System.Windows.Forms.KeyEventHandler(this.VistaButton_KeyDown);
this.MouseEnter += new System.EventHandler(this.VistaButton_MouseEnter);
this.MouseLeave += new System.EventHandler(this.VistaButton_MouseLeave);
this.MouseUp += new MouseEventHandler(VistaButton_MouseUp);
this.MouseDown += new System.Windows.Forms.MouseEventHandler(this.VistaButton_MouseDown);
this.GotFocus += new EventHandler(VistaButton_MouseEnter);
this.LostFocus += new EventHandler(VistaButton_MouseLeave);
this.mFadeIn.Tick += new EventHandler(mFadeIn_Tick);
this.mFadeOut.Tick += new EventHandler(mFadeOut_Tick);
this.Resize += new EventHandler(VistaButton_Resize);
}
enum State ...{ None, Hover, Pressed };
/**//// <summary>
/// 按钮的样式
/// </summary>
public enum Style
...{
/**//// <summary>
/// Draw the button as normal
/// </summary>
Default,
/**//// <summary>
/// Only draw the background on mouse over.
/// </summary>
Flat
};
/**//// <summary>
/// 用于设置按钮的用处
/// </summary>
public enum UseTo
...{
Min, Close
};
UseTo Ut = UseTo.Close; //默认作为关闭按钮
[Category("UseTo"),
DefaultValue(UseTo.Close),
Browsable(true),
Description("设置按钮的用处")]
public UseTo UT
...{
get
...{
return Ut;
}
set
...{
Ut = value;
this.Invalidate();
}
}
private string mText;
/**//// <summary>
/// 按钮上显示的文本
/// </summary>
[Category("Text"),
Description("按钮上显示的文本.")]
public string ButtonText
...{
get ...{ return mText; }
set ...{ mText = value; this.Invalidate(); }
}
private Color mForeColor = Color.White;
/**//// <summary>
/// 文本颜色
/// </summary>
[Category("Text"),
Browsable(true),
DefaultValue(typeof(Color), "White"),
Description("文本颜色.")]
public override Color ForeColor
...{
get ...{ return mForeColor; }
set ...{ mForeColor = value; this.Invalidate(); }
}
private ContentAlignment mTextAlign = ContentAlignment.MiddleCenter;
/**//// <summary>
/// 文本对齐方式
/// </summary>
[Category("Text"),
DefaultValue(typeof(ContentAlignment), "MiddleCenter")]
public ContentAlignment TextAlign
...{
get ...{ return mTextAlign; }
set ...{ mTextAlign = value; this.Invalidate(); }
}
private Image mImage;
/**//// <summary>
按钮上的图片
/**//// </summary>
[Category("Image"),
DefaultValue(null)]
public Image Image
...{
get ...{ return mImage; }
set ...{ mImage = value; this.Invalidate(); }
}
private ContentAlignment mImageAlign = ContentAlignment.MiddleLeft;
/**//// <summary>
按钮对齐方式
/**//// </summary>
[Category("Image"),
DefaultValue(typeof(ContentAlignment), "MiddleLeft")]
public ContentAlignment ImageAlign
...{
get ...{ return mImageAlign; }
set ...{ mImageAlign = value; this.Invalidate(); }
}
private Size mImageSize = new Size(24, 24);
/**//// <summary>
图片大小
/**//// </summary>
[Category("Image"),
DefaultValue(typeof(Size), "24, 24")]
public Size ImageSize
...{
get ...{ return mImageSize; }
set ...{ mImageSize = value; this.Invalidate(); }
}
private Style mButtonStyle = Style.Default;
/**//// <summary>
按钮的样式
/**//// </summary>
[Category("Appearance"),
DefaultValue(typeof(Style), "Default")]
public Style ButtonStyle
...{
get ...{ return mButtonStyle; }
set ...{ mButtonStyle = value; this.Invalidate(); }
}
private int mCornerRadius = 3;
/**//// <summary>
按钮边角的曲度
/**//// </summary>
[Category("Appearance"),
DefaultValue(8)]
public int CornerRadius
...{
get ...{ return mCornerRadius; }
set ...{ mCornerRadius = value; this.Invalidate(); }
}
private Color mHighlightColor = Color.Gray;
/**//// <summary>
高亮的颜色
/**//// </summary>
[Category("Appearance"),
DefaultValue(typeof(Color), "White")]
public Color HighlightColor
...{
get ...{ return mHighlightColor; }
set ...{ mHighlightColor = value; this.Invalidate(); }
}
private Color mButtonColor = Color.Black;
/**//// <summary>
/// The bottom color of the button that
/// will be drawn over the base color.
/// </summary>
[Category("Appearance"),
DefaultValue(typeof(Color), "Black")]
public Color ButtonColor
...{
get ...{ return mButtonColor; }
set ...{ mButtonColor = value; this.Invalidate(); }
}
private Color mGlowColor = Color.FromArgb(141, 189, 255);
/**//// <summary>
/// 鼠标移上去之后显示的颜色
/// </summary>
[Category("Appearance"),
DefaultValue(typeof(Color), "141,189,255")]
public Color GlowColor
...{
get ...{ return mGlowColor; }
set ...{ mGlowColor = value; this.Invalidate(); }
}
private Image mBackImage;
/**//// <summary>
背景图片
/**//// </summary>
[Category("Appearance"),
DefaultValue(null)]
public Image BackImage
...{
get ...{ return mBackImage; }
set ...{ mBackImage = value; this.Invalidate(); }
}
private static Color mBaseColor = Color.Black;
/**//// <summary>
/// The backing color that the rest of
/// the button is drawn. For a glassier
/// effect set this property to Transparent.
/// </summary>
[Category("Appearance"),
DefaultValue(typeof(Color), "Black")]
public Color BaseColor
...{
get ...{ return mBaseColor; }
set ...{ mBaseColor = value; this.Invalidate(); }
}
/**//// <summary>
/// 按钮的形状
/// </summary>
/// <param name="r"></param>
/// <param name="r1"></param>
/// <param name="r2"></param>
/// <param name="r3"></param>
/// <param name="r4"></param>
/// <returns></returns>
private GraphicsPath RoundRect(RectangleF r, float r1, float r2, float r3, float r4)
...{
float x = r.X, y = r.Y, w = r.Width, h = r.Height;
GraphicsPath rr = new GraphicsPath();
rr.AddBezier(x, y + r1, x, y, x + r1, y, x + r1, y);
rr.AddLine(x + r1, y, x + w - r2, y);
rr.AddBezier(x + w - r2, y, x + w, y, x + w, y + r2, x + w, y + r2);
rr.AddLine(x + w, y + r2, x + w, y + h - r3);
rr.AddBezier(x + w, y + h - r3, x + w, y + h, x + w - r3, y + h, x + w - r3, y + h);
rr.AddLine(x + w - r3, y + h, x + r4, y + h);
rr.AddBezier(x + r4, y + h, x, y + h, x, y + h - r4, x, y + h - r4);
rr.AddLine(x, y + h - r4, x, y + r1);
return rr;
}
/**//// <summary>
/// 对齐方式
/// </summary>
/// <param name="textalign"></param>
/// <returns></returns>
private StringFormat StringFormatAlignment(ContentAlignment textalign)
...{
StringFormat sf = new StringFormat();
switch (textalign)
...{
case ContentAlignment.TopLeft:
case ContentAlignment.TopCenter:
case ContentAlignment.TopRight:
sf.LineAlignment = StringAlignment.Near;
break;
case ContentAlignment.MiddleLeft:
case ContentAlignment.MiddleCenter:
case ContentAlignment.MiddleRight:
sf.LineAlignment = StringAlignment.Center;
break;
case ContentAlignment.BottomLeft:
case ContentAlignment.BottomCenter:
case ContentAlignment.BottomRight:
sf.LineAlignment = StringAlignment.Far;
break;
}
switch (textalign)
...{
case ContentAlignment.TopLeft:
case ContentAlignment.MiddleLeft:
case ContentAlignment.BottomLeft:
sf.Alignment = StringAlignment.Near;
break;
case ContentAlignment.TopCenter:
case ContentAlignment.MiddleCenter:
case ContentAlignment.BottomCenter:
sf.Alignment = StringAlignment.Center;
break;
case ContentAlignment.TopRight:
case ContentAlignment.MiddleRight:
case ContentAlignment.BottomRight:
sf.Alignment = StringAlignment.Far;
break;
}
return sf;
}
/**//// <summary>
/// 画出按钮的外框线条
/// </summary>
/// <param name="g">The graphics object used in the paint event.</param>
private void DrawOuterStroke(Graphics g)
...{
if (this.ButtonStyle == Style.Flat && this.mButtonState == State.None) ...{ return; }
Rectangle r = this.ClientRectangle;
r.Width -= 1; r.Height -= 1;
using (GraphicsPath rr = RoundRect(r, CornerRadius, CornerRadius, CornerRadius, CornerRadius)) //圆角矩形
...{
using (Pen p = new Pen(this.ButtonColor))
...{
g.DrawPath(p, rr); //画出外框
}
}
}
/**//// <summary>
/// 画出按钮的内框线条
/// </summary>
/// <param name="g">The graphics object used in the paint event.</param>
private void DrawInnerStroke(Graphics g)
...{
if (this.ButtonStyle == Style.Flat && this.mButtonState == State.None) ...{ return; }
Rectangle r = this.ClientRectangle;
r.X++; r.Y++;
r.Width -= 3; r.Height -= 3;
using (GraphicsPath rr = RoundRect(r, CornerRadius, CornerRadius, CornerRadius, CornerRadius))
...{
using (Pen p = new Pen(this.HighlightColor))
...{
g.DrawPath(p, rr);
}
}
}
/**//// <summary>
/// 画出按钮的背景
/// </summary>
/// <param name="g">The graphics object used in the paint event.</param>
private void DrawBackground(Graphics g)
...{
if (this.ButtonStyle == Style.Flat && this.mButtonState == State.None) ...{ return; }
int alpha = (mButtonState == State.Pressed) ? 204 : 127;
Rectangle r = this.ClientRectangle;
r.Width--; r.Height--;
using (GraphicsPath rr = RoundRect(r, CornerRadius, CornerRadius, CornerRadius, CornerRadius))
...{
using (SolidBrush sb = new SolidBrush(this.BaseColor))
...{
g.FillPath(sb, rr);
}
if (this.BackImage != null) ...{ g.DrawImage(this.BackImage, this.ClientRectangle); }
g.ResetClip();
using (SolidBrush sb = new SolidBrush(Color.FromArgb(alpha, this.ButtonColor)))
...{
g.FillPath(sb, rr);
}
}
}
/**//// <summary>
/// 画出按钮的上半部分高光颜色
/// </summary>
/// <param name="g">The graphics object used in the paint event.</param>
private void DrawHighlight(Graphics g)
...{
if (this.ButtonStyle == Style.Flat && this.mButtonState == State.None) ...{ return; }
int alpha = (mButtonState == State.Pressed) ? 60 : 150;
Rectangle rect = new Rectangle(0, 0, this.Width, this.Height / 2);
using (GraphicsPath r = RoundRect(rect, CornerRadius, CornerRadius, 0, 0))
...{
using (LinearGradientBrush lg = new LinearGradientBrush(r.GetBounds(),
Color.FromArgb(alpha, this.HighlightColor),
Color.FromArgb(alpha / 3, this.HighlightColor),
LinearGradientMode.Vertical))
...{
g.FillPath(lg, r);
}
}
}
/**//// <summary>
/// 当鼠标移上去的时候的炫光
/// </summary>
/// <param name="g">The graphics object used in the paint event.</param>
private void DrawGlow(Graphics g)
...{
if (this.mButtonState == State.Pressed) ...{ return; }
using (GraphicsPath glow = new GraphicsPath())
...{
Rectangle r = this.ClientRectangle;
//r.Width -= 3; r.Height -= 3;
glow.AddPath(RoundRect(new Rectangle(r.Left + 1, r.Top + 1, r.Width - 3, r.Height - 3), CornerRadius, CornerRadius, CornerRadius, CornerRadius), true);
using (GraphicsPath gp = RoundRect(new Rectangle(r.Left + 1, r.Top + 1, r.Width - 3, r.Height / 2 - 2), CornerRadius, CornerRadius, CornerRadius, CornerRadius))
...{
Color c = Color.FromArgb(mGlowAlpha, this.GlowColor);
Color c1 = Color.FromArgb(mGlowAlpha / 2 + 50, Color.White);
using (SolidBrush sb = new SolidBrush(c))
...{
using (SolidBrush sb1 = new SolidBrush(c1))
...{
g.FillPath(sb, glow);
g.FillPath(sb1, gp);
}
}
}
}
g.ResetClip();
}
/**//// <summary>
/// 显示按钮的文本
/// </summary>
/// <param name="g">The graphics object used in the paint event.</param>
private void DrawText(Graphics g)
...{
StringFormat sf = StringFormatAlignment(this.TextAlign);
Rectangle r = new Rectangle(8, 8, this.Width - 17, this.Height - 17);
g.DrawString(this.ButtonText, this.Font, new SolidBrush(this.ForeColor), r, sf);
}
/**//// <summary>
/// 画出按钮上的图标
/// </summary>
/// <param name="g"></param>
private void DrawIcon(Graphics g)
...{
if (this.UT == UseTo.Close)
...{
//关闭图片
}
else if (this.UT == UseTo.Min)
...{
//最小化的图片
}
}
private void VistaButton_Paint(object sender, PaintEventArgs e)
...{
Graphics g = e.Graphics;
g.SmoothingMode = SmoothingMode.AntiAlias;
g.InterpolationMode = InterpolationMode.HighQualityBicubic;
DrawBackground(g);
DrawHighlight(g);
DrawGlow(g);
DrawIcon(g);
DrawInnerStroke(g);
}
private void VistaButton_Resize(object sender, EventArgs e)
...{
Rectangle r = this.ClientRectangle;
r.X -= 1; r.Y -= 1;
r.Width += 2; r.Height += 2;
using (GraphicsPath rr = RoundRect(r, CornerRadius, CornerRadius, CornerRadius, CornerRadius))
...{
this.Region = new Region(rr);
}
}
private void VistaButton_MouseEnter(object sender, EventArgs e)
...{
mButtonState = State.Hover;
mFadeOut.Stop();
mFadeIn.Start();
}
private void VistaButton_MouseLeave(object sender, EventArgs e)
...{
mButtonState = State.None;
if (this.mButtonStyle == Style.Flat) ...{ mGlowAlpha = 0; }
mFadeIn.Stop();
mFadeOut.Start();
}
private void VistaButton_MouseDown(object sender, MouseEventArgs e)
...{
if (e.Button == MouseButtons.Left)
...{
mButtonState = State.Pressed;
if (this.mButtonStyle != Style.Flat) ...{ mGlowAlpha = 255; }
mFadeIn.Stop();
mFadeOut.Stop();
this.Invalidate();
}
}
private void mFadeIn_Tick(object sender, EventArgs e)
...{
if (this.ButtonStyle == Style.Flat) ...{ mGlowAlpha = 0; }
if (mGlowAlpha + 30 >= 255)
...{
mGlowAlpha = 255;
mFadeIn.Stop();
}
else
...{
mGlowAlpha += 30;
}
this.Invalidate();
}
private void mFadeOut_Tick(object sender, EventArgs e)
...{
if (this.ButtonStyle == Style.Flat) ...{ mGlowAlpha = 0; }
if (mGlowAlpha - 30 <= 0)
...{
mGlowAlpha = 0;
mFadeOut.Stop();
}
else
...{
mGlowAlpha -= 30;
}
this.Invalidate();
}
private void VistaButton_KeyDown(object sender, KeyEventArgs e)
...{
if (e.KeyCode == Keys.Space)
...{
MouseEventArgs m = new MouseEventArgs(MouseButtons.Left, 0, 0, 0, 0);
VistaButton_MouseDown(sender, m);
}
}
private void VistaButton_KeyUp(object sender, KeyEventArgs e)
...{
if (e.KeyCode == Keys.Space)
...{
MouseEventArgs m = new MouseEventArgs(MouseButtons.Left, 0, 0, 0, 0);
calledbykey = true;
VistaButton_MouseUp(sender, m);
}
}
private void VistaButton_MouseUp(object sender, MouseEventArgs e)
...{
if (e.Button == MouseButtons.Left)
...{
mButtonState = State.Hover;
mFadeIn.Stop();
mFadeOut.Stop();
this.Invalidate();
if (calledbykey == true) ...{ this.OnClick(EventArgs.Empty); calledbykey = false; }
}
}
}
}
转载于:https://www.cnblogs.com/AsionTang/archive/2010/05/22/1741511.html
【转】C#使用GDI+制作背景颜色淡入淡出效果的按钮相关推荐
- Unity实现屏幕淡入淡出效果
预期效果:为实现在进入新场景时的淡入淡出效果 编译器版本:2021.3.19f1c1 使用组件:UI --> RawImage 在Unity场景切换的时候,使用RawImage制作场景的淡入淡出 ...
- 网页制作背景颜色代码大全
网页制作背景颜色代码大全 FFFFFF #DDDDDD #AAAAAA #888888 #666666 #444444 #000000 #FFB7DD #FF88C2 #FF44AA #FF0088 ...
- 记录 | 微信小程序设置页面背景颜色不起效果
问题:在 .json 文件里面设置背景颜色不起效果 {"usingComponents": {"van-icon": "@vant/weapp/ico ...
- 今日份安利:音频淡入淡出效果如何制作?
淡入淡出是在影视音乐作品中,经常会使用到的一种处理技巧.它能够让渐渐引入音乐,又移除音乐,不会给人产生很突兀的感觉.小伙伴们在制作短视频的时候,也可以使用这种技巧,这能够让短视频产生不错的效果.那你们 ...
- 音频淡入淡出怎么设置?淡入淡出效果如何制作方法合集
不知道小伙伴们是否和我一样,喜欢用一首歌的高潮部分来作为手机铃声.如果在嘈杂的环境下,这个铃声听起来就不会觉得很大声,但如果在比较安静的环境下,就很容易被铃声吓到.所以为了防止这一情况的发生,我们可以 ...
- 《迷失岛2》游戏开发框架开发日记:场景切换和淡入淡出效果
M_Studio的教程:[<迷失岛2>游戏框架开发01:实现场景转换|Unity教程] 搭建场景 使用下载好的素材搭建场景H1-H4和H2A.永久的场景Persistent,将场景都拖拽到 ...
- 【UE Sequencer系列】07-创建慢镜头、粒子效果、淡入淡出效果、添加音乐
目录 一.创建慢镜头 二.创建粒子效果 三.创建淡入淡出效果 四.添加音乐 一.创建慢镜头 1. 添加时间膨胀轨迹 2. 设置一开始的播放速率为1 通过减少时间膨胀系数来制作慢镜头 二.创建粒子效果 ...
- 004_淡入淡出效果
1. jQuery淡入淡出方法 1.1. 通过jQuery, 您可以实现元素的淡入淡出效果. 1.2. jQuery拥有下面四种fade方法: fadeIn().fadeOut().fadeToggl ...
- 淡入淡出效果 || 高亮显示案例
淡入淡出效果 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
最新文章
- Android 打包 aar文件的流程以及aar的引用
- 团队前四次作业——个人总结
- 用python语言实现-Python语言实现百度语音识别API的使用实例
- CCNA-第十五篇-DHCP配置+SDN介绍(最后一章)
- Android8.0学习(1)---Android 架构
- 32怎么将mcu内的代码擦除_8位和32位MCU该如何选择?
- 英特尔:我们解决VR体验所需的强大计算量
- (十)统计表速查(标准正态分布、t分布、卡方分布)
- Flutter系列之改变CupertinoSwitch的大小
- Linux 服务器上传文件到阿里网盘
- Java地位无可动摇的12个原因
- Excel利用公式向导快速设置成绩的评级系统!
- ISE 下按键消抖实验
- BootLoader这个玩意
- 视觉定位领域专栏(二)常用数据集介绍
- 国内十大活跃报表 BI 产品深度点评
- windbg查阅资料(持续更新)
- 【APP设计规范指南—工信部启示】
- 安卓 Android的Bugly SDK的接入
- 十一、51单片机之串口通信
热门文章
- mysql事务高级_mysql高级 标量 与事务
- 一些实用博客的分享(ES6详解,echart属性详解)
- axios post,get,put
- SDL2源代码分析2:窗口(SDL_Window)
- echarts折线图y轴根据数值自动_R语言基础绘图教程——第3章:折线图和带状图...
- php重点,php – 课程。重点是什么?
- python写一个笔记软件_科学网—python学习笔记(1)——创建应用 - 高雪峰的博文...
- matlab 数组范围内,MATLAB索引超出数组范围
- Spring依赖注入static静态变量相关问题
- idea工具修改Git路径