前提

入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章。

github:https://github.com/kwwwvagaa/netwinformcontrol

码云:

如果觉得写的还行,请点个 star 支持一下吧

欢迎前来交流探讨: 企鹅群568015492 

麻烦博客下方点个【推荐】,谢谢

nuget

install-package hzh_controls

目录

用处及效果

 

 

准备工作

这个也是用gdi+画的,应该算是最简单的控件了,本来不打算单独写一篇文章的,但是好歹也是个控件吧,于是就写这里了

开始

添加一个类ucpond ,继承usercontrol

属性

  1  /// <summary>
  2         /// the maximum value
  3         /// </summary>
  4         private decimal maxvalue = 100;
  5 
  6         /// <summary>
  7         /// gets or sets the maximum value.
  8         /// </summary>
  9         /// <value>the maximum value.</value>
 10         [description("最大值"), category("自定义")]
 11         public decimal maxvalue
 12         {
 13             get { return maxvalue; }
 14             set
 15             {
 16                 if (value < m_value)
 17                     return;
 18                 maxvalue = value;
 19                 refresh();
 20             }
 21         }
 22 
 23         /// <summary>
 24         /// the m value
 25         /// </summary>
 26         private decimal m_value = 0;
 27 
 28         /// <summary>
 29         /// gets or sets the value.
 30         /// </summary>
 31         /// <value>the value.</value>
 32         [description("值"), category("自定义")]
 33         public decimal value
 34         {
 35             get { return m_value; }
 36             set
 37             {
 38                 if (value < 0)
 39                     return;
 40                 if (value > maxvalue)
 41                     m_value = maxvalue;
 42                 else
 43                     m_value = value;
 44                 refresh();
 45             }
 46         }
 47 
 48         /// <summary>
 49         /// the wall color
 50         /// </summary>
 51         private color wallcolor = color.fromargb(255, 77, 59);
 52 
 53         /// <summary>
 54         /// gets or sets the color of the wall.
 55         /// </summary>
 56         /// <value>the color of the wall.</value>
 57         [description("池壁颜色"), category("自定义")]
 58         public color wallcolor
 59         {
 60             get { return wallcolor; }
 61             set
 62             {
 63                 wallcolor = value;
 64                 refresh();
 65             }
 66         }
 67 
 68         /// <summary>
 69         /// the wall width
 70         /// </summary>
 71         private int wallwidth = 2;
 72 
 73         /// <summary>
 74         /// gets or sets the width of the wall.
 75         /// </summary>
 76         /// <value>the width of the wall.</value>
 77         [description("池壁宽度"), category("自定义")]
 78         public int wallwidth
 79         {
 80             get { return wallwidth; }
 81             set
 82             {
 83                 if (value <= 0)
 84                     return;
 85                 wallwidth = value;
 86                 refresh();
 87             }
 88         }
 89 
 90         /// <summary>
 91         /// the liquid color
 92         /// </summary>
 93         private color liquidcolor = color.fromargb(3, 169, 243);
 94 
 95         [description("液体颜色"), category("自定义")]
 96         public color liquidcolor
 97         {
 98             get { return liquidcolor; }
 99             set { liquidcolor = value; }
100         }

重绘

  protected override void onpaint(painteventargs e)
        {
            base.onpaint(e);
            if (height <= 0)
                return;
            var g = e.graphics;
            g.setgdihigh();
            int intheight = (int)(m_value / maxvalue * this.height);
            if (intheight != 0)
            {
                g.fillrectangle(new solidbrush(liquidcolor), new rectangle(0, this.height - intheight, this.width, intheight));
            }
            //划边
            g.fillrectangle(new solidbrush(wallcolor), 0, 0, wallwidth, this.height);
            g.fillrectangle(new solidbrush(wallcolor), 0, this.height - wallwidth, this.width, wallwidth);
            g.fillrectangle(new solidbrush(wallcolor), this.width - wallwidth-1, 0, wallwidth, this.height);
        }

