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

本文关键字：创建 自定义 选项 Graphics DrawImage 使用 | 更新日期: 2023-09-27 18:26:20

我有一个项目，您可以在其中添加和删除选项卡（就像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制作自定义选项卡。

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

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

您的问题不是很清楚。也许你想在每个选项卡上显示不同的文本。你可以使用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);

并将其替换为CCD_ 7中的CCD_。

更新

因此，您希望在选项卡上显示自定义图像。我假设您已经将这些图像放置在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);

如果你想在文本之外显示图像，比如网络浏览器的收藏夹图标，你可以使用这个修改后的代码：

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的文本决定了选项卡的宽度；要使其更高，您需要选择更大的字体大小。

相关文章：