C#选项卡控件左水平对齐图片

Question

I have followed the instructions in the msdn website: https://msdn.microsoft.com/en-us/library/vstudio/ms404305%28v=vs.100%29.aspx to display a tab control as the following picture:

And this is the code:

private void tcMain_DrawItem(Object sender, DrawItemEventArgs e)
{
    Graphics g = e.Graphics;
    Brush _textBrush;

    TabPage _tabPage = tcMain.TabPages[e.Index];
    Rectangle _tabBounds = tcMain.GetTabRect(e.Index);

    if (e.State == DrawItemState.Selected)
    {
        _textBrush = new SolidBrush(Color.Red);
        g.FillRectangle(Brushes.Gray, e.Bounds);
    }
    else
    {
        _textBrush = new System.Drawing.SolidBrush(e.ForeColor);
        e.DrawBackground();
    }

    Font _tabFont = new Font("Times New Roman", (float)22, FontStyle.Regular, GraphicsUnit.Pixel);

    StringFormat _stringFlags = new StringFormat();
    _stringFlags.Alignment = StringAlignment.Near;
    _stringFlags.LineAlignment = StringAlignment.Center;
    g.DrawString(_tabPage.Text, _tabFont, _textBrush, _tabBounds, new StringFormat(_stringFlags));
}

Now I want to add a picture to the left of the tab control buttons? I mean, how to show a picture to the left of the word Book for example?

After trying some answers from below I ended up with the code:

private void tcMain_DrawItem(Object sender, DrawItemEventArgs e)
    {
        Graphics g = e.Graphics;
        Brush _textBrush;

        TabPage _tabPage = tcMain.TabPages[e.Index];
        Rectangle _tabBounds = tcMain.GetTabRect(e.Index);

        if (e.State == DrawItemState.Selected)
        {
            _textBrush = new SolidBrush(Color.Red);
            g.FillRectangle(Brushes.Gray, e.Bounds);
        }
        else
        {
            _textBrush = new System.Drawing.SolidBrush(e.ForeColor);
            e.DrawBackground();
        }

        tcMain.ImageList = imgList;
        tcMain.TabPages[0].ImageIndex = 1;
        tcMain.TabPages[1].ImageIndex = 0;
        tcMain.TabPages[2].ImageIndex = 3;
        tcMain.TabPages[3].ImageIndex = 2;

        Rectangle tabImage = tcMain.GetTabRect(e.Index);
        tabImage.Size = new Size(40, 40);

        g.DrawImage(tcMain.ImageList.Images[_tabPage.ImageIndex], tabImage);

        Font _tabFont = new Font("Times New Roman", (float)22, FontStyle.Regular, GraphicsUnit.Pixel);

        StringFormat _stringFlags = new StringFormat();
        _stringFlags.Alignment = StringAlignment.Center;
        _stringFlags.LineAlignment = StringAlignment.Center;
        g.DrawString(_tabPage.Text, _tabFont, _textBrush, _tabBounds, new StringFormat(_stringFlags));
    }

Then when I take a snapshot to the results it comes like this:

Refreshing all the time

Answer 1

You could add an ImageList control to your project and add some images to it and set the ImageIndex property of your TabPages . Then just use DrawImage() method in your DrawItem event.

Rectangle tabImage = tcMain.GetTabRect(e.Index);
tabImage.Size = new Size(16, 16);

g.DrawImage(tcMain.ImageList.Images[_tabPage.ImageIndex], tabImage);

You could also use ImageKey instead of ImageIndex .

g.DrawImage(tcMain.ImageList.Images[_tabPage.ImageKey], tabImage);

If you add the ImageList and the ImageIndex programmatically take a look:

ImageList imageList = new ImageList();
imageList.Images.Add("key1", Image.FromFile("pathtofile"));
imageList.Images.Add("key2", Image.FromFile("pathtofile"));

tcMain.ImageList = imageList;
tcMain.TabPages[0].ImageIndex = 1;
tcMain.TabPages[1].ImageIndex = 0;