当前位置: 首页 > 最新文章 > 正文

C#控件美化之路(5):图标按钮各类样式

上一篇文章已经将图标文字绘制完成。在一般软件开发中,常用按钮一般不止,一个靠左图标和靠左文字。文字靠下图标居上居中,文字浮现在图标上方。公有属性 [Category] [DefaultValue] public TextImageRelation TextImageRelation { get; set; } = TextImageRelation.Ima

admin

上一篇文章已经将图标文字绘制完成。在一般软件开发中,常用按钮一般不止,一个靠左图标和靠左文字。文字靠下图标居上居中,文字浮现在图标上方。公有属性 [Category] [DefaultValue] public TextImageRelation TextImageRelation { get; set; } = TextImageRelation.ImageBeforeText;上一篇文章已经提到如何绘制一个图标,也详细解释了如何使得图标垂直居中。= null) g.DrawImage; g.DrawString;到目前位置一个完整的按钮绘制完成贴上完整代码块。小伙伴可以直接诶复制粘贴开箱即用。


C#控件美化之路(5):图标按钮各类样式


上一篇文章已经将图标文字绘制完成。

在一般软件开发中,常用按钮一般不止,一个靠左图标和靠左文字。

常用的一般三种按钮。文字靠下图标居上居中,文字浮现在图标上方。如上图。

公有属性

        [Category("Wen")]        [DefaultValue(TextImageRelation.ImageBeforeText)]        public TextImageRelation TextImageRelation { get; set; } = TextImageRelation.ImageBeforeText;

上一篇文章已经提到如何绘制一个图标,也详细解释了如何使得图标垂直居中。本文不做详细解释。

贴关键代码

第一个:绘制按钮居中,按钮居中

                //图标绘制靠上居中                recimage = new Rectangle((this.Width - ImageSize.Width) / 2,                                         (this.Height - ImageSize.Height) / 2,                                          ImageSize.Width,                                          ImageSize.Height);                recString = new Rectangle(0,                                           3 + ImageSize.Height,                                          this.Width,                                           this.Height - 3 - ImageSize.Height);                if (Image != null)                    g.DrawImage(Image, recimage);                g.DrawString(this.Text, Font, brush, rec, ControlHelper.StringContersCenter);

贴上一个比较常用的属性,可以做一个常用静态帮助类

        /// <summary>        /// 绘制文字,垂直居中,水平靠左        /// </summary>        public static StringFormat StringConters { get; set; }            = new StringFormat(StringFormatFlags.NoClip | StringFormatFlags.NoWrap)            {                LineAlignment = StringAlignment.Center,                Trimming = StringTrimming.EllipsisCharacter            };        /// <summary>        /// 绘制文字,垂直居中,水平居中        /// </summary>        public static StringFormat StringContersCenter { get; set; }            = new StringFormat(StringFormatFlags.NoClip | StringFormatFlags.NoWrap)            {                LineAlignment = StringAlignment.Center,                Alignment = StringAlignment.Center,                Trimming = StringTrimming.EllipsisCharacter            };

以后绘制文字时候就不用每次都写很长一段代码。

第二个:绘制图标考上居中,文字靠下居中

                //图标绘制靠上居中                recimage = new Rectangle((this.Width - ImageSize.Width) / 2,                                         3,                                          ImageSize.Width,                                          ImageSize.Height);                recString = new Rectangle(0,                                           3 + ImageSize.Height,                                           this.Width,                                           this.Height - 3 - ImageSize.Height);                if (Image != null)                    g.DrawImage(Image, recimage);                g.DrawString(this.Text, Font, brush, recString, ControlHelper.StringContersCenter);

到目前位置一个完整的按钮绘制完成

贴上完整代码块。小伙伴可以直接诶复制粘贴开箱即用。

        protected override void OnPaint(PaintEventArgs e)        {            base.OnPaint(e);            Graphics g = e.Graphics;            Rectangle rec = this.ClientRectangle;            Rectangle recimage = Rectangle.Empty;            Rectangle recString = Rectangle.Empty;            Brush brush = new SolidBrush(this.ForeColor);            if (TextImageRelation == TextImageRelation.ImageAboveText)            {                //图标绘制靠上居中                recimage = new Rectangle((this.Width - ImageSize.Width) / 2, 3, ImageSize.Width, ImageSize.Height);                recString = new Rectangle(0, 3 + ImageSize.Height, this.Width, this.Height - 3 - ImageSize.Height);                if (Image != null)                    g.DrawImage(Image, recimage);                g.DrawString(this.Text, Font, brush, recString, ControlHelper.StringContersCenter);            }            else if (TextImageRelation == TextImageRelation.Overlay || Image == null)            {                //图标绘制靠上居中                recimage = new Rectangle((this.Width - ImageSize.Width) / 2, (this.Height - ImageSize.Height) / 2, ImageSize.Width, ImageSize.Height);                recString = new Rectangle(0, 3 + ImageSize.Height, this.Width, this.Height - 3 - ImageSize.Height);                if (Image != null)                    g.DrawImage(Image, recimage);                g.DrawString(this.Text, Font, brush, rec, ControlHelper.StringContersCenter);            }            else            {                //其他都是图标坐标文字靠图标                recimage = new Rectangle(2, (this.Height - ImageSize.Height) / 2, ImageSize.Width, ImageSize.Height);                recString = new Rectangle(2 + ImageSize.Width + 2, 0, this.Width - ImageSize.Width - 6, this.Height);                if (Image != null)                    g.DrawImage(Image, recimage);                g.DrawString(this.Text, Font, brush, recString, ControlHelper.StringConters);            }            if (this.BorderStyle == BorderStyle.FixedSingle)            {                System.Drawing.Drawing2D.GraphicsPath path = ControlHelper.CreateRoundedRectanglePath(new Rectangle(0, 0, Width - 1, Height - 1), 10);                using (Pen pen = new Pen(Color.FromArgb(153, 153, 153)))                {                    g.DrawPath(pen, path);                }            }        }

感兴趣的小伙伴,欢迎在下方留言。关注我,带你重绘美化C#控件


C#控件美化之路(5):图标按钮各类样式


上一篇: 面试题:水平垂直居中的17种方法 下一篇:good是好,money是钱,那good money是什么意思?
返回顶部