How do I get a TabControl to use the full width of its parent?

Question

The standard System.Windows.Forms.TabControl component draws a border around the TabPages it contains. If you set its Dock to Fill, these borders run up to the edge of the parent control, but they're still there, taking up screen space.

In Visual Studio, if you dock two windows in the same place, you get a TabControl-like set of tabs along the bottom, but no borders along the sides.

Is it possible to get a TabControl to display its TabPages in this manner, with no wasted screen space at the sides? If possible, I'd like to avoid solutions that involve painting the control myself.

Answer 1

1. Remove the height and width attributes from TabControl
2. Set horizontal and vertical alignment to stretch

eg won't stretch;

<TabControl Height="373" Width="609" HorizontalAlignment="Stretch" Name="tabControl1" VerticalAlignment="Stretch"  VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch">

eg will stretch;

<TabControl HorizontalAlignment="Stretch" Name="tabControl1" VerticalAlignment="Stretch"  VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch">

Answer 2

Instead of using the Dock property you should try using the Anchor to anchor each of the four sides. Then you need to position the TabControl so it is positioned a couple of pixels bigger on all sides that the parent. That way the borders are hidden because they cannot be drawn when behind the parent control.

Answer 3

Using the standard .NET tab control, this isn't directly possible. What is the ultimate goal for this? Are you trying to simulate the same type of tabbed-MDI style display as Visual Studio? If that's the case, there are several third-party solutions available - some open source and some commercial.

The other responses about using the Anchor property in combination with setting the size so it is just a bit larger than the actual window might work, but I think it might look a bit odd visually. It should work regardless of the theme and accessibility settings, but you may end up having to programmatically set the size to be a few pixels larger than the parent.

Answer 4

<Grid>
   <TabControl Name="tabControl1" >
       <TabItem Header="tabItem1" Name="tabItem1">
          <Grid />
       </TabItem>
       <TabItem Header="tabItem2" Name="tabItem2">
          <Grid />
       </TabItem>
       <TabItem Header="tabItem3" Name="tabItem3">
          <Grid />
       </TabItem>
  </TabControl>
</Grid>

Answer 5

Is it possible to get a TabControl to display its TabPages in this manner, with no wasted screen space at the sides? If possible, I'd like to avoid solutions that involve painting the control myself.

If I understand your question correctly, and reading through the currently accepted answer , you want to know how to make the Tabs for a TabControl stretch across the whole Control with no wasted space like below:

To do this, set cTabControl.Dock = Fill , then make the following function and call it in Form1_Shown() and Form1_Resize() , or whatever "Resize()" functions you've created.

C#

void ResizeTabs()
{
    int numTabs = cTabControl.TabCount;

    float totLen = 0;
    using(Graphics g = CreateGraphics())
    {
        // Get total length of the text of each Tab name
        for(int i = 0; i < numTabs; i++)
            totLen += g.MeasureString(cTabControl.TabPages[i].Text, cTabControl.Font).Width;
    }

    int newX = (int)((cTabControl.Width - totLen) / numTabs) / 2;
    cTabControl.Padding = new Point(newX, cTabControl.Padding.Y);
}

VB

Sub ResizeTabs()
    Dim numTabs As Integer = cTabControl.TabCount

    Dim totLen As Decimal = 0
    Using g As Graphics = CreateGraphics()
        ' Get total length of the text of each Tab name
        For i As Integer = 0 To numTabs - 1
            totLen += g.MeasureString(cTabControl.TabPages(i).Text, cTabControl.Font).Width
        Next
    End Using

    Dim newX As Integer = ((cTabControl.Width - totLen) / numTabs) / 2
    cTabControl.Padding = New Point(newX, cTabControl.Padding.Y)
End Sub

Answer 6

I solved the same problem by adding spaces to the tabs title:

var pageAlignment = 50;

TabPage1.Text = TabPage1.Text.PadLeft(pageAlignment / 2).PadRight(pageAlignment); TabPage2.Text = TabPage2.Text.PadLeft(pageAlignment / 2).PadRight(pageAlignment); TabPage3.Text = TabPage3.Text.PadLeft(pageAlignment / 2).PadRight(pageAlignment);

Answer 7

Anchor the left and right sides of the control with the width set to the width of the parent control.

childControl.Anchor = Anchor.Left|Anchor.Right; childControl.Width = parentControl.Width;

Answer 8

Do not Dock the TabControl. Stretch it out on the designer so its left and right edges extend beyond the window.