C#控件美化之路(4)：GDI+繪製一個帶圖標按鈕ImageButton 技术頭條網

C#控件美化之路(4)：GDI+繪製一個帶圖標按鈕ImageButton

2020-05-01 09:56:00 文林軟控

接上一篇文章，繪製按鈕。

本文旨在，按鈕上使用GDI+增加一個圖標。圖標按鈕。

圖標按鈕控件

本文較上一篇文章，增加兩個知識點。

一、用GDI 將圖片繪製在指定位置。

二、計算文字位置，繪製文字。

圖片區域劃分

首先新建二個屬性，屬性為圖標大小。和需要顯示的圖標。

私有屬性

<code>        #region 私有屬性
        private Image image = null;
        private Size imageSize = new Size(32, 32);
        #endregion/<code>

公有屬性

<code>        #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/<code>

圖標默認值為null。圖標默認大小32,32。

接下來開始重繪控件。圖標居中。因為在GDI繪製中指定是左上角的點。和長寬。所以居中，需要計算位置。方法如下

高度：（控件高 - 圖標高）/2。

<code>(this.Height - ImageSize.Height) / 2/<code>

依據此原理，可完整計算出一個圖標所在的位置

<code>recimage = new Rectangle(2, 
                         (this.Height - ImageSize.Height) / 2, 
                         ImageSize.Width,  

                         ImageSize.Height);/<code>

Rectangle 聲明一個圖標所在的位置及大小。

上代碼塊中示意

X =2

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

Width=ImageSize.Width

Height=ImageSize.Height

目前為止一個完整圖標區域已經劃分好。接下來使用代碼將圖標繪製在控件上即可。

當然在繪製時候需要先判定用戶是否設置了圖標信息，免除用戶沒有設置導致控件報錯失敗。代碼如下

<code>                if (Image != null)
                    g.DrawImage(Image, recimage);/<code>

看看效果一個圖標順利展示在自定義控件中。

接下來繪製文字信息。

文字信息區域大小，當前繪製文字，水平靠左（在圖標後輸出文字）。垂直居中。

X=2 + ImageSize.Width + 2；//釋義：2為間隙。圖標與邊框間隙、圖標與後面文字間隙。使得繪製的圖標更加美觀。

寬Width=this.Width - ImageSize.Width - 2-2-2 //釋義：寬為控件寬減去圖標寬減去間隙

代碼塊如下

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

按鈕圖標

至此一個圖標帶圖標按鈕繪製完成。