C#--自定義控件-panel控件（漸變色，文字的繪制）

以下是學習筆記：

參考：https://www.bilibili.com/video/BV1eQ4y1M7ZY?p=3

 

自定義控件開發的思路：屬性，事件，Paint(重寫），這三個不一定都要有的

效果：

 

用途：分類顯示內容的場景

一，自定義控件

1，添加“組件類”

,2，根據自定義控件的功能修改繼承

 

 3，代碼如下：

namespace Jason_Controls
{
    public partial class JasonPanel : Panel
    {
        public JasonPanel()
        {
            InitializeComponent();
        }

        public JasonPanel(IContainer container)
        {
            container.Add(this);

            InitializeComponent();
        }

        #region 屬性

        private Color headBackColor=Color.LimeGreen;
        [Category("Jason控件自定義屬性")]
        [Description("標題的背景顏色")]
        public Color HeadBackColor
        {
            get { return headBackColor; }
            set
            {
                headBackColor = value; 
                this.Invalidate();
            }
        }

        private Color headForeColor = Color.Black;
        [Category("Jason控件自定義屬性")]
        [Description("標題的前景顏色")]
        public Color HeadForeColor
        {
            get { return headForeColor; }
            set
            {
                headForeColor = value;
                this.Invalidate();
            }
        }

        private int headHeight = 30;
        [Category("Jason控件自定義屬性")]
        [Description("標題的高度")]
        public int HeadHeight
        {
            get { return headHeight; }
            set
            {
                headHeight = value;
                this.Invalidate();
            }
        }

        private string headText = "標題名稱";
        [Category("Jason控件自定義屬性")]
        [Description("標題的內容")]
        public string HeadText
        {
            get { return headText; }
            set
            {
                headText = value;
                this.Invalidate();
            }
        }

        private float linearScale= 0.4f;
        [Category("Jason控件自定義屬性")]
        [Description("漸變的程度")]
        public float LinearScale
        {
            get { return linearScale; }
            set
            {
                linearScale = value;
                this.Invalidate();
            }
        }


        #endregion

        #region 字段
        //畫布
        private Graphics g;
        //畫筆
        private Pen p;
        //畫刷
        private SolidBrush sb;
       
        #endregion

        #region 繪制過程

        protected override void OnPaint(PaintEventArgs e)
        {
            base.OnPaint(e);

            //自定義繪制過程

            //獲取畫布
            g = e.Graphics;

            //設置畫布
            SetGraphics(g);

            //繪制過程

            //【1】畫標題框

            //LinearGradientBrush漸變色的畫刷,有四個參數
            //參數1：new PointF(0, 0)左上角
            //參數2：new PointF(0, this.headHeight) 左下角
            //參數1和參數2說是從上往下漸變
            //參數3：漸變的第一個顏色
            //參數4：漸變的第二個顏色
            using (LinearGradientBrush brush = new LinearGradientBrush(new PointF(0, 0), new PointF(0, this.headHeight),
                setStartLinearColor(this.headBackColor), this.headBackColor))
            {
                //填充矩形
                g.FillRectangle(brush,new Rectangle(0,0,this.Width,this.headHeight));//參數1：畫刷 參數2：矩形
            }
            
            //【2】繪制文字
            StringFormat sf=new StringFormat();//格式
            sf.Alignment = StringAlignment.Center;//水平居中
            sf.LineAlignment = StringAlignment.Center;//垂直居中
            using (SolidBrush sb=new SolidBrush(this.headForeColor))
            {
                g.DrawString(this.headText,this.Font,sb, new Rectangle(0, 0, this.Width, this.headHeight),sf);
            }

            //【3】繪制邊框
            using (Pen p =new Pen(this.headForeColor))
            {
                //g.DrawRectangle(p, 0, 0, this.Width, this.Height);//只顯示一半，原因：默認的筆有1個像素的寬度，畫的矩形超過了控件的1個像素的，就畫出去啦
                g.DrawRectangle(p, 0, 0, this.Width - 1, this.Height - 1);               
                g.DrawLine(p,0,this.headHeight,this.Width-1,this.headHeight);
            }

            


        }

        private Color setStartLinearColor(Color EndLinearColor)
        {
            return Color.FromArgb((int)(EndLinearColor.R + (255 - EndLinearColor.R) * this.linearScale),
                (int)(EndLinearColor.G + (255 - EndLinearColor.G) * this.linearScale),
                (int) (EndLinearColor.B + (255 - EndLinearColor.B) * this.linearScale));
        }


        #endregion


        #region 設置畫布屬性的方法

        private void SetGraphics(Graphics g)
        {
            //設置畫布的屬性
            g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;//消除鋸齒
            g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;//高質量顯示

            g.TextRenderingHint = System.Drawing.Text.TextRenderingHint.ClearTypeGridFit;//字體，是字體更加清晰
            g.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias;//字體消除鋸齒
        }

        #endregion
    }
}

　　

二，繪制過程講解

1，繪制過程

 

 

 

1，漸變方向的說明：

 

 

3，漸變顏色的通用算法

        private Color setStartLinearColor(Color EndLinearColor)
        {
            return Color.FromArgb((int)(EndLinearColor.R + (255 - EndLinearColor.R) * this.linearScale),
                (int)(EndLinearColor.G + (255 - EndLinearColor.G) * this.linearScale),
                (int) (EndLinearColor.B + (255 - EndLinearColor.B) * this.linearScale));
        }

　　

漸變程度設置到0.6左右，漸變效果好看些

 

 

4，給整個控件畫邊框的說明：