接上一篇文章,绘制按钮。
C#控件美化之路(3):GDI+绘制一个Button控件
本文旨在,按钮上使用GDI+增加一个图标。图标按钮。
图标按钮控件
本文较上一篇文章,增加两个知识点。
一、用GDI 将图片绘制在指定位置。
二、计算文字位置,绘制文字。
图片区域划分
首先新建二个属性,属性为图标大小。和需要显示的图标。
私有属性
#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);
看看效果一个图标顺利展示在自定义控件中。
接下来绘制文字信息。
文字信息区域大小,当前绘制文字,水平靠左(在图标后输出文字)。垂直居中。
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);
按钮图标
至此一个图标带图标按钮绘制完成。