WinForm TabControl美化

一、简述

TabControl控件是winform里非常常用的一个控件，但是默认的tab控件的标签页和文字颜色都是无法修改的。有时候我们会要用到竖排列的标签页，或者想要更改标签页的背景颜色和字体时，自带的TabControl就满足不了我们的需求了，这里简单写下TabControl控件的自定义绘制。

 

---

二、效果展示

追求界面美观的话可以美工做好图后，给每个标签添加图片，下面有加载图片的代码示例，这里只是示范自定义标签页和竖排列。

 

---

三、代码

第一步：在tabControl属性页中修改【drawMode】属性为OwnerDrawFixed

第二步：给tabControl添加【DrawItem】事件

// tabcontrol设置为可以自定义绘制标签内容
this.tabControl.DrawItem += new System.Windows.Forms.DrawItemEventHandler(this.event_tabControl_DrawItem);

第三步：重绘，实现tabcontrol控件的DrawItem事件，如下所示 

private void event_tabControl_DrawItem(object sender, DrawItemEventArgs e)
        {
            TabPage changedpage = tabControl.TabPages[e.Index];//当前处理标签
            Rectangle backrect = tabControl.GetTabRect(e.Index);//标签背景区域
            Brush backbrush;//标签背景色
            Brush fontbrush;//标签字体颜色
            Font tabFont;//标签字体
            //Pen borderpen;//边框颜色

            Brush backtabcontrol = new SolidBrush(Color.FromArgb(255, 43, 87, 154));
            e.Graphics.FillRectangle(backtabcontrol, this.tabControl.ClientRectangle.X, this.tabControl.ClientRectangle.Y, this.tabControl.ClientRectangle.Size.Width, this.tabControl.ClientRectangle.Height);
            backtabcontrol.Dispose();
            tabControlBG = false;

            if (e.State == DrawItemState.Selected)
            {
                backbrush = new SolidBrush(Color.FromArgb(255, 51, 102, 255));
                fontbrush = new SolidBrush(Color.White);
                tabFont = new Font("微软雅黑", 13, FontStyle.Bold, GraphicsUnit.Pixel);
                //borderpen = new Pen(Color.FromArgb(255, 51, 102, 255));
            }
            else
            {
                backbrush = new SolidBrush(Color.FromArgb(255, 43, 87, 154));
                fontbrush = new SolidBrush(Color.White);
                tabFont = new Font("微软雅黑", 13, FontStyle.Bold, GraphicsUnit.Pixel);
                //borderpen = new Pen(Color.FromArgb(255, 43, 87, 154));
            }
            //绘制标签背景
            e.Graphics.FillRectangle(backbrush, backrect);

            //绘制标签字体
            StringFormat _StringFlags = new StringFormat(StringFormatFlags.DirectionRightToLeft);
            _StringFlags.Alignment = StringAlignment.Center;
            _StringFlags.LineAlignment = StringAlignment.Center;
            e.Graphics.DrawString(tabControl.Controls[e.Index].Text, tabFont, fontbrush, backrect, _StringFlags);
            //绘制非标签原始名称【可依据e.State修改】 g.DrawString("呵呵", tabFont, fontbrush, backrect, new StringFormat(_StringFlags));

            //绘制标签边框
            //backrect.Offset(1, 1);
            //backrect.Inflate(2, 2);
            //e.Graphics.DrawRectangle(borderpen, backrect);

            backbrush.Dispose();
            tabFont.Dispose();
            fontbrush.Dispose();
            //borderpen.Dispose();

            // 背景添加图片
            //Bitmap b0 = new Bitmap(@"haha.png");
            //e.Graphics.DrawImage(b0, e.Bounds);
        }

 

---

四、隐藏选项卡标签

有时候我们想要不显示TabControl的选项卡，可以这样把选项卡标签隐藏掉。

给窗口添加load事件：

this.Load += new EventHandler(event_this_load);

在窗体Load事件中实现隐藏选项卡标签：

private void event_this_load(object sender, EventArgs e)
{
    // 隐藏websocket配置页面中tabcontrol的选项卡标签
    this.tabControl = new Region(new RectangleF(this.tabPage1.Left, this.tabPage1.Top, this.tabPage1.Width, this.tabPage1.Height));
}

以上代码完成标签的隐藏，但还存在一个问题，就是Tab + Ctrl 可以切换TabControl中的页，可以通过捕捉按键消息屏蔽 组合键：

protected override bool ProcessCmdKey(ref Message msg, Keys keyData)
{
    switch (keyData)
    {
        case (Keys.Tab | Keys.Control):
            return true;
        default:
            break;
    }
    return base.ProcessCmdKey(ref msg, keyData);
}

这个依旧存在BUG，用Tab键，把焦点能放在选项卡上，然后用左右键控制。

如果加上屏蔽TAB键，和左右键，都可能导致一些用户操作上的BUG。