TabControl

Microsoft .NET Framework, ASP.NET, Visual C# (CSharp, C Sharp, C-Sharp) Developer Training, Visual Studio

Exam Prep. Guides

70-505 Study Guide 70-526 Study Guide

1. Forms Controls Add/configure a Form Manage control layout Group/Arrange Controls Panel GroupBox TabControl FlowLayoutPanel TableLayoutPanel SplitContainer Add/configure a control Create/configure menus Create event handlers 2. Integrating Data 3. Printing/Reporting 4. Enhancing Usability 5. Asynchronous Prog. 6. Forms Controls 7. Configure/Deploy

edit

Exam 70-526 Preparation Guide: Group and arrange controls by using the TabControl control.

Contents 1 Inheritance hierarchy 2 Useful properties 3 Useful methods 4 Adding and Deleting Tabs 5 Editing the TabPages Collection 6 Adding a TabPage manually 7 Disabling Tab Pages 8 Hiding Tab Pages 9 Render Right-Aligned or Left-Aligned Tabs horizontally 10 MSDN references

The TabControl control is a container control that allows you to display multiple dialogs on a single form by switching between the tabs. This is analogous to using dividers in a notebook.

Each tab acts in a similar manner to a Panel control and is its own type of object called a TabPage. These tabs are located in the collection stored in the TabPages property of the TabControl.

Inheritance hierarchy

System.Object 
  System.MarshalByRefObject 
    System.ComponentModel.Component 
      System.Windows.Forms.Control 
        System.Windows.Forms.TabControl

Useful properties

• Alignment - Determines the location of the tabs within the control. This property takes a value from the TabAlignment enumeration, the default value is Top:
  • Bottom - The tabs are located across the bottom of the control.
  • Left - The tabs are located along the left edge of the control.
  • Right - The tabs are located along the right edge of the control.
  • Top - The tabs are located across the top of the control.

• Appearance - Determines the visual style of the Tabs. This can be one of three values; Normal, Buttons or FlatButtons.

• DrawMode - Determines the way that the control's tabs are drawn.

• HotTrack - Determines whether the control's tabs change in appearance when the mouse passes over them. The color that the tab changes to when the mouse is over it is determined by the local computer's system colors.

• ImageList - An ImageList that specifies the images to display on the tabs.

• ItemSize - A Size that represents the size of the tabs. The default automatically sizes the tabs to fit the icons and labels on the tabs. To change the Width property of the ItemSize property, the SizeMode property must be set to Fixed.

• Multiline - Determines whether more than one row of tabs can be displayed.

• Padding - Specifies the amount of space around each tab caption.

• RowCount - The number of rows that are currently being displayed in the tab strip.

• SelectedIndex - The zero-based index of the currently selected tab page. The default is -1, which is also the value if no tab page is selected.

• SelectedTab - A TabPage that represents the selected tab page. If no tab page is selected, the value is a null reference.

• ShowToolTips - Determines whether a tab's ToolTip is shown when the mouse passes over the tab.

• SizeMode - Determines the way that the control's tabs are sized. This property takes a value from the TabSizeMode enumeration, the default value is Normal:
  • FillToRight - The width of each tab is sized so that each row of tabs fills the entire width of the container control. This is only applicable to tab controls with more than one row.
  • Fixed - All tabs in a control are the same width.
  • Normal - The width of each tab is sized to accommodate what is displayed on the tab, and the size of tabs in a row are not adjusted to fill the entire width of the container control.

• TabCount - The number of tabs in the tab strip.

• TabPages - A collection that contains the TabPage objects.

Useful methods

• SelectTab - Use this method to programmatically select a particular tab in a TabControl. The method takes one of three argument types. An Int32 (specified index), a String (specified name) or a TabPage (specified TabPage).

• DeselectTab - Use this method to programmatically deselect a particular tab in a TabControl. The method takes one of three argument types. An Int32 (specified index), a String (specified name) or a TabPage (specified TabPage). If there are at least two tabs in the control, the tab following the specified tab becomes the current tab. If the specified tab is the last tab in the control, the first tab becomes the current tab.

Adding and Deleting Tabs

Tabs can be added or deleted by selecting the TabControl and clicking on the Smart Tag icon . This causes a small menu to appear, simply click on either of the menu options accordingly.

Editing the TabPages Collection

The TabPages collection can be edited using the TabPage Collection Editor.

This editor gives access to the propertes of the individual TabPage objects.

Adding a TabPage manually

The following code sample shows very simply how to add a TabControl with two TabPage objects.

private void AddTabControl()
{
  TabControl tabControl1 = new TabControl();
  TabPage tabPageUser = new TabPage("User Details");
  TabPage tabPageAccount = new TabPage("Account Details");
 
  tabControl1.TabPages.Add(tabPageUser);
  tabControl1.TabPages.Add(tabPageAccount);
 
  tabControl1.Location = new Point(20, 20);
 
  this.Controls.Add(tabControl1);
}

Disabling Tab Pages

A TabPage does not have an Enabled property that does anything meaningful. Therefore in order to disable a TabPage, the SelectedIndexChanged event must be handled. The easiest option for handling his event is to assign the SelectedTab property of the TabControl to another TabPage.

private void tabControl1_SelectedIndexChanged(object sender, EventArgs e)
{
  if( tabControl1.SelectedTab == tabPage2 )
    tabControl1.SelectedTab = tabPage1;
}

Hiding Tab Pages

A TabPage does not have a Visible property that does anything meaningful. Therefore in order to hide/show a TabPage, the TabPage must be removed:

tabControl2.TabPages.Remove(tabPage4);

or added accordingly:

tabControl2.TabPages.Add(tabPage4);

Render Right-Aligned or Left-Aligned Tabs horizontally

When you set the Alignment property to either Left or Right, the tabs appear vertically. By drawing the tabs yourself, you can have horizontal text tabs. To achieve this follow these simple steps.

1. Set the following properties of the TabControl:
   
   

   Property	Value
   Alignment	Right
   SizeMode	Fixed
   DrawMode	OwnerDrawFixed

   Set the ItemSize.Width property to 25 and the ItemSize.Height property to 100. Your TabControl should now look something like this.

   


2. Add an event handler for the DrawItem event and add the following code.

   private void tabControl1_DrawItem(object sender, DrawItemEventArgs e)
   {
     Graphics g = e.Graphics;
     Brush _TextBrush;
    
     // Get the item from the collection.
     TabPage _TabPage = tabControl1.TabPages[e.Index];
    
     // Get the real bounds for the tab rectangle.
     Rectangle _TabBounds = tabControl1.GetTabRect(e.Index);
    
     if(e.State == DrawItemState.Selected)
     {
       // Draw a different background color, and don't paint a focus rectangle.
       _TextBrush = new SolidBrush(Color.Red);
       g.FillRectangle(Brushes.Gray, e.Bounds);
     }
     else
     {
       _TextBrush = new System.Drawing.SolidBrush(e.ForeColor);
       e.DrawBackground();
     }
    
     // Use our own font. Because we CAN.
     Font _TabFont = new Font("Arial", 10, FontStyle.Bold, GraphicsUnit.Pixel);
    
     // Draw string. Center the text.
     StringFormat _StringFlags = new StringFormat();
     _StringFlags.Alignment = StringAlignment.Center;
     _StringFlags.LineAlignment = StringAlignment.Center;
     g.DrawString(_TabPage.Text, _TabFont, _TextBrush, 
                  _TabBounds, new StringFormat(_StringFlags));
   }

When the form runs, horizontal text is in the tabs.

MSDN references

• TabControl control

• TabControl Control (Windows Forms)