15.11 TabControl Control

The TabControl creates tabbed windows, such as those in Visual Studio (Fig. 15.32). This enables you to specify more information in the same space on a Form and group displayed data logically. TabControls contain TabPage objects, which are similar to Panels and GroupBoxes in that TabPages also can contain controls. You first add controls to the Tab-Page 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.TabPages.Add(myTabPage);

Fig. 15.32 Tabbed windows in Visual Studio.

The preceding statements call method Add of the Controls collection and method Add of the TabPages collection. The example adds TabControl myControl to TabPage myTab-Page, 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 15.33 depicts a sample TabControl.

You can add TabControls visually by dragging and dropping them onto a Form in Design mode. To add TabPages in Design mode, click the top of the TabControl, open its smart tasks menu and select Add Tab (Fig. 15.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. Clicking the tabs selects the TabControl—to 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).

Fig. 15.33 TabControl with TabPages example.

Fig. 15.34 TabPages added to a TabControl.

Common properties and a common event of TabControls are described in Fig. 15.35. 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.

Fig. 15.35 TabControl properties and an event.

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 Returns the collection of TabPages within the TabControl as a TabControl.TabPageCollection.
Common Event
SelectedIndexChanged Generated when SelectedIndex changes (i.e., another TabPage is selected).

Class UsingTabsForm (Fig. 15.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.

Fig. 15.36 Using TabControl to display various font settings.

Alternate View 

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

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 Tab-Page is displayed in Fig. 15.36(a). The CheckedChanged event handler for each RadioButton updates the color of the text in displayLabel (lines 22, 29 and 36).

  • The sizeTabPage (Fig. 15.36(b)) has three RadioButtons, corresponding to font sizes 12 (size12RadioButton), 16 (size16RadioButton) and 20 (size20-RadioButton), which change the font size of displayLabel —lines 44, 52 and 60, respectively.

  • The messageTabPage (Fig. 15.36(c)) contains two RadioButtons for the messages Hello! (helloRadioButton) and Goodbye! (goodbyeRadioButton). The two RadioButtons determine the text on displayLabel (lines 67 and 74, respectively).

  • The aboutTabPage (Fig. 15.36(d)) contains a Label (messageLabel) describing the purpose of TabControls.

Software Engineering Observation 15.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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset