George Shepherd's Windows Forms FAQ
Questions and answers in this FAQ have been collected from newsgroup posts, various mailing lists and the employees of Syncfusion.

25. Windows Forms TabControl

WinForms FAQ Home
   25.1 How do color the tabs on my TabControl?
   25.2 How can I drag and drop TabPages between TabControls?
   25.3 For a TabControl, how do I make the tabs on the tab pages appear on the bottom instead of on the right?
   25.4 How do I use code to insert or delete tabpages in a TabControl?
   25.5 How do I dynamically hide/unhide tabs in a TabControl?
   25.6 How do I prevent the user from changing the selected tab page?
   25.7 Why do the order of the tabs keep changing when opening and closing the Form?
   25.8 How do I force the focus to be on a text box in a tab page when the application gets loaded?
   25.9 How do I programatically select a Tab Page?



25.1 How do color the tabs on my TabControl?


Ken Tucker offers this solution. Set the TabControl's DrawMode to OwnerDraw, and then handle the DrawItem event to draw things yourself. Here are both VB and C# sample projects that display a gradient tab for the active tabpage.


25.2 How can I drag and drop TabPages between TabControls?


The following code snippet shows how you can drag a TabPage from TabControl1 and drop it into TabControl2 (whose AllowDrop property must be set to True): $$ [C#] Source TabControl private void tabControl1_MouseMove(object sender, System.Windows.Forms.MouseEventArgs e) { if (e.Button == MouseButtons.Left) { this.tabControl1.DoDragDrop(this.tabControl1.SelectedTab,DragDropEffects.All); } } //Target TabControl private void tabControl2_DragEnter(object sender, System.Windows.Forms.DragEventArgs e) { if(e.Data.GetDataPresent(typeof(TabPage))) { e.Effect = DragDropEffects.Move; } else e.Effect = DragDropEffects.None; } private void tabControl2_DragDrop(object sender, System.Windows.Forms.DragEventArgs e) { TabPage DropTab = (TabPage)(e.Data.GetData (typeof(TabPage))); this.tabControl2.TabPages.Add (DropTab); } [VB.NET] 'Source TabControl Private Sub tabControl1_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) If e.Button = MouseButtons.Left Then Me.tabControl1.DoDragDrop(Me.tabControl1.SelectedTab,DragDropEffects.All) End If End Sub 'Target TabControl Private Sub tabControl2_DragEnter(ByVal sender As Object, ByVal e As System.Windows.Forms.DragEventArgs) If e.Data.GetDataPresent(Type.GetType(TabPage)) Then e.Effect = DragDropEffects.Move Else e.Effect = DragDropEffects.None End If End Sub Private Sub tabControl2_DragDrop(ByVal sender As Object, ByVal e As System.Windows.Forms.DragEventArgs) Dim DropTab As TabPage = CType((e.Data.GetData(Type.GetType(TabPage))), TabPage) Me.tabControl2.TabPages.Add (DropTab) End Sub $$


25.3 For a TabControl, how do I make the tabs on the tab pages appear on the bottom instead of on the right?


Set the TabControl.Alignment property to TabAlignment.Bottom.

     tabControl1.Alignment = TabAlignment.Bottom;

You can also change the tabs into buttons using the Appearance property and TabAppearance enums.


25.4 How do I use code to insert or delete tabpages in a TabControl?


To delete a tabpage, you use the tabControl1.Controls.Remove method. To add a new page as the last tab, use the tabControl1.Controls.Add method. Here is some sample code.

     //remove the selected tab
     tabControl1.Controls.Remove(tabControl1.SelectedTab);

     //add a new tabpage as the last tab
     tabControl1.Controls.Add(new TabPage("new Page"));

There does not appear to be support in the framework for inserting a tab at a particular position. A work around might be to save the current tabpage controls, clear the Controls collection, and then add the saved controls back to the Controls collection inserting a new tab. Here is some code that does this.

     private void InsertTab(int tabNumber, ref TabControl tabControl)
     {
          int limit = tabControl.Controls.Count;
          if(tabNumber < 0 || tabNumber > limit)
          {
               tabControl.Controls.Add(new TabPage("new Page"));
               return;
          }
          
          int target = tabControl.SelectedIndex;
               
          //save the existing pages & clear the controls
          Control [] c = new Control[limit];
          tabControl.Controls.CopyTo(c, 0);
          tabControl.Controls.Clear();

          //add the earlier pages
          for (int i = 0; i < target; ++i)
               tabControl.Controls.Add(c[i]);
          //insert the page
          tabControl.Controls.Add(new TabPage("new Page"));
               
          //add the later pages
          for (int i = target; i < limit; ++i)
               tabControl.Controls.Add(c[i]);

          //select the new page
          tabControl.SelectedIndex = target;
     }


25.5 How do I dynamically hide/unhide tabs in a TabControl?


You can dynamically remove and inseret TabPages into the TabControl.TabPages collection to hide and show tabs at runtime.

TabPage tabPageSave = null;
private void button1_Click(object sender, EventArgs e)
{
//hide a tab by removing it from the TabPages collection
this.tabPageSave = tabControl1.SelectedTab;
this.tabControl1.TabPages.Remove(this.tabPageSave);
}

private void button2_Click(object sender, EventArgs e)
{
//show a tab by adding it to the TabPages collection
if (this.tabPageSave != null)
{
int loc = tabControl1.SelectedIndex;
this.tabControl1.TabPages.Insert(loc, this.tabPageSave);
}
}


25.6 How do I prevent the user from changing the selected tab page?


You can use the TabPage's Validating event to prevent a new tab page selection. Here are the steps:

1) Every time the user selects a new tab, make sure that the corresponding tab page gets the focus. You can do so as follows:


