使用Graphics.DrawImage在C＃中创建自定义选项卡

Question

我有一个项目，您可以在其中添加和删除选项卡（例如Web浏览器）。 到目前为止，我有这个：

//Button to add a new tab page
    private void cb_addPage_Click(object sender, EventArgs e)
    {
        string title = "TabPage " + (tabControl1.TabCount + 1).ToString() + "   ";
        TabPage myTabPage = new TabPage(title);
        tabControl1.TabPages.Add(myTabPage);
        tabControl1.SelectedTab = myTabPage;
    }


//Form1_Load
    private void Form1_Load(object sender, EventArgs e)
    {
        tabControl1.DrawMode = TabDrawMode.OwnerDrawFixed;
        cb_addPage.Top = tabControl1.Top;
        cb_addPage.Left = tabControl1.Right - cb_addPage.Width;
        foreach (TabPage tp in tabControl1.TabPages) tp.Text += "   ";
    }

    Rectangle closeX = Rectangle.Empty;

//Sets background and places the X button on each tab
    private void tabControl1_DrawItem(object sender, DrawItemEventArgs e)
    {
        Size xSize = new Size(15, 15);
        TabPage tp = tabControl1.TabPages[e.Index];
        e.DrawBackground();
        using (SolidBrush brush = new SolidBrush(e.ForeColor))
            e.Graphics.DrawString(tp.Text + "   ", e.Font, brush,
                                  e.Bounds.X + 3, e.Bounds.Y + 4);

        if (e.State == DrawItemState.Selected)
        {
            closeX = new Rectangle(e.Bounds.Right - xSize.Width - 3, 
                           e.Bounds.Top + 5, xSize.Width, xSize.Height);
            e.Graphics.DrawImage(imageList1.Images[0], closeX, 
                         new Rectangle(0,0,16,16), GraphicsUnit.Pixel );
        }

    }

//Removes current tab (from X button)
    private void tabControl1_MouseClick(object sender, MouseEventArgs e)
    {
        if (closeX.Contains(e.Location))
            tabControl1.TabPages.Remove(tabControl1.SelectedTab);
    }

因此，所有这些操作就是让您添加带有按钮的标签，并且在每个单独的标签上都有一个X按钮来删除该标签。

我已经使用Graphics.DrawImage来显示自定义的X按钮（在imageList中）。 但是，我将如何使用Graphics.DrawImage制作自定义选项卡。

总而言之，我想要标签，但我希望它们是我制作的自定义图像，因此看起来更好。 - 谢谢

Answer 1

您的问题不是很清楚。 可能您想在每个选项卡上显示不同的文本。 您可以使用TextRenderer这样做：

const TextFormatFlags flags = TextFormatFlags.PreserveGraphicsClipping |
    TextFormatFlags.VerticalCenter;

TextRenderer.DrawText(e.Graphics, tp.Text, tp.Font, e.Bounds, tp.ForeColor, flags);

可以在文本前面添加一些空格，以便为X留出空间，或者为文本定义新的坐标

const int XCrossWidth = 20;
Rectangle textRect = new Rectangle(e.Bounds.Left + XCrossWidth,  e.Bounds.Top,
                                   e.Width - XCrossWidth, e.Height);

并将其替换为TextRenderer.DrawText(...) e.Bounds 。

---

更新

因此，您想在选项卡上显示自定义图像。 我假设您已将这些图像放置在imageList1 。 您怎么知道其中哪个显示在哪个TabPage上？

您可以创建自己的标签页类，并使用该类代替TabPage 。

public TabPageEx : TabPage
{
    public int ImageIndex { get; set }
}

现在，将该属性设置为适当的图像索引。

TabPageEx myTabPage = new TabPageEx(title);
myTabPage.ImageIndex = 3; // As an example.
tabControl1.TabPages.Add(myTabPage);

然后您可以使用

TabPageEx tp = (TabPageEx)tabControl1.TabPages[e.Index];

...

Rectangle imageRect = new Rectangle(e.Bounds.Left + 20,  0, 16, 16);
e.Graphics.DrawImage(imageList1.Images[tp.ImageIndex], imageRect);

Answer 2

如果要显示除Webbrowsers favicon之类的文本以外的图像，则可以使用以下修改的代码：

private void tabControl3_DrawItem(object sender, DrawItemEventArgs e)
{
    Size xSize = new Size(16,16);
    Point imgLoc = new Point(e.Bounds.X +  4, e.Bounds.Y + 4);
    TabPage tp = tabControl3.TabPages[e.Index];
    e.DrawBackground();
    e.Graphics.DrawImage(imageList1.Images[tp.ImageIndex], new Rectangle(imgLoc, xSize), 
                            new Rectangle(Point.Empty, xSize), GraphicsUnit.Pixel);

    using (SolidBrush brush = new SolidBrush(e.ForeColor))
    {
        e.Graphics.DrawString(tp.Text + "   ", e.Font, brush, 
                              e.Bounds.X + 23, e.Bounds.Y + 4);
        if (e.State == DrawItemState.Selected)
        {
            closeX = new Rectangle(e.Bounds.Right - xSize.Width - 3, 
                         e.Bounds.Top + 5, xSize.Width, xSize.Height);
            e.Graphics.DrawImage(imageList1.Images[0], closeX, 
                       new Rectangle(Point.Empty, xSize), GraphicsUnit.Pixel);

        }
    }
}

您需要确保：

• 您要在图像列表的每个选项卡中显示这些图像。
• 并且您知道ech一的索引。
• 创建页面时，Youi必须对其进行设置，但是以后可以随时对其进行更改。
• 最好在索引0处有一个默认图标，并为不知道正确索引的用户将imageindex设置为0。

通常，您还必须将Tab键的控件指向Imagelist。 但是，由于我们自己绘制了所有内容，因此这并不重要。

您可以使用更复杂的DrawString格式，该格式用于绘制关闭按钮。 在这里，您不只是使用点来确定绘制位置； 相反，此格式使用两个矩形来确定源和目标。 这有效地导致了将图像缩放到新尺寸的选择。

但是，如果您的图片具有正确的尺寸，那么您将获得最好的质量。 请注意，每个TabPage的文本确定选项卡的宽度。 为了使其更高，您需要选择更大的Fontsize。