如何在自绘TabControl中添加图标并解决标签页无法正常扩展的问题

问题原因 #

你遇到的标签页无法正常扩展问题由以下几个原因导致：

• 你当前设置的TabDrawMode.OwnerDrawFixed是固定标签宽度模式，所有标签会统一使用默认宽度，无法随文本、图标内容自动调整尺寸
• 没有实现MeasureItem事件，自定义绘制模式下需要手动测量每个标签的实际占用尺寸
• 绘制文本的区域未扣除左侧图标和右侧关闭按钮的宽度，会导致文本与按钮重叠，也会干扰宽度计算

实际异常效果：

修复步骤 #

1. 调整构造函数配置 #

将DrawMode改为OwnerDrawVariable，同时注册MeasureItem事件：

public Form1()
{
    InitializeComponent();
    this.tabControl1.TabPages[this.tabControl1.TabCount - 1].Text = "";
    this.tabControl1.Padding = new Point(12, 4);
    // 改为可变尺寸的自定义绘制模式
    this.tabControl1.DrawMode = TabDrawMode.OwnerDrawVariable;

    this.tabControl1.DrawItem += tabControl1_DrawItem;
    // 新增测量项事件注册
    this.tabControl1.MeasureItem += tabControl1_MeasureItem;
    this.tabControl1.MouseDown += tabControl1_MouseDown;
    this.tabControl1.Selecting += tabControl1_Selecting;
    this.tabControl1.HandleCreated += tabControl1_HandleCreated;
}

2. 实现MeasureItem事件，计算每个标签的合适尺寸 #

private void tabControl1_MeasureItem(object sender, MeasureItemEventArgs e)
{
    TabControl tabControl = sender as TabControl;
    TabPage tabPage = tabControl.TabPages[e.Index];
    // 最后一个是加号按钮，固定尺寸
    if (e.Index == tabControl.TabCount - 1)
    {
        var addImage = Properties.Resources.Add;
        // 加上左右边距
        e.ItemWidth = addImage.Width + 8;
        e.ItemHeight = addImage.Height + 8;
        return;
    }
    // 普通标签计算尺寸：图标宽度 + 文本宽度 + 关闭按钮宽度 + 边距
    var icon = Properties.Resources.apple_icon;
    var closeImage = Properties.Resources.Close;
    // 测量文本宽度
    Size textSize = TextRenderer.MeasureText(tabPage.Text, tabPage.Font);
    // 总宽度：图标宽 + 文本宽 + 关闭按钮宽 + 各元素间隙
    e.ItemWidth = icon.Width + textSize.Width + closeImage.Width + 16;
    // 高度取最高元素的高度加边距
    e.ItemHeight = Math.Max(Math.Max(icon.Height, textSize.Height), closeImage.Height) + 8;
}

3. 修正DrawItem中的文本绘制区域宽度 #

原来的文本区域直接用了tabRect的全宽，会和右侧关闭按钮重叠，需要扣除图标和关闭按钮的宽度：

private void tabControl1_DrawItem(object sender, DrawItemEventArgs e)
{
    var tabPage = this.tabControl1.TabPages[e.Index];
    var tabRect = this.tabControl1.GetTabRect(e.Index);
    tabRect.Inflate(-2, -2);
    if (e.Index == this.tabControl1.TabCount - 1)
    {
        var addImage = Properties.Resources.Add;
        e.Graphics.DrawImage(addImage,
            tabRect.Left + (tabRect.Width - addImage.Width) / 2,
            tabRect.Top + (tabRect.Height - addImage.Height) / 2);
    }
    else
    {
        var icon = Properties.Resources.apple_icon;
        e.Graphics.DrawImage(icon, tabRect.X, tabRect.Y);

        var closeImage = Properties.Resources.Close;
        e.Graphics.DrawImage(closeImage,
            (tabRect.Right - closeImage.Width),
            tabRect.Top + (tabRect.Height - closeImage.Height) / 2);
        // 修正文本区域宽度：扣除左侧图标宽度和右侧关闭按钮宽度，避免重叠
        var rect = new Rectangle(tabRect.X + icon.Width + 4,
                  tabRect.Y,
                  tabRect.Width - icon.Width - closeImage.Width - 8,
                  tabRect.Height);
        TextRenderer.DrawText(e.Graphics, tabPage.Text, tabPage.Font,
            rect, tabPage.ForeColor, TextFormatFlags.Left | TextFormatFlags.EndEllipsis);
    }
}

修改完成后标签就会根据内容自动调整宽度，不会出现截断或者无法扩展的问题，文本也不会和关闭按钮重叠。

内容的提问来源于stack exchange，提问作者Neto Dll