// In C#
private void tabControl1_SelectedIndexChanged(object sender,
System.EventArgs e)
{
     tabControl1.TabPages[tabControl1.SelectedIndex].Focus();
     tabControl1.TabPages[tabControl1.SelectedIndex].CausesValidation = true;
}



'VB.Net
Private Property sender,() As tabControl1_SelectedIndexChanged(object
End Property
Private Function e)() As System.EventArgs
     tabControl1.TabPages(tabControl1.SelectedIndex).Focus()
     tabControl1.TabPages(tabControl1.SelectedIndex).CausesValidation = True
End Function


Note that CausesValidation should be set to True since you will be listening to the Validating event in the next step. You will also have to add some code like above when the TabControl is shown the very first time (like in the Form_Load event handler).

2) Listen to the TabPage's Validating event (which will be called when the user clicks on a different tab page) and determine whether the user should be allowed to change the selected tab page.


// In C#
private void tabPage1_Validating(object sender,
System.ComponentModel.CancelEventArgs e)
{
     if(!checkValidated.Checked)
          e.Cancel = true;
}



' In VB.Net
Private Sub tabPage1_Validating(ByVal sender As Object, ByVal e As System.ComponentModel.CancelEventArgs)
     If Not checkValidated.Checked Then
          e.Cancel = True
     End If
End Sub



25.7 Why do the order of the tabs keep changing when opening and closing the Form?


This seems to be a known issue with the TabControl designer. The designer seems to automatically reorder the tabs while serializing changes made in the designer.

To work around this issue, in your constructor, after the call to InitializeComponent, you could remove all the tab pages and add them back in the desired order.


25.8 How do I force the focus to be on a text box in a tab page when the application gets loaded?


Listen to the Form's Activate event and set focus on the text box (using the Focus method). The common mistake is to try to set Focus in the Form_Load event. This is not possible because no Controls are visible at this time and hence focus cannot be set at this time.


25.9 How do I programatically select a Tab Page?


There are a couple of ways you could do select a tab page programmatically:

[C#]
//Select the second Tab Page
this.tabControl.SelectedTab = this.tabPage2
or
//Select Second Tab
this.tabControl.SelectedIndex= 1;


[VB.NET]
'Select the second Tab Page
Me.tabControl.SelectedTab = Me.tabPage2
or
'Select Second Tab
Me.tabControl.SelectedIndex= 1


© 2001-2010 Copyright Syncfusion Inc. All rights reserved.  |  Privacy Policy  |  Contact  |  Sitemap