官网
前提
入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章。
GitHub:https://github.com/kwwwvagaa/NetWinformControl
码云:https://gitee.com/kwwwvagaa/net_winform_custom_control.git
如果觉得写的还行,请点个 star 支持一下吧
欢迎前来交流探讨: 企鹅群568015492
目录
c#Winform自定义控件-目录-HZHControls - 冰封一夏 - 博客园
准备工作
自定义的分为控件和窗体2种类型,分别都有一个基类,基类实现公共的大部分工作
开始
首先从基类控件开始吧,
主要实现功能:
- 圆角
- 边框
- 填充颜色
添加一个用户控件,命名为UCControlBase,写入相关属性,包含圆角角度,边框颜色,边框宽度,填充颜色,背景色等
1 private bool _isRadius = false; 2 3 private int _cornerRadius = 24; 4 5 6 private bool _isShowRect = false; 7 8 private Color _rectColor = Color.FromArgb(220, 220, 220); 9 10 private int _rectWidth = 1; 11 12 private Color _fillColor = Color.Transparent; 13 /// <summary> 14 /// 是否圆角 15 /// </summary> 16 [Description("是否圆角"), Category("自定义")] 17 public bool IsRadius 18 { 19 get 20 { 21 return this._isRadius; 22 } 23 set 24 { 25 this._isRadius = value; 26 } 27 } 28 //圆角角度 29 [Description("圆角角度"), Category("自定义")] 30 public int ConerRadius 31 { 32 get 33 { 34 return this._cornerRadius; 35 } 36 set 37 { 38 this._cornerRadius = value; 39 } 40 } 41 42 /// <summary> 43 /// 是否显示边框 44 /// </summary> 45 [Description("是否显示边框"), Category("自定义")] 46 public bool IsShowRect 47 { 48 get 49 { 50 return this._isShowRect; 51 } 52 set 53 { 54 this._isShowRect = value; 55 } 56 } 57 /// <summary> 58 /// 边框颜色 59 /// </summary> 60 [Description("边框颜色"), Category("自定义")] 61 public Color RectColor 62 { 63 get 64 { 65 return this._rectColor; 66 } 67 set 68 { 69 this._rectColor = value; 70 this.Refresh(); 71 } 72 } 73 /// <summary> 74 /// 边框宽度 75 /// </summary> 76 [Description("边框宽度"), Category("自定义")] 77 public int RectWidth 78 { 79 get 80 { 81 return this._rectWidth; 82 } 83 set 84 { 85 this._rectWidth = value; 86 } 87 } 88 /// <summary> 89 /// 当使用边框时填充颜色,当值为背景色或透明色或空值则不填充 90 /// </summary> 91 [Description("当使用边框时填充颜色,当值为背景色或透明色或空值则不填充"), Category("自定义")] 92 public Color FillColor 93 { 94 get 95 { 96 return this._fillColor; 97 } 98 set 99 { 100 this._fillColor = value; 101 } 102 }
需要做的就是重写OnPaint,来画边框以及填充颜色
1 protected override void OnPaint(PaintEventArgs e) 2 { 3 if (this.Visible) 4 { 5 if (this._isRadius) 6 { 7 this.SetWindowRegion(); 8 } 9 if (this._isShowRect) 10 { 11 Color rectColor = this._rectColor; 12 Pen pen = new Pen(rectColor, (float)this._rectWidth); 13 Rectangle clientRectangle = base.ClientRectangle; 14 GraphicsPath graphicsPath = new GraphicsPath(); 15 graphicsPath.AddArc(0, 0, _cornerRadius, _cornerRadius, 180f, 90f); 16 graphicsPath.AddArc(clientRectangle.Width - _cornerRadius - 1, 0, _cornerRadius, _cornerRadius, 270f, 90f); 17 graphicsPath.AddArc(clientRectangle.Width - _cornerRadius - 1, clientRectangle.Height - _cornerRadius - 1, _cornerRadius, _cornerRadius, 0f, 90f); 18 graphicsPath.AddArc(0, clientRectangle.Height - _cornerRadius - 1, _cornerRadius, _cornerRadius, 90f, 90f); 19 graphicsPath.CloseFigure(); 20 e.Graphics.SmoothingMode = SmoothingMode.AntiAlias; 21 if (_fillColor != Color.Empty && _fillColor != Color.Transparent && _fillColor != this.BackColor) 22 e.Graphics.FillPath(new SolidBrush(this._fillColor), graphicsPath); 23 e.Graphics.DrawPath(pen, graphicsPath); 24 } 25 } 26 base.OnPaint(e); 27 } 28 29 private void SetWindowRegion() 30 { 31 GraphicsPath path = new GraphicsPath(); 32 Rectangle rect = new Rectangle(-1, -1, base.Width + 1, base.Height); 33 path = this.GetRoundedRectPath(rect, this._cornerRadius); 34 base.Region = new Region(path); 35 } 36 37 private GraphicsPath GetRoundedRectPath(Rectangle rect, int radius) 38 { 39 Rectangle rect2 = new Rectangle(rect.Location, new Size(radius, radius)); 40 GraphicsPath graphicsPath = new GraphicsPath(); 41 graphicsPath.AddArc(rect2, 180f, 90f);//左上角 42 rect2.X = rect.Right - radius; 43 graphicsPath.AddArc(rect2, 270f, 90f);//右上角 44 rect2.Y = rect.Bottom - radius; 45 rect2.Width += 1; 46 rect2.Height += 1; 47 graphicsPath.AddArc(rect2, 360f, 90f);//右下角 48 rect2.X = rect.Left; 49 graphicsPath.AddArc(rect2, 90f, 90f);//左下角 50 graphicsPath.CloseFigure(); 51 return graphicsPath; 52 }
至此基类控件就完成了,下面是完成代码
View Code
View Code
用处及效果
用处:你可以把它当作一个panel来用,比如需要包裹一些控件并显示一个圆角边框的时候,你应该想到用这个控件
效果图:其实就是一个圆角边框的面板