C#控件美化之路(3):button垂直居中,GDI+绘制一个Button控件

d1ec2e5e970acd85b4e81dea1c50c383.png

C#自定义控件Button

接上一篇文章,GDI+绘制Lable控件,此控件两个知识点。

一、绘制外形边框。(备注:可以添加一个属性是否显示边框)

二、绘制按钮文字。(备注:按钮文字水平垂直方向居中)。

上一篇文章中已经将文字绘制详细说明,当前教程,只贴部分代码。不做详细说明。可以浏览上一篇文章详细了解。C#控件美化之路自己动手绘制用GDI+绘制一个Lable控件(二)

新建一个类,继承Control。构造函数中可以设置一个默认大小

this.Size = new Size(80, 30);

声明公有属性,属性包含,显示文本,已经是否显示外边框。外边框可以用bool值,根据个人喜好修改。文中直接使用BorderStyle。具体代码可以在VS中使用F12转跳查看详情。

        #region 公有属性     
        public string Text 
        {get => base.Text;set{base.Text = value; this.Invalidate();}}
        [Category("Wen"),Description("是否显示边框"),DefaultValue(BorderStyle.None)]
        public BorderStyle BorderStyle { get; set; } 
        #endregion

接下来贴关键代码。重绘内容,依然是重写Paint。

代码片段一。绘制文本居中(其他部分代码可以在如何手绘Lable中找到方法)

扫描二维码关注公众号,回复: 13121377 查看本文章
 g.DrawString(this.Text, this.Font, new SolidBrush(this.ForeColor), rec, new StringFormat(StringFormatFlags.NoClip | StringFormatFlags.NoWrap) { LineAlignment = StringAlignment.Center, Alignment = StringAlignment.Center, Trimming = StringTrimming.EllipsisCharacter });

代码片段二。绘制外边框:

            if (this.BorderStyle == BorderStyle.FixedSingle)
            {
                System.Drawing.Drawing2D.GraphicsPath path = CreateRoundedRectanglePath(new Rectangle(0, 0, Width - 1, Height - 1), 10);
                using (Pen pen = new Pen(Color.FromArgb(153, 153, 153)))
                {
                    g.DrawPath(pen, path);
                }
            }

此方法,主要将一个矩形形状生成一个矩形圆弧形状 CreateRoundedRectanglePath 代码块如下

        ///         
        /// 根据矩形和圆得到一个圆角矩形Path
        /// 
        /// The rect.
        /// The corner radius. 
        /// GraphicsPath.
        public static GraphicsPath CreateRoundedRectanglePath(this Rectangle rect, int cornerRadius)
        {
            GraphicsPath roundedRect = new GraphicsPath();
            roundedRect.AddArc(rect.X, rect.Y, cornerRadius * 2, cornerRadius * 2, 180, 90);
            roundedRect.AddLine(rect.X + cornerRadius, rect.Y, rect.Right - cornerRadius * 2, rect.Y);
            roundedRect.AddArc(rect.X + rect.Width - cornerRadius * 2, rect.Y, cornerRadius * 2, cornerRadius * 2, 270, 90); 
            roundedRect.AddLine(rect.Right, rect.Y + cornerRadius * 2, rect.Right, rect.Y + rect.Height - cornerRadius * 2); 
            roundedRect.AddArc(rect.X + rect.Width - cornerRadius * 2, rect.Y + rect.Height - cornerRadius * 2, cornerRadius * 2, cornerRadius * 2, 0, 90); 
            roundedRect.AddLine(rect.Right - cornerRadius * 2, rect.Bottom, rect.X + cornerRadius * 2, rect.Bottom); 
            roundedRect.AddArc(rect.X, rect.Bottom - cornerRadius * 2, cornerRadius * 2, cornerRadius * 2, 90, 90); 
            roundedRect.AddLine(rect.X, rect.Bottom - cornerRadius * 2, rect.X, rect.Y + cornerRadius * 2); roundedRect.CloseFigure();
            return roundedRect;
        }

到此一个按钮形状完成。预览效果

e386277877f7fbbfe4f60359c4ee53d4.png

目前为止,按钮形状完成。一般按钮,鼠标移动到按钮位置,背景颜色会改变。所以我们可以重写鼠标事件。直接修改背景。

        #region 私有属性
        private Color backColor = Color.Transparent;
        #endregion

私有属性,主要记录鼠标进入控件之前的颜色,便于鼠标离开后,控件恢复之前颜色。

        protected override void OnMouseLeave(EventArgs e) 
        {
            base.OnMouseLeave(e); this.BackColor = this.backColor; 
        } 
        protected override void OnMouseEnter(EventArgs e) 
        {
            base.OnMouseEnter(e); this.backColor = this.BackColor; 
            this.BackColor = Color.FromArgb(63, 63, 65); 
        }

至此。一个按钮绘制完成。

当然本文中,鼠标事件主要用背景颜色改变实现。为了更加美化,可以是直接使用文中描述的Path路径填充绘制。具体方法有兴趣的小伙伴可以试试。

预览效果

91417c3b26db0c830cc0e5c0c6872005.gif

猜你喜欢

转载自blog.csdn.net/lihongmao5911/article/details/115416909