Using the TabControl Control

Using the TabControl Control

The TabControl control is an ideal control for the small devices because it allows you to overlay multiple groups of controls. The TabControl stacks pages of control one on top of the other and then allows the user to switch between pages by clicking a pages tab.

Adding a TabControl control to your application can be done at design time using the Form Designer. First, drag a TabControl onto the application's form. Next , to add a TabPage to the TabControl , right-click the TabControl control and select the Add Tab menu option. This will add a TabPage to the TabControl . You can then use the Properties window to customize the TabPage .

Alternatively, you can use the TabPage Collection Editor to add TabPages . To bring up the TabPage , select the TabControl in the Form Designer. Then click the ellipsis next to the TabPages property name in the Properties window. Now the TabPage Collection Editor should be visible. Click the Add and Remove buttons to modify the TabPage s in the TabControl control.

A third way to add and remove a TabPage is by clicking the Add Tab and Remove Tab links in the Properties window. This link appears only when the TabControl is selected.

On the Pocket PC the tabs will be displayed at the bottom of the TabControl . On Windows CE the tabs are displayed above the TabControl . Also, on the Pocket PC the TabControl will always be located in the upper-left corner of its container control. You can work around this by adding the TabControl to a Panel control and then placing the Panel control appropriately.

Once you have added TabPage s to the TabControl , you can add controls to each TabPage . To make the TabPage visible in the designer, click the TabPage 's tab, just as a user would to view the page.

The TabControl exposes the SelectIndex property to determine which TabPage is currently selected. When this property changes, a SelectedIndexChanged event is raised.

Figure 3.27 shows the four different tab pages of the MemberBrowser application. This application displays the fields, properties, and methods of a given type. Here is the code for the SelectedIndexChanged event handler for this application. The complete code can be found with the code samples for this book.

 C# private void tpAssembly_SelectedIndexChanged(object sender,         System.EventArgs e) { switch(this.tpAssembly.SelectedIndex) {   case 1: // Load Fields     LoadFields();     break;   case 2: // Load Properties     LoadProperties();     break;   case 3: // Load Methods     LoadMethods();     break;   } } VB Private Sub _         tpAssembly_SelectedIndexChanged(sender As object,         e As System.EventArgs) _ Handles tpAssembly.SelectedIndexChanged   If Me.tpAssembly.SelectedIndex = 1 Then     LoadFields()   Else If Me.tpAssembly.SelectedIndex = 2 Then     LoadProperties()   Else If Me.tpAssembly.SelectedIndex = 3 Then       LoadMethods()   End If End Sub 

Figure 3.27. This application showcases the TabControl control running on the Pocket PC 2002 emulator.