最近需要做一个圆形的按钮，去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
}
}
(^_^)