TabControl Control

The TabControl control creates tabbed windows, such as the ones we have seen in Visual Studio (Fig. 14.32). This allows you to specify more information in the same space on a Form.

Figure 14.32. Tabbed windows in Visual Studio.

(This item is displayed on page 691 in the print version)

TabControls contain TabPage objects, which are similar to Panels and GroupBoxes in that TabPages also can contain controls. You first add controls to the TabPage objects, then add the TabPages to the TabControl. Only one TabPage is displayed at a time. To add objects to the TabPage and the TabControl, write

myTabPage.Controls.Add(myControl)
myTabControl.Controls.Add(myTabPage)

These statements call method Add of the Controls collection. The example adds TabControl myControl to TabPage myTabPage, then adds myTabPage to myTabControl. Alternatively, we can use method AddRange to add an array of TabPages or controls to a TabControl or TabPage, respectively. Figure 14.33 depicts a sample TabControl.

Figure 14.33. TabControl with TabPages example.

(This item is displayed on page 691 in the print version)

You can add TabControls visually by dragging and dropping them onto a Form in Design mode. To add TabPages in Design mode, right click the TabControl and select Add Tab (Fig. 14.34). Alternatively, click the TabPages property in the Properties window, and add tabs in the dialog that appears. To change a tab label, set the Text property of the TabPage. Note that clicking the tabs selects the TabControlto select the TabPage, click the control area underneath the tabs. You can add controls to the TabPage by dragging and dropping items from the ToolBox. To view different TabPages, click the appropriate tab (in either design or run mode). Common properties and a common event of TabControls are described in Fig. 14.35.

Figure 14.34. TabPages added to a TabControl.

(This item is displayed on page 692 in the print version)

Figure 14.35. TabControl properties and an event.

(This item is displayed on page 692 in the print version)

TabControl properties and an event	Description
Common Properties
ImageList	Specifies images to be displayed on tabs.
ItemSize	Specifies the tab size.
Multiline	Indicates whether multiple rows of tabs can be displayed.
SelectedIndex	Index of the selected TabPage.
SelectedTab	The selected TabPage.
TabCount	Returns the number of tab pages.
TabPages	Collection of TabPages within the TabControl.
Common Event
SelectedIndexChanged	Generated when SelectedIndex changes (i.e., another TabPage is selected).

Each TabPage generates a Click event when its tab is clicked. Event handlers for this event can be created by double clicking the body of the TabPage.

Class UsingTabsForm (Fig. 14.36) uses a TabControl to display various options relating to the text on a label (Color, Size and Message). The last TabPage displays an About message, which describes the use of TabControls.

Figure 14.36. TabControl used to display various font settings.

 1 // Fig. 14.36: UsingTabsForm.cs
 2 // Using TabControl to display various font settings.
 3 using System;
 4 using System.Drawing;

5 using System.Windows.Forms; 6 7 // Form uses Tabs and RadioButtons to display various font settings 8 public partial class UsingTabsForm : Form 9 { 10 // default constructor 11 public UsingTabsForm() 12 { 13 InitializeComponent(); 14 } // end constructor 15 16 // event handler for Black RadioButton 17 private void blackRadioButton_CheckedChanged( 18 object sender, EventArgs e ) 19 { 20 displayLabel.ForeColor = Color.Black; // change font color to black 21 } // end method blackRadioButton_CheckedChanged 22 23 // event handler for Red RadioButton 24 private void redRadioButton_CheckedChanged( 25 object sender, EventArgs e ) 26 { 27 displayLabel.ForeColor = Color.Red; // change font color to red 28 } // end method redRadioButton_CheckedChanged 29 30 // event handler for Green RadioButton 31 private void greenRadioButton_CheckedChanged( 32 object sender, EventArgs e ) 33 { 34 displayLabel.ForeColor = Color.Green; // change font color to green 35 } // end method greenRadioButton_CheckedChanged 36 37 // event handler for 12 point RadioButton 38 private void size12RadioButton_CheckedChanged( 39 object sender, EventArgs e ) 40 { 41 // change font size to 12 42 displayLabel.Font = new Font( displayLabel.Font.Name, 12 ); 43 } // end method size12RadioButton_CheckedChanged 44 45 // event handler for 16 point RadioButton 46 private void size16RadioButton_CheckedChanged( 47 object sender, EventArgs e ) 48 { 49 // change font size to 16 50 displayLabel.Font = new Font( displayLabel.Font.Name, 16 ); 51 } // end method size16RadioButton_CheckedChanged 52 53 // event handler for 20 point RadioButton 54 private void size20RadioButton_CheckedChanged( 55 object sender, EventArgs e ) 56 { 57 // change font size to 20 58 displayLabel.Font = new Font( displayLabel.Font.Name, 20 ); 59 } // end method size20RadioButton_CheckedChanged 60 61 // event handler for Hello! RadioButton 62 private void helloRadioButton_CheckedChanged( 63 object sender, EventArgs e ) 64 { 65 displayLabel.Text = "Hello!"; // change text to Hello! 66 } // end method helloRadioButton_CheckedChanged 67 68 // event handler for Goodbye! RadioButton 69 private void goodbyeRadioButton_CheckedChanged( 70 object sender, EventArgs e ) 71 { 72 displayLabel.Text = "Goodbye!"; // change text to Goodbye! 73 } // end method goodbyeRadioButton_CheckedChanged 74 } // end class UsingTabsForm

(a)

(b)

(c)

(d)

The textOptionsTabControl and the colorTabPage, sizeTabPage, messageTabPage and aboutTabPage are created in the designer (as described previously). The colorTabPage contains three RadioButtons for the colors black (blackRadioButton), red (redRadioButton) and green (greenRadioButton). This TabPage is displayed in Fig. 14.36(a). The CheckChanged event handler for each RadioButton updates the color of the text in displayLabel (lines 20, 27 and 34). The sizeTabPage (Fig. 14.36(b)) has three RadioButtons, corresponding to font sizes 12 (size12RadioButton), 16 (size16RadioButton) and 20 (size20RadioButton), which change the font size of displayLabellines 42, 50 and 58, respectively. The messageTabPage (Fig. 14.36(c)) contains two RadioButtons for the messages Hello! (helloRadioButton) and Goodbye! (goodbyeRadioButton). The two RadioButtons determine the text on displayLabel (lines 65 and 72, respectively). The aboutTabPage (Fig. 14.36(d)) contains a Label (messageLabel) describing the purpose of TabControls.

Software Engineering Observation 14 3

A TabPage can act as a container for a single logical group of RadioButtons, enforcing their mutual exclusivity. To place multiple RadioButton groups inside a single TabPage, you should group RadioButtons within Panels or GroupBoxes contained within the TabPage.