完整代码

  1 // ***********************************************************************
  2 // assembly         : hzh_controls
  3 // created          : 2019-09-06
  4 //
  5 // ***********************************************************************
  6 // <copyright file="ucpond.cs">
  7 //     copyright by huang zhenghui(黄正辉) all, qq group:568015492 qq:623128629 email:623128629@qq.com
  8 // </copyright>
  9 //
 10 // blog: https://www.cnblogs.com/bfyx
 11 // github:https://github.com/kwwwvagaa/netwinformcontrol
 12 // gitee:https://gitee.com/kwwwvagaa/net_winform_custom_control.git
 13 //
 14 // if you use this code, please keep this note.
 15 // ***********************************************************************
 16 using system;
 17 using system.collections.generic;
 18 using system.linq;
 19 using system.text;
 20 using system.windows.forms;
 21 using system.drawing;
 22 using system.drawing.drawing2d;
 23 using system.componentmodel;
 24 
 25 namespace hzh_controls.controls
 26 {
 27     /// <summary>
 28     /// class ucpond.
 29     /// implements the <see cref="system.windows.forms.usercontrol" />
 30     /// </summary>
 31     /// <seealso cref="system.windows.forms.usercontrol" />
 32     public class ucpond : usercontrol
 33     {
 34         /// <summary>
 35         /// the maximum value
 36         /// </summary>
 37         private decimal maxvalue = 100;
 38 
 39         /// <summary>
 40         /// gets or sets the maximum value.
 41         /// </summary>
 42         /// <value>the maximum value.</value>
 43         [description("最大值"), category("自定义")]
 44         public decimal maxvalue
 45         {
 46             get { return maxvalue; }
 47             set
 48             {
 49                 if (value < m_value)
 50                     return;
 51                 maxvalue = value;
 52                 refresh();
 53             }
 54         }
 55 
 56         /// <summary>
 57         /// the m value
 58         /// </summary>
 59         private decimal m_value = 0;
 60 
 61         /// <summary>
 62         /// gets or sets the value.
 63         /// </summary>
 64         /// <value>the value.</value>
 65         [description("值"), category("自定义")]
 66         public decimal value
 67         {
 68             get { return m_value; }
 69             set
 70             {
 71                 if (value < 0)
 72                     return;
 73                 if (value > maxvalue)
 74                     m_value = maxvalue;
 75                 else
 76                     m_value = value;
 77                 refresh();
 78             }
 79         }
 80 
 81         /// <summary>
 82         /// the wall color
 83         /// </summary>
 84         private color wallcolor = color.fromargb(255, 77, 59);
 85 
 86         /// <summary>
 87         /// gets or sets the color of the wall.
 88         /// </summary>
 89         /// <value>the color of the wall.</value>
 90         [description("池壁颜色"), category("自定义")]
 91         public color wallcolor
 92         {
 93             get { return wallcolor; }
 94             set
 95             {
 96                 wallcolor = value;
 97                 refresh();
 98             }
 99         }
100 
101         /// <summary>
102         /// the wall width
103         /// </summary>
104         private int wallwidth = 2;
105 
106         /// <summary>
107         /// gets or sets the width of the wall.
108         /// </summary>
109         /// <value>the width of the wall.</value>
110         [description("池壁宽度"), category("自定义")]
111         public int wallwidth
112         {
113             get { return wallwidth; }
114             set
115             {
116                 if (value <= 0)
117                     return;
118                 wallwidth = value;
119                 refresh();
120             }
121         }
122 
123         /// <summary>
124         /// the liquid color
125         /// </summary>
126         private color liquidcolor = color.fromargb(3, 169, 243);
127 
128         [description("液体颜色"), category("自定义")]
129         public color liquidcolor
130         {
131             get { return liquidcolor; }
132             set { liquidcolor = value; }
133         }
134         /// <summary>
135         /// initializes a new instance of the <see cref="ucpond"/> class.
136         /// </summary>
137         public ucpond()
138         {
139             this.setstyle(controlstyles.allpaintinginwmpaint, true);
140             this.setstyle(controlstyles.doublebuffer, true);
141             this.setstyle(controlstyles.resizeredraw, true);
142             this.setstyle(controlstyles.selectable, true);
143             this.setstyle(controlstyles.supportstransparentbackcolor, true);
144             this.setstyle(controlstyles.userpaint, true);
145             this.autoscalemode = system.windows.forms.autoscalemode.none;
146             this.size = new size(150, 50);
147         }
148         /// <summary>
149         /// 引发 <see cref="e:system.windows.forms.control.paint" /> 事件。
150         /// </summary>
151         /// <param name="e">包含事件数据的 <see cref="t:system.windows.forms.painteventargs" />。</param>
152         protected override void onpaint(painteventargs e)
153         {
154             base.onpaint(e);
155             if (height <= 0)
156                 return;
157             var g = e.graphics;
158             g.setgdihigh();
159             int intheight = (int)(m_value / maxvalue * this.height);
160             if (intheight != 0)
161             {
162                 g.fillrectangle(new solidbrush(liquidcolor), new rectangle(0, this.height - intheight, this.width, intheight));
163             }
164             //划边
165             g.fillrectangle(new solidbrush(wallcolor), 0, 0, wallwidth, this.height);
166             g.fillrectangle(new solidbrush(wallcolor), 0, this.height - wallwidth, this.width, wallwidth);
167             g.fillrectangle(new solidbrush(wallcolor), this.width - wallwidth-1, 0, wallwidth, this.height);
168         }
169     }
170 }

 

最后的话

如果你喜欢的话,请到  点个星星吧