最近需要做一个圆形的按钮，去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).调整控件大小;
代码如下：
1 using System; 2 using System.Collections.Generic; 3 using System.ComponentModel; 4 using System.Diagnostics; 5 using System.Linq; 6 using System.Text; 7 8 using System.Windows.Forms; 9 using System.Drawing; 10 using System.Drawing.Drawing2D; 11 12 namespace 章鱼.Forms 13 { 14 public partial class RoundButton : Button 15 { 16 #region --成员变量-- 17 18 RectangleF rect = new RectangleF();//控件矩形 19 bool mouseEnter;//鼠标是否进入控件区域的标志 20 bool buttonPressed;//按钮是否按下 21 bool buttonClicked;//按钮是否被点击 22 #endregion 23 24 #region --属性-- 25 26 #region 形状 27 28 /// <summary> 29 /// 设置或获取圆形按钮的圆的边距离方框边的距离 30 /// </summary> 31 [Browsable(true), DefaultValue(2)] 32 [Category("Appearance")] 33 public int DistanceToBorder { get; set; } 34 35 #endregion 36 37 #region 填充色 38 39 /// <summary> 40 /// 获取或设置按钮主体颜色 41 /// </summary> 42 /// <value>The color of the focus.</value> 43 [Browsable(true), DefaultValue(typeof(Color), "DodgerBlue"), Description("按钮主体渐变起始颜色")] 44 [Category("Appearance")] 45 public Color ButtonCenterColorEnd { get; set; } 46 47 /// <summary> 48 /// 获取或设置按钮主体颜色 49 /// </summary> 50 [Browsable(true), DefaultValue(typeof(Color), "CornflowerBlue"), Description("按钮主体渐变终点颜色")] 51 [Category("Appearance")] 52 public Color ButtonCenterColorStart { get; set; } 53 54 /// <summary> 55 /// 获取或设置按钮主体颜色渐变方向 56 /// </summary> 57 [Browsable(true), DefaultValue(90), Description("按钮主体颜色渐变方向，X轴顺时针开始")] 58 [Category("Appearance")] 59 public int GradientAngle { get; set; } 60 61 /// <summary> 62 /// 是否显示中间标志 63 /// </summary> 64 [Browsable(true), DefaultValue(typeof(bool), "true"), Description("是否显示中间标志")] 65 [Category("Appearance")] 66 public bool IsShowIcon { get; set; } 67 68 /// <summary> 69 /// 按钮中间标志填充色 70 /// </summary> 71 [Browsable(true), DefaultValue(typeof(Color), "Black"), Description("按钮中间标志填充色")] 72 [Category("Appearance")] 73 public Color IconColor { get; set; } 74 75 76 #endregion 77 78 #region 边框 79 80 /// <summary> 81 /// 获取或设置边框大小 82 /// </summary> 83 [Browsable(true), DefaultValue(4), Description("按钮边框大小")] 84 [Category("Appearance")] 85 public int BorderWidth { get; set; } 86 87 /// <summary> 88 /// 获取或设置按钮边框颜色 89 /// </summary> 90 /// <value>The color of the focus.</value> 91 [Browsable(true), DefaultValue(typeof(Color), "Black"), Description("按钮边框颜色")] 92 [Category("Appearance")] 93 public Color BorderColor { get; set; } 94 95 /// <summary> 96 /// 获取或设置边框透明度 97 /// </summary> 98 [Browsable(true), DefaultValue(200), Description("设置边框透明度：0-255")] 99 [Category("Appearance")] 100 public int BorderTransparent { get; set; } 101 102 /// <summary> 103 /// 获取或设置按钮获取焦点后边框颜色 104 /// </summary> 105 /// <value>The color of the focus.</value> 106 [Browsable(true), DefaultValue(typeof(Color), "Orange"), Description("按钮获得焦点后的边框颜色")] 107 [Category("Appearance")] 108 public Color FocusBorderColor { get; set; } 109 110 #endregion 111 112 #endregion 113 114 #region --构造函数-- 115 /// <summary> 116 /// 构造函数 117 /// </summary> 118 public RoundButton() 119 { 120 // 控件风格 121 SetStyle(ControlStyles.SupportsTransparentBackColor, true); 122 SetStyle(ControlStyles.OptimizedDoubleBuffer, true); 123 SetStyle(ControlStyles.AllPaintingInWmPaint, true); 124 SetStyle(ControlStyles.ResizeRedraw, true); 125 SetStyle(ControlStyles.UserPaint, true); 126 //初始值设定 127 this.Height = this.Width = 80; 128 129 DistanceToBorder = 4; 130 ButtonCenterColorStart = Color.CornflowerBlue; 131 ButtonCenterColorEnd = Color.DodgerBlue; 132 BorderColor = Color.Black; 133 FocusBorderColor = Color.Orange; 134 IconColor = Color.Black; 135 BorderWidth = 4; 136 BorderTransparent = 200; 137 GradientAngle = 90; 138 139 mouseEnter = false; 140 buttonPressed = false; 141 buttonClicked = false; 142 IsShowIcon = true; 143 144 InitializeComponent(); 145 } 146 #endregion 147 148 #region --重写部分事件-- 149 150 #region OnPaint事件 151 152 /// <summary> 153 /// 控件绘制 154 /// </summary> 155 /// <param name="pevent"></param> 156 protected override void OnPaint(PaintEventArgs pevent) 157 { 158 //base.OnPaint(pevent); 159 base.OnPaintBackground(pevent); 160 161 Graphics g = pevent.Graphics; 162 g.InterpolationMode = InterpolationMode.HighQualityBicubic; 163 g.SmoothingMode = SmoothingMode.AntiAlias;//抗锯齿 164 165 myResize();//调整圆形区域 166 167 var brush = new LinearGradientBrush(rect, ButtonCenterColorStart, ButtonCenterColorEnd, GradientAngle); 168 169 PaintShape(g, brush, rect);//绘制按钮中心区域 170 171 DrawBorder(g);//绘制边框 172 173 DrawStateIcon(g);//绘制按钮功能标志 174 175 if (mouseEnter) 176 { 177 DrawHighLight(g);//绘制高亮区域 178 DrawStateIcon(g);//绘制按钮功能标志 179 } 180 } 181 182 #endregion 183 184 #region 鼠标 185 186 /// <summary> 187 /// 鼠标点击事件 188 /// </summary> 189 /// <param name="e"></param> 190 protected override void OnMouseClick(MouseEventArgs e) 191 { 192 base.OnMouseClick(e); 193 buttonClicked = !buttonClicked; 194 } 195 /// <summary> 196 /// Raises the <see cref="E:System.Windows.Forms.Control.MouseUp"/> event. 197 /// </summary> 198 /// <param name="e">A <see cref="T:System.Windows.Forms.MouseEventArgs"/> that contains the event data.</param> 199 protected override void OnMouseUp(MouseEventArgs e) 200 { 201 base.OnMouseUp(e); 202 if (e.Button != MouseButtons.Left) return; 203 buttonPressed = false; 204 base.Invalidate(); 205 } 206 207 /// <summary> 208 /// Raises the <see cref="E:System.Windows.Forms.Control.MouseDown"/> event. 209 /// </summary> 210 /// <param name="e">A <see cref="T:System.Windows.Forms.MouseEventArgs"/> that contains the event data.</param> 211 protected override void OnMouseDown(MouseEventArgs e) 212 { 213 base.OnMouseDown(e); 214 if (e.Button != MouseButtons.Left) return; 215 buttonPressed = true; 216 } 217 218 /// <summary> 219 /// 鼠标进入按钮 220 /// </summary> 221 /// <param name="e"></param> 222 protected override void OnMouseEnter(EventArgs e) 223 { 224 base.OnMouseEnter(e); 225 mouseEnter = true; 226 } 227 228 /// <summary> 229 /// 鼠标离开控件 230 /// </summary> 231 /// <param name="e"></param> 232 protected override void OnMouseLeave(EventArgs e) 233 { 234 base.OnMouseLeave(e); 235 mouseEnter = false; 236 } 237 238 #endregion 239 #endregion 240 241 #region --自定义函数-- 242 243 /// <summary> 244 /// 绘制中心区域标志 245 /// </summary> 246 /// <param name="g"></param> 247 private void DrawStateIcon(Graphics g) 248 { 249 if (IsShowIcon) 250 { 251 if (buttonClicked) 252 { 253 GraphicsPath startIconPath = new GraphicsPath(); 254 int W = base.Width / 3; 255 Point p1 = new Point(W, W); 256 Point p2 = new Point(2 * W, W); 257 Point p3 = new Point(2 * W, 2 * W); 258 Point p4 = new Point(W, 2 * W); 259 Point[] pts = { p1, p2, p3, p4 }; 260 startIconPath.AddLines(pts); 261 Brush brush = new SolidBrush(IconColor); 262 g.FillPath(brush, startIconPath); 263 } 264 else 265 { 266 GraphicsPath stopIconPath = new GraphicsPath(); 267 int W = base.Width / 4; 268 Point p1 = new Point(3 * W / 2, W); 269 Point p2 = new Point(3 * W / 2, 3 * W); 270 Point p3 = new Point(3 * W, 2 * W); 271 Point[] pts = { p1, p2, p3, }; 272 stopIconPath.AddLines(pts); 273 Brush brush = new SolidBrush(IconColor); 274 g.FillPath(brush, stopIconPath); 275 } 276 } 277 } 278 279 /// <summary> 280 /// 重新确定控件大小 281 /// </summary> 282 protected void myResize() 283 { 284 int x = DistanceToBorder; 285 int y = DistanceToBorder; 286 int width = this.Width - 2 * DistanceToBorder; 287 int height = this.Height - 2 * DistanceToBorder; 288 rect = new RectangleF(x, y, width, height); 289 } 290 291 /// <summary> 292 /// 绘制高亮效果 293 /// </summary> 294 /// <param name="g">Graphic对象</param> 295 protected virtual void DrawHighLight(Graphics g) 296 { 297 RectangleF highlightRect = rect; 298 highlightRect.Inflate(-BorderWidth / 2, -BorderWidth / 2); 299 Brush brush = Brushes.DodgerBlue; 300 if (buttonPressed) 301 { 302 brush = new LinearGradientBrush(rect, ButtonCenterColorStart, ButtonCenterColorEnd, GradientAngle); 303 } 304 305 else 306 { 307 brush = new LinearGradientBrush(rect, Color.FromArgb(60, Color.White), 308 Color.FromArgb(60, Color.White), GradientAngle); 309 } 310 PaintShape(g, brush, highlightRect); 311 } 312 313 /// <summary> 314 /// 绘制边框 315 /// </summary> 316 /// <param name="g">Graphics对象</param> 317 protected virtual void DrawBorder(Graphics g) 318 { 319 Pen p = new Pen(BorderColor); 320 if (Focused) 321 { 322 p.Color = FocusBorderColor;//外圈获取焦点后的颜色 323 p.Width = BorderWidth; 324 PaintShape(g, p, rect); 325 } 326 else 327 { 328 p.Width = BorderWidth; 329 PaintShape(g, p, rect); 330 } 331 332 } 333 334 /// <summary> 335 /// 336 /// </summary> 337 /// <param name="g">Graphic对象</param> 338 protected virtual void DrawPressState(Graphics g) 339 { 340 RectangleF pressedRect = rect; 341 pressedRect.Inflate(-2, -2); 342 Brush brush = new LinearGradientBrush(rect, Color.FromArgb(60, Color.White), 343 Color.FromArgb(60, Color.White), GradientAngle); 344 PaintShape(g, brush, pressedRect); 345 } 346 347 /// <summary> 348 /// 绘制图形 349 /// </summary> 350 /// <param name="g">Graphics对象</param> 351 /// <param name="pen">Pen对象</param> 352 /// <param name="rect">RectangleF对象</param> 353 protected virtual void PaintShape(Graphics g, Pen pen, RectangleF rect) 354 { 355 g.DrawEllipse(pen, rect); 356 } 357 358 /// <summary> 359 /// 绘制图形 360 /// </summary> 361 /// <param name="g">Graphics对象</param> 362 /// <param name="brush">Brush对象</param> 363 /// <param name="rect">Rectangle对象</param> 364 protected virtual void PaintShape(Graphics g, Brush brush, RectangleF rect) 365 { 366 g.FillEllipse(brush, rect); 367 } 368 369 #endregion 370 } 371 }
(^_^)
898
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
