最近需要做一个圆形的按钮，去CodeProject找了一下，发现有现成的可用，但不能完全满足我的需求。因此自己试着利用WinForm中的自定义组件功能，制作一个圆形按钮。圆形按钮小制作即将开始之前，先来看看最终效果(Demo程序下载链接：http://download.csdn.net/detail/keypig_zz/9440806)
下面分两步制作这个按钮。
A. 目标
想了一下，即将制作的圆形按钮需要满足几个要求：
i. 按钮呈现圆形或椭圆形，具体形状参数可调；
ii. 按钮用不同的填充色来响应鼠标进入或者离开事件；
iii. 按钮通过改变边的颜色来显示是否获取焦点状态；
iv. 按钮通过改变填充色的亮度来区分按钮是否按下。
B. 实现代码
具体的制作思路大致如下：
i. 成员变量：
(a).按钮绘制区域矩形 Rectangle rect;
(b).鼠标书否进入 bool buttonEnter;
(c).鼠标是否按下 bool buttonPressed;
(d).按钮是否被点击 bool buttonClicked。
ii. 属性：
(a).形状;
(b).填充色;
(c).边框。
iii. 构造函数
(a).按钮风格设定;
(b).成员变量初始化;
iv. 部分函数重写
(a).控件绘制OnPaint;
(b).鼠标相关函数;
v. 自定义函数
(a).图案填充;
(b).绘制边框;
(c).调整控件大小;
代码如下：
1using System; 2using System.Collections.Generic; 3using System.ComponentModel; 4using System.Diagnostics; 5using System.Linq; 6using System.Text; 7 8using System.Windows.Forms; 9using System.Drawing; 10using System.Drawing.Drawing2D; 11 12namespace 章鱼.Forms 13{ 14publicpartialclass RoundButton : Button 15 { 16#region--成员变量-- 17 18RectangleF rect =newRectangleF();//控件矩形 19boolmouseEnter;//鼠标是否进入控件区域的标志 20boolbuttonPressed;//按钮是否按下 21boolbuttonClicked;//按钮是否被点击 22#endregion 23 24#region--属性-- 25 26#region形状 27 28/// 29/// 设置或获取圆形按钮的圆的边距离方框边的距离 30/// 31[Browsable(true), DefaultValue(2)] 32[Category("Appearance")] 33publicintDistanceToBorder {get;set; } 34 35#endregion 36 37#region填充色 38 39/// 40/// 获取或设置按钮主体颜色 41/// 42///The color of the focus. 43[Browsable(true), DefaultValue(typeof(Color),"DodgerBlue"), Description("按钮主体渐变起始颜色")] 44[Category("Appearance")] 45publicColor ButtonCenterColorEnd {get;set; } 46 47/// 48/// 获取或设置按钮主体颜色 49/// 50[Browsable(true), DefaultValue(typeof(Color),"CornflowerBlue"), Description("按钮主体渐变终点颜色")] 51[Category("Appearance")] 52publicColor ButtonCenterColorStart {get;set; } 53 54/// 55/// 获取或设置按钮主体颜色渐变方向 56/// 57[Browsable(true), DefaultValue(90), Description("按钮主体颜色渐变方向，X轴顺时针开始")] 58[Category("Appearance")] 59publicintGradientAngle {get;set; } 60 61/// 62/// 是否显示中间标志 63/// 64[Browsable(true), DefaultValue(typeof(bool),"true"), Description("是否显示中间标志")] 65[Category("Appearance")] 66publicboolIsShowIcon {get;set; } 67 68/// 69/// 按钮中间标志填充色 70/// 71[Browsable(true), DefaultValue(typeof(Color),"Black"), Description("按钮中间标志填充色")] 72[Category("Appearance")] 73publicColor IconColor {get;set; } 74 75 76#endregion 77 78#region边框 79 80/// 81/// 获取或设置边框大小 82/// 83[Browsable(true), DefaultValue(4), Description("按钮边框大小")] 84[Category("Appearance")] 85publicintBorderWidth {get;set; } 86 87/// 88/// 获取或设置按钮边框颜色 89/// 90///The color of the focus. 91[Browsable(true), DefaultValue(typeof(Color),"Black"), Description("按钮边框颜色")] 92[Category("Appearance")] 93publicColor BorderColor {get;set; } 94 95/// 96/// 获取或设置边框透明度 97/// 98[Browsable(true), DefaultValue(200), Description("设置边框透明度：0-255")] 99[Category("Appearance")]100publicintBorderTransparent {get;set; }101102///103/// 获取或设置按钮获取焦点后边框颜色104///105///The color of the focus.106[Browsable(true), DefaultValue(typeof(Color),"Orange"), Description("按钮获得焦点后的边框颜色")]107[Category("Appearance")]108publicColor FocusBorderColor {get;set; }109110#endregion111112#endregion113114#region--构造函数--115///116/// 构造函数117///118public RoundButton()119 {120// 控件风格121SetStyle(ControlStyles.SupportsTransparentBackColor,true);122SetStyle(ControlStyles.OptimizedDoubleBuffer,true);123SetStyle(ControlStyles.AllPaintingInWmPaint,true);124SetStyle(ControlStyles.ResizeRedraw,true);125SetStyle(ControlStyles.UserPaint,true);126//初始值设定127this.Height =this.Width =80;128129DistanceToBorder =4;130ButtonCenterColorStart = Color.CornflowerBlue;131ButtonCenterColorEnd = Color.DodgerBlue;132BorderColor = Color.Black;133FocusBorderColor = Color.Orange;134IconColor = Color.Black;135BorderWidth =4;136BorderTransparent =200;137GradientAngle =90;138139mouseEnter =false;140buttonPressed =false;141buttonClicked =false;142IsShowIcon =true;143144 InitializeComponent();145 }146#endregion147148#region--重写部分事件--149150#regionOnPaint事件151152///153/// 控件绘制154///155///156protectedoverridevoid OnPaint(PaintEventArgs pevent)157 {158//base.OnPaint(pevent);159base.OnPaintBackground(pevent);160161Graphics g = pevent.Graphics;162g.InterpolationMode = InterpolationMode.HighQualityBicubic;163g.SmoothingMode = SmoothingMode.AntiAlias;//抗锯齿 164165myResize();//调整圆形区域166167varbrush =new LinearGradientBrush(rect, ButtonCenterColorStart, ButtonCenterColorEnd, GradientAngle);168169PaintShape(g, brush, rect);//绘制按钮中心区域170171DrawBorder(g);//绘制边框 172173DrawStateIcon(g);//绘制按钮功能标志174175if (mouseEnter)176 {177DrawHighLight(g);//绘制高亮区域178DrawStateIcon(g);//绘制按钮功能标志179 }180 }181182#endregion183184#region鼠标185186///187/// 鼠标点击事件188///189///190protectedoverridevoid OnMouseClick(MouseEventArgs e)191 {192base.OnMouseClick(e);193buttonClicked = !buttonClicked;194 }195///196/// Raises the event.197///198///A that contains the event data.199protectedoverridevoid OnMouseUp(MouseEventArgs e)200 {201base.OnMouseUp(e);202if(e.Button != MouseButtons.Left)return;203buttonPressed =false;204base.Invalidate();205 }206207///208/// Raises the event.209///210///A that contains the event data.211protectedoverridevoid OnMouseDown(MouseEventArgs e)212 {213base.OnMouseDown(e);214if(e.Button != MouseButtons.Left)return;215buttonPressed =true;216 }217218///219/// 鼠标进入按钮220///221///222protectedoverridevoid OnMouseEnter(EventArgs e)223 {224base.OnMouseEnter(e);225mouseEnter =true;226 }227228///229/// 鼠标离开控件230///231///232protectedoverridevoid OnMouseLeave(EventArgs e)233 {234base.OnMouseLeave(e);235mouseEnter =false;236 }237238#endregion239#endregion240241#region--自定义函数--242243///244/// 绘制中心区域标志245///246///247privatevoid DrawStateIcon(Graphics g)248 {249if (IsShowIcon)250 {251if (buttonClicked)252 {253GraphicsPath startIconPath =new GraphicsPath();254intW =base.Width /3;255Point p1 =new Point(W, W);256Point p2 =newPoint(2* W, W);257Point p3 =newPoint(2* W,2* W);258Point p4 =newPoint(W,2* W);259Point[] pts = { p1, p2, p3, p4 };260 startIconPath.AddLines(pts);261Brush brush =new SolidBrush(IconColor);262 g.FillPath(brush, startIconPath);263 }264else265 {266GraphicsPath stopIconPath =new GraphicsPath();267intW =base.Width /4;268Point p1 =newPoint(3* W /2, W);269Point p2 =newPoint(3* W /2,3* W);270Point p3 =newPoint(3* W,2* W);271Point[] pts = { p1, p2, p3, };272 stopIconPath.AddLines(pts);273Brush brush =new SolidBrush(IconColor);274 g.FillPath(brush, stopIconPath);275 }276 }277 }278279///280/// 重新确定控件大小281///282protectedvoid myResize()283 {284intx = DistanceToBorder;285inty = DistanceToBorder;286intwidth =this.Width -2* DistanceToBorder;287intheight =this.Height -2* DistanceToBorder;288rect =new RectangleF(x, y, width, height);289 }290291///292/// 绘制高亮效果293///294///Graphic对象295protectedvirtualvoid DrawHighLight(Graphics g)296 {297RectangleF highlightRect = rect;298highlightRect.Inflate(-BorderWidth /2, -BorderWidth /2);299Brush brush = Brushes.DodgerBlue;300if (buttonPressed)301 {302brush =new LinearGradientBrush(rect, ButtonCenterColorStart, ButtonCenterColorEnd, GradientAngle);303 }304305else306 {307brush =newLinearGradientBrush(rect, Color.FromArgb(60, Color.White),308Color.FromArgb(60, Color.White), GradientAngle);309 }310 PaintShape(g, brush, highlightRect);311 }312313///314/// 绘制边框315///316///Graphics对象317protectedvirtualvoid DrawBorder(Graphics g)318 {319Pen p =new Pen(BorderColor);320if (Focused)321 {322p.Color = FocusBorderColor;//外圈获取焦点后的颜色323p.Width = BorderWidth;324 PaintShape(g, p, rect);325 }326else327 {328p.Width = BorderWidth;329 PaintShape(g, p, rect);330 }331332 }333334///335///336///337///Graphic对象338protectedvirtualvoid DrawPressState(Graphics g)339 {340RectangleF pressedRect = rect;341pressedRect.Inflate(-2, -2);342Brush brush =newLinearGradientBrush(rect, Color.FromArgb(60, Color.White),343Color.FromArgb(60, Color.White), GradientAngle);344 PaintShape(g, brush, pressedRect);345 }346347///348/// 绘制图形349///350///Graphics对象351///Pen对象352///RectangleF对象353protectedvirtualvoid PaintShape(Graphics g, Pen pen, RectangleF rect)354 {355 g.DrawEllipse(pen, rect);356 }357358///359/// 绘制图形 360///361///Graphics对象362///Brush对象363///Rectangle对象364protectedvirtualvoid PaintShape(Graphics g, Brush brush, RectangleF rect)365 {366 g.FillEllipse(brush, rect);367 }368369#endregion370 }371}
网友评论