WinForm(C#)自定义控件之——RoundButton(圆形按钮)

最近需要做一个圆形的按钮，去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).调整控件大小;

代码如下：

 using System;
 using System.Collections.Generic;
 using System.ComponentModel;
 using System.Diagnostics;
 using System.Linq;
 using System.Text;

 using System.Windows.Forms;
 using System.Drawing;
 using System.Drawing.Drawing2D;

 namespace 章鱼.Forms
 {
     public partial class RoundButton : Button
     {
         #region --成员变量--

         RectangleF rect = new RectangleF();//控件矩形
         bool mouseEnter;//鼠标是否进入控件区域的标志
         bool buttonPressed;//按钮是否按下
         bool buttonClicked;//按钮是否被点击
         #endregion

         #region --属性--

         #region 形状

         /// <summary>
         /// 设置或获取圆形按钮的圆的边距离方框边的距离
         /// </summary>
         [Browsable(true), DefaultValue()]
         [Category("Appearance")]
         public int DistanceToBorder { get; set; }

         #endregion

         #region 填充色

         /// <summary>
         /// 获取或设置按钮主体颜色
         /// </summary>
         /// <value>The color of the focus.</value>
         [Browsable(true), DefaultValue(typeof(Color), "DodgerBlue"), Description("按钮主体渐变起始颜色")]
         [Category("Appearance")]
         public Color ButtonCenterColorEnd { get; set; }

         /// <summary>
         /// 获取或设置按钮主体颜色
         /// </summary>
         [Browsable(true), DefaultValue(typeof(Color), "CornflowerBlue"), Description("按钮主体渐变终点颜色")]
         [Category("Appearance")]
         public Color ButtonCenterColorStart { get; set; }

         /// <summary>
         /// 获取或设置按钮主体颜色渐变方向
         /// </summary>
         [Browsable(true), DefaultValue(), Description("按钮主体颜色渐变方向，X轴顺时针开始")]
         [Category("Appearance")]
         public int GradientAngle { get; set; }

         /// <summary>
         /// 是否显示中间标志
         /// </summary>
         [Browsable(true), DefaultValue(typeof(bool), "true"), Description("是否显示中间标志")]
         [Category("Appearance")]
         public bool IsShowIcon { get; set; }

         /// <summary>
         /// 按钮中间标志填充色
         /// </summary>
         [Browsable(true), DefaultValue(typeof(Color), "Black"), Description("按钮中间标志填充色")]
         [Category("Appearance")]
         public Color IconColor { get; set; }

         #endregion

         #region 边框

         /// <summary>
         /// 获取或设置边框大小
         /// </summary>
         [Browsable(true), DefaultValue(), Description("按钮边框大小")]
         [Category("Appearance")]
         public int BorderWidth { get; set; }

         /// <summary>
         /// 获取或设置按钮边框颜色
         /// </summary>
         /// <value>The color of the focus.</value>
         [Browsable(true), DefaultValue(typeof(Color), "Black"), Description("按钮边框颜色")]
         [Category("Appearance")]
         public Color BorderColor { get; set; }

         /// <summary>
         /// 获取或设置边框透明度
         /// </summary>
         [Browsable(true), DefaultValue(), Description("设置边框透明度：0-255")]
         [Category("Appearance")]
         public int BorderTransparent { get; set; }

         /// <summary>
         /// 获取或设置按钮获取焦点后边框颜色
         /// </summary>
         /// <value>The color of the focus.</value>
         [Browsable(true), DefaultValue(typeof(Color), "Orange"), Description("按钮获得焦点后的边框颜色")]
         [Category("Appearance")]
         public Color FocusBorderColor { get; set; }

         #endregion

         #endregion

         #region --构造函数--
         /// <summary>
         /// 构造函数
         /// </summary>
         public RoundButton()
         {
             // 控件风格
             SetStyle(ControlStyles.SupportsTransparentBackColor, true);
             SetStyle(ControlStyles.OptimizedDoubleBuffer, true);
             SetStyle(ControlStyles.AllPaintingInWmPaint, true);
             SetStyle(ControlStyles.ResizeRedraw, true);
             SetStyle(ControlStyles.UserPaint, true);
             //初始值设定
             this.Height = this.Width = ;

             DistanceToBorder = ;
             ButtonCenterColorStart = Color.CornflowerBlue;
             ButtonCenterColorEnd = Color.DodgerBlue;
             BorderColor = Color.Black;
             FocusBorderColor = Color.Orange;
             IconColor = Color.Black;
             BorderWidth = ;
             BorderTransparent = ;
             GradientAngle = ;

             mouseEnter = false;
             buttonPressed = false;
             buttonClicked = false;
             IsShowIcon = true;

             InitializeComponent();
         }
         #endregion

         #region --重写部分事件--

         #region OnPaint事件

         /// <summary>
         /// 控件绘制
         /// </summary>
         /// <param name="pevent"></param>
         protected override void OnPaint(PaintEventArgs pevent)
         {
             //base.OnPaint(pevent);
             base.OnPaintBackground(pevent);

             Graphics g = pevent.Graphics;
             g.InterpolationMode = InterpolationMode.HighQualityBicubic;
             g.SmoothingMode = SmoothingMode.AntiAlias;//抗锯齿         

             myResize();//调整圆形区域

             var brush = new LinearGradientBrush(rect, ButtonCenterColorStart, ButtonCenterColorEnd, GradientAngle);

             PaintShape(g, brush, rect);//绘制按钮中心区域

             DrawBorder(g);//绘制边框            

             DrawStateIcon(g);//绘制按钮功能标志

             if (mouseEnter)
             {
                 DrawHighLight(g);//绘制高亮区域
                 DrawStateIcon(g);//绘制按钮功能标志
             }
         }

         #endregion

         #region 鼠标

         /// <summary>
         /// 鼠标点击事件
         /// </summary>
         /// <param name="e"></param>
         protected override void OnMouseClick(MouseEventArgs e)
         {
             base.OnMouseClick(e);
             buttonClicked = !buttonClicked;
         }
         /// <summary>
         /// Raises the <see cref="E:System.Windows.Forms.Control.MouseUp"/> event.
         /// </summary>
         /// <param name="e">A <see cref="T:System.Windows.Forms.MouseEventArgs"/> that contains the event data.</param>
         protected override void OnMouseUp(MouseEventArgs e)
         {
             base.OnMouseUp(e);
             if (e.Button != MouseButtons.Left) return;
             buttonPressed = false;
             base.Invalidate();
         }

         /// <summary>
         /// Raises the <see cref="E:System.Windows.Forms.Control.MouseDown"/> event.
         /// </summary>
         /// <param name="e">A <see cref="T:System.Windows.Forms.MouseEventArgs"/> that contains the event data.</param>
         protected override void OnMouseDown(MouseEventArgs e)
         {
             base.OnMouseDown(e);
             if (e.Button != MouseButtons.Left) return;
             buttonPressed = true;
         }

         /// <summary>
         /// 鼠标进入按钮
         /// </summary>
         /// <param name="e"></param>
         protected override void OnMouseEnter(EventArgs e)
         {
             base.OnMouseEnter(e);
             mouseEnter = true;
         }

         /// <summary>
         /// 鼠标离开控件
         /// </summary>
         /// <param name="e"></param>
         protected override void OnMouseLeave(EventArgs e)
         {
             base.OnMouseLeave(e);
             mouseEnter = false;
         }

         #endregion
         #endregion

         #region --自定义函数--

         /// <summary>
         /// 绘制中心区域标志
         /// </summary>
         /// <param name="g"></param>
         private void DrawStateIcon(Graphics g)
         {
             if (IsShowIcon)
             {
                 if (buttonClicked)
                 {
                     GraphicsPath startIconPath = new GraphicsPath();
                     int W = base.Width / ;
                     Point p1 = new Point(W, W);
                     Point p2 = new Point( * W, W);
                     Point p3 = new Point( * W,  * W);
                     Point p4 = new Point(W,  * W);
                     Point[] pts = { p1, p2, p3, p4 };
                     startIconPath.AddLines(pts);
                     Brush brush = new SolidBrush(IconColor);
                     g.FillPath(brush, startIconPath);
                 }
                 else
                 {
                     GraphicsPath stopIconPath = new GraphicsPath();
                     int W = base.Width / ;
                     Point p1 = new Point( * W / , W);
                     Point p2 = new Point( * W / ,  * W);
                     Point p3 = new Point( * W,  * W);
                     Point[] pts = { p1, p2, p3, };
                     stopIconPath.AddLines(pts);
                     Brush brush = new SolidBrush(IconColor);
                     g.FillPath(brush, stopIconPath);
                 }
             }
         }

         /// <summary>
         /// 重新确定控件大小
         /// </summary>
         protected void myResize()
         {
             int x = DistanceToBorder;
             int y = DistanceToBorder;
             int width = this.Width -  * DistanceToBorder;
             int height = this.Height -  * DistanceToBorder;
             rect = new RectangleF(x, y, width, height);
         }

         /// <summary>
         /// 绘制高亮效果
         /// </summary>
         /// <param name="g">Graphic对象</param>
         protected virtual void DrawHighLight(Graphics g)
         {
             RectangleF highlightRect = rect;
             highlightRect.Inflate(-BorderWidth / , -BorderWidth / );
             Brush brush = Brushes.DodgerBlue;
             if (buttonPressed)
             {
                 brush = new LinearGradientBrush(rect, ButtonCenterColorStart, ButtonCenterColorEnd, GradientAngle);
             }

             else
             {
                 brush = new LinearGradientBrush(rect, Color.FromArgb(, Color.White),
               Color.FromArgb(, Color.White), GradientAngle);
             }
             PaintShape(g, brush, highlightRect);
         }

         /// <summary>
         /// 绘制边框
         /// </summary>
         /// <param name="g">Graphics对象</param>
         protected virtual void DrawBorder(Graphics g)
         {
             Pen p = new Pen(BorderColor);
             if (Focused)
             {
                 p.Color = FocusBorderColor;//外圈获取焦点后的颜色
                 p.Width = BorderWidth;
                 PaintShape(g, p, rect);
             }
             else
             {
                 p.Width = BorderWidth;
                 PaintShape(g, p, rect);
             }

         }

         /// <summary>
         ///
         /// </summary>
         /// <param name="g">Graphic对象</param>
         protected virtual void DrawPressState(Graphics g)
         {
             RectangleF pressedRect = rect;
             pressedRect.Inflate(-, -);
             Brush brush = new LinearGradientBrush(rect, Color.FromArgb(, Color.White),
                 Color.FromArgb(, Color.White), GradientAngle);
             PaintShape(g, brush, pressedRect);
         }

         /// <summary>
         /// 绘制图形
         /// </summary>
         /// <param name="g">Graphics对象</param>
         /// <param name="pen">Pen对象</param>
         /// <param name="rect">RectangleF对象</param>
         protected virtual void PaintShape(Graphics g, Pen pen, RectangleF rect)
         {
             g.DrawEllipse(pen, rect);
         }

         /// <summary>
         /// 绘制图形
         /// </summary>
         /// <param name="g">Graphics对象</param>
         /// <param name="brush">Brush对象</param>
         /// <param name="rect">Rectangle对象</param>
         protected virtual void PaintShape(Graphics g, Brush brush, RectangleF rect)
         {
             g.FillEllipse(brush, rect);
         }

         #endregion
     }
 }

(^_^)