WinForm中重繪TabControl選項卡標題

最近開發WinForm頻繁使用了TabControl控件，這個控件的選項卡沒有BackgroundImage這個屬性，那么如何為其各個選項卡添加背景圖片呢？（這里說的是每個TabPage的頭部，也就是標題，不是工作區域。）

最開始用到TabControl的時候，我的每個選項卡是寫死的，而后由於項目需求又動態添加了TabControl並生成各個選項卡，而兩次我都要重繪其標題，因此在這里把我當時兩種情形下重繪的方法通過一個例子一起分享出來。

首先先在窗體拖個Tabcontrol控件，然后更改了其Alignment屬性為Left，使其選項卡在左邊。然后可以通過更改其ItemSize調節每個選項卡的大小。值得注意的是，因為在此是把TabControl向左旋轉了90°，所以此時設置寬的時候實際上改變的是它的高，設置高的時候實際上改變的是它的寬。而且設置寬（改變高）發現無效是因為受選項卡文本字體所影響，可相應地改變字體尺寸。調整一番后的效果圖：

接着就要進入正題重繪其選項卡背景了。首先要把它的DrawMode屬性改為OwnerDrawFixed，改了這個才會讓用戶自己繪制標題生效。接着給它添加DrawItem事件。事件重繪方法如下：

private void tabMain_DrawItem(object sender, DrawItemEventArgs e)
        {
            Bitmap b0 = new Bitmap(@"..\..\Images\1.jpg");
            Bitmap b1 = new Bitmap(@"..\..\Images\2.jpg");
            Bitmap b2 = new Bitmap(@"..\..\Images\3.jpg");
            Bitmap b3 = new Bitmap(@"..\..\Images\4.jpg");
            switch (e.Index)
                {
                    case 0:
                        e.Graphics.DrawImage(b0, e.Bounds);
                        break;
                    case 1:
                        e.Graphics.DrawImage(b1, e.Bounds);
                        break;
                    case 2: 
                        e.Graphics.DrawImage(b2, e.Bounds);
                        break;
                    case 3:
                        e.Graphics.DrawImage(b3, e.Bounds);
                        break;
                }
        }

 本文的圖片我都事先放在當前項目下的一個Images文件夾里了。

最終效果圖：

以上是寫死的情況下為其重繪標題，現在來介紹當選項卡是動態生成時為其重繪標題的方法。在說明此之前，我們先為原有TabControl添加SelectedIndexChanged事件，通過獲取其SelectedIndex從而知道哪個選項卡被點擊了，在此，我在第二個選項卡里面動態添加另一個TabControl並生成其各個TabPage。代碼如下：

private void tabMain_SelectedIndexChanged(object sender, EventArgs e)
        {
            switch (tabMain.SelectedIndex)
            {
                case 0:
                    break;
                case 1:
                        //假設動態生成的TabControl有4個選項卡
                    for (int i = 0; i < 4; i++)
                    {
                        TabPage page = new TabPage();
                        page.Name = "page" + i.ToString();
                        page.Text = (i + 1).ToString();
                        this.tabSub.Controls.Add(page);
                    }
                    this.tabSub.ItemSize = new System.Drawing.Size(80, 80);
                    this.tabSub.Font = new System.Drawing.Font("宋體", 20);
                    this.tabSub.Dock = DockStyle.Fill;
                    this.tabMain.TabPages[1].Controls.Add(tabSub);
                    break;
                case 2:
                    break;
                case 3:
                    break;
            }
        }

在外部預先定義好要生成的TabControl變量：

TabControl tabSub = new TabControl();

 效果如下：

好了，接下來也該為它重繪下標題了。首先在上面設置tabSub屬性的代碼下新增這兩行：

this.tabSub.DrawItem += new System.Windows.Forms.DrawItemEventHandler(this.tabSub_DrawItem); this.tabSub.DrawMode = System.Windows.Forms.TabDrawMode.OwnerDrawFixed;

第一行是為tabSub新增繪制標題的事件，第二行是為了讓系統使用我們自己繪制的樣式。

然后自己寫個繪制方法，代碼如下：

private void tabSub_DrawItem(object sender, DrawItemEventArgs e)
        {
            List<string> imgPath = new List<string>()
            { 
                @"..\..\Images\d.jpg", 
                @"..\..\Images\s.jpg", 
                @"..\..\Images\n.jpg",
                @"..\..\Images\x.jpg" 
            };
            for (int i = 0; i < this.tabSub.TabCount; i++)
            {
                Bitmap b = new Bitmap(imgPath[i]);
                if (e.Index == i)
                {
                    e.Graphics.DrawImage(b, e.Bounds);
                }
            }
        }

效果如下：

OK，至此大功告成。當然上述代碼是有缺陷的，當你輪換左邊選項卡最后又點到第二個選項卡時，它會再加載多一次，這個只需要在當初繪制的時候加個判斷就行了，可以判斷當前選項卡下是否已經包含了這些控件，或者定義個布爾變量用來判斷是否已經加載就可以了。