C#控件美化之路(4):image控件显示图片_GDI+绘制一个带图标按钮ImageButton

接上一篇文章,绘制按钮。

C#控件美化之路(3):GDI+绘制一个Button控件

本文旨在,按钮上使用GDI+增加一个图标。图标按钮。

107a49f9089e3bc750e814b9c4c7d69f.png

图标按钮控件

本文较上一篇文章,增加两个知识点。

一、用GDI 将图片绘制在指定位置。

二、计算文字位置,绘制文字。

244e33221102b7668b5c40df6018c0b8.png

图片区域划分

首先新建二个属性,属性为图标大小。和需要显示的图标。

私有属性

        #region 私有属性        private Image image = null;        private Size imageSize = new Size(32, 32);        #endregion

公有属性

        #region 公有属性        [Category("Wen"), DefaultValue(null)]        public Image Image { get => image; set { image = value; this.Invalidate(); } }        [Category("Wen")]        [DefaultValue(typeof(Size),"32,32")]        public Size ImageSize { get => imageSize; set { imageSize = value; this.Invalidate(); } }        #endregion

图标默认值为null。图标默认大小32,32。

接下来开始重绘控件。图标居中。因为在GDI绘制中 指定是左上角的点。和长宽。所以居中,需要计算位置。方法如下

高度:(控件高 - 图标高)/2。

(this.Height - ImageSize.Height) / 2

依据此原理,可完整计算出一个图标所在的位置

recimage = new Rectangle(2,                          (this.Height - ImageSize.Height) / 2,                          ImageSize.Width,                          ImageSize.Height);

Rectangle 声明一个图标所在的位置及大小。

上代码块中示意

X =2

Y=(this.Height - ImageSize.Height) / 2

Width=ImageSize.Width

Height=ImageSize.Height

目前为止一个完整图标区域已经划分好。接下来使用代码将图标绘制在控件上即可。

当然在绘制时候需要先判定用户是否设置了图标信息,免除用户没有设置导致控件报错失败。代码如下

if (Image != null) g.DrawImage(Image, recimage);

看看效果一个图标顺利展示在自定义控件中。

7b25f90484db6e92b5949e2ba9c827af.png

接下来绘制文字信息。

文字信息区域大小,当前绘制文字,水平靠左(在图标后输出文字)。垂直居中。

X=2 + ImageSize.Width + 2;//释义:2为间隙。图标与边框间隙、图标与后面文字间隙。使得绘制的图标更加美观。

Width=this.Width - ImageSize.Width - 2-2-2 //释义:宽为控件宽减去图标宽减去间隙

代码块如下

recString = new Rectangle(2 + ImageSize.Width + 2, 0, this.Width - ImageSize.Width - 6, this.Height);

107a49f9089e3bc750e814b9c4c7d69f.png

按钮图标

至此一个图标带图标按钮绘制完成。

cdb6d2451905793ae0e5641b8e4de68f.gif

猜你喜欢

转载自blog.csdn.net/lihongmao5911/article/details/115417688
今日推荐