Creating Tabbed Dialog Boxes

---

Windows 95 was the first version of Windows to introduce a tabbed interface. Since then, tabs have been unanimously adopted as a primary interface element. Tabs provide two primary benefits: the logical grouping of controls and the reduction of required screen space. Although tabs may look complicated, they are, in fact, extremely easy to build and use.

Create a new Windows Application named Tabs Example. Change the name of the default form to reference fclsTabs instead of Form1, set its Text property to Tabs Example, and modify the Main() entry point to fclsTabs. Next, add a new Tab control to your form by double-clicking the TabControl item in the toolbox. At first, the new control looks more like a panel than a set of tabs because it has no tabs. Set the Tab control's properties as follows :

Property	Value
Name	tabMyTabs
Location	8,16
Size	272,208

The tabs on a Tab control are part of the control's TabPages collection. Click the TabPages property of the Tab control in the Properties window and then click the small button that appears. C# then shows the TabPage Collection Editor. As you can see, your Tab control has no tabs. Click Add now to create a new tab (see Figure 8.3).

Figure 8.3. New Tab controls have no tabs; you must create them.

Each tab in the collection is called a page. C# names each new page with TabPageX, in which X is a unique number. It's usually not necessary to change the name of a page, but you can if you choose. Each page has a number of properties, but the property you'll be concerned with most is the Text property because the value in the Text property is the text the user will see on the tab. Change the Text property of your tab page to Contacts, and then click Add to create a second page. Change the Text property of the second page to Appointments and click OK to close the dialog box. Your Tab control now has two tabs (pages).

A shortcut to adding or removing a tab is to use the shortcuts provided in the description pane at the bottom of the Properties window.

Each page on a Tab control acts as a container, much like the Panel and Group Box controls. This is why you can't drag the Tab control by clicking in the middle of it; to drag a container control, you have to click and drag the dotted border around the control. Add a text box to the first tab now by dragging the TextBox item from the toolbox and dropping in on the tab page. After it's on the page, drag it to approximately the center of the page. Next, click the Appointments tab, the same as if you were a user switching tabs. As you can see, the Appointments tab comes to the front, and the text box is no longer visible. C# has hidden the first page and shown you the second. Drag a check box from the toolbox and drop it on the tab page, and then click Contacts once more. Again, C# handles the details of showing and hiding the tab pages; you no longer see the check box, but you do see the text box (see Figure 8.4).

Figure 8.4. The Tab control makes it easy to create a tabbed interface.

By understanding two simple programming elements, you'll be able to do 99% of what you need to with the Tab control. The first is that you will, at times, need to know which tab is selected. The SelectedIndex property of the control (not of the TabPages collection) sets and returns the index of the currently selected tab ”0 for the first tab, 1 for the second, and so forth. The second thing you need to know is how to tell when the user switches tabs. The Tab control has a SelectedIndexChanged event, which fires whenever the selected tab is changed. In this event, you can check the value of SelectedIndex to determine the tab that has been selected. The only tricky part here is that each tab page has its own set of events, so to get to the events of the Tab control itself, you'll have to use the techniques discussed in Hour 4, "Understanding Events."

---

Top