TabControl and borders visual glitch

Otiel picture Otiel · Oct 14, 2011 · Viewed 8.3k times · Source

I have these visual glitches on every tabControls when I am changing its tabPages BackColor and the BackColor of the form, as illustrated on the following images:

  • At the top of the tabPage, there is an interior one-pixel white border.
  • At the left of the tabPage, there is an interior three-pixels white border.
  • At the bottom of the tabPage, there is an interior one-pixel white border and an exterior two-pixels white border.
  • At the right of the tabPage, there is an interior one-pixel white border and an exterior two-pixels white border.

Top and left borders Bottom borders Top and right borders

Is there a way I can get rid of those white borders?

Answer

LarsTech picture LarsTech · Oct 16, 2011

Here's my attempted hack. I used a NativeWindow to draw over the TabControl to fill in those "white" spaces. I won't claim it's perfect:

public class TabPadding : NativeWindow {
  private const int WM_PAINT = 0xF;

  private TabControl tabControl;

  public TabPadding(TabControl tc) {
    tabControl = tc;
    tabControl.Selected += new TabControlEventHandler(tabControl_Selected);
    AssignHandle(tc.Handle);
  }

  void tabControl_Selected(object sender, TabControlEventArgs e) {
    tabControl.Invalidate();
  }

  protected override void WndProc(ref Message m) {
    base.WndProc(ref m);

    if (m.Msg == WM_PAINT) {
      using (Graphics g = Graphics.FromHwnd(m.HWnd)) {

        //Replace the outside white borders:
        if (tabControl.Parent != null) {
          g.SetClip(new Rectangle(0, 0, tabControl.Width - 2, tabControl.Height - 1), CombineMode.Exclude);
          using (SolidBrush sb = new SolidBrush(tabControl.Parent.BackColor))
          g.FillRectangle(sb, new Rectangle(0, 
                                            tabControl.ItemSize.Height + 2,
                                            tabControl.Width,
                                            tabControl.Height - (tabControl.ItemSize.Height + 2)));
        }

        //Replace the inside white borders:
        if (tabControl.SelectedTab != null) {
          g.ResetClip();
          Rectangle r = tabControl.SelectedTab.Bounds;
          g.SetClip(r, CombineMode.Exclude);
          using (SolidBrush sb = new SolidBrush(tabControl.SelectedTab.BackColor))
            g.FillRectangle(sb, new Rectangle(r.Left - 3,
                                              r.Top - 1,
                                              r.Width + 4,
                                              r.Height + 3));
        }
      }
    }
  }
}

And to hook it up:

public Form1() {
  InitializeComponent();
  var tab = new TabPadding(tabControl1);
}

My end result:

enter image description here