C#控件美化之路(5)：圖標按鈕各類樣式

上一篇文章已經將圖標文字繪製完成。

在一般軟件開發中，常用按鈕一般不止，一個靠左圖標和靠左文字。

常用的一般三種按鈕。文字靠下圖標居上居中，文字浮現在圖標上方。如上圖。

公有屬性

<code>        [ ]
        [ ]
        
public
 TextImageRelation TextImageRelation { 
get
; 
set
; } = TextImageRelation.ImageBeforeText;/<code>

上一篇文章已經提到如何繪製一個圖標，也詳細解釋瞭如何使得圖標垂直居中。本文不做詳細解釋。

貼關鍵代碼

第一個：繪製按鈕居中，按鈕居中

<code>                 
                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);/<code>

貼上一個比較常用的屬性，可以做一個常用靜態幫助類

<code>         
         
         
        
public
 
static
 StringFormat StringConters { 
get
; 
set
; }
            = 
new
 StringFormat(StringFormatFlags.NoClip | StringFormatFlags.NoWrap)
            {
                LineAlignment = StringAlignment.Center,
                Trimming = StringTrimming.EllipsisCharacter
            };
         
         
         
        
public
 
static
 StringFormat StringContersCenter { 
get
; 
set
; }
            = 
new
 StringFormat(StringFormatFlags.NoClip | StringFormatFlags.NoWrap)
            {
                LineAlignment = StringAlignment.Center,
                Alignment = StringAlignment.Center,
                Trimming = StringTrimming.EllipsisCharacter
            };/<code>

以後繪製文字時候就不用每次都寫很長一段代碼。

第二個：繪製圖標考上居中，文字靠下居中

<code>                 
                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);/<code>

到目前位置一個完整的按鈕繪製完成

貼上完整代碼塊。小夥伴可以直接誒複製粘貼開箱即用。

<code>        
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);
                }
            }
        }/<code>

感興趣的小夥伴，歡迎在下方留言。關注我，帶你重繪美化C#控件