Creating Tabbed Dialog Boxes


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

You're going to add a set of tabs to your Options dialog box in your Picture Viewer program. In this case, the tabs will be overkill because you won't have much on them, but the point is to learn how they work, so follow these steps:

1.

Start by opening the Picture Viewer project you completed in Hour 7.

2.

Double-click frmOptions.cs in the Solution Explorer to display it in the designer.

3.

Next, add a new Tab control to your form by double-clicking the TabControl item in the Toolbox (it's located in the Containers toolbox category). The Tab control defaults to having two tabs, which happens to be what you need for this example. Set the Tab control's properties as follows:

Property

Value

Name

tabOptions

Location

2,2

Size

202,94


4.

The tabs that appear on a Tab control are determined by 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. Visual C# shows the TabPage Collection Editor. As you can see, your Tab control has two tabs by default (see Figure 8.3).

Figure 8.3. Use the TabPage Collection Editor to define tabs.


5.

Each tab in the collection is referred to as a page. Visual C# names each new page TabPageX, where x is a unique number. Although you technically don't have to change the name of a page, it's easier to work with a Tab control if you give each tab a meaningful name, such as pgeGeneralPage, pgePreferencesPage, and so forth. TabPage1 is selected by default, and its properties appear to the right. Change the Name of the tab to pgeGeneral and set its Text property (which is what actually appears on the tab) to General (you might want to view the properties alphabetically to make this easier).

6.

Click TabPage2 in the list on the left to select it; then change its Name property to pgeAppearance and set its Text property to Appearance.

7.

Click OK to save your changes.

Your Tab control now has two properly defined tabs (pages) (see Figure 8.4).

Figure 8.4. Each tab should have meaningful text.


Did you Know?

A quick way to add or remove a tab is to use the shortcuts provided in the description pane at the bottom of the Properties window. If the shortcuts aren't visible, you can show them by right-clicking somewhere in the properties window and choosing Commands from the shortcut menu.


Each page on a Tab control acts as a container, much like a Panel or Group Box control. 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 small image with the four arrows that appears over the General tab (refer to Figure 8.4). Follow these steps to move the options controls you created in Hour 7 to your new tabs:

1.

Click the group box grpDefaultBackcolor to select it; then right-click it and choose Cut.

2.

Click the Tab control once to select it.

3.

Now that the Tab control is selected, click the Appearance page to switch to the second page of the Tab control and then click the center of the Appearance page.

4.

Right-click in the center of the Appearance page and choose Paste.

5.

Click the General tab to return to the first page of the Tab control.

6.

Get the Tab control out of the way now by dragging the move image (the little square with the directional arrows). Drag the tabs to the bottom of the form.

7.

Click the User Name Label control to select it; then hold down the Shift key and click the User Name text box and the Prompt to confirm on exit check box.

8.

Press Ctrl+X to cut the selected controls from the form.

9.

Click the Tab control once to select it.

10.

Right-click in the center of the General tab and choose Paste.

11.

Set the Tab control's Location property to 12,12 and its Size property to 287,145.

12.

Click and drag the controls on the Appearance tab so they appear roughly centered on the tab (see Figure 8.5).

Figure 8.5. Tabs make it easy to group related controls.


To wrap up the Tab control, click the Appearance tab now to switch to the Appearance page and then move the group box to the middle of the page (by dragging and dropping it). When you're satisfied with its location, click the General tab again to switch to the first page.

By understanding two simple programming elements, you'll be able to do 99% of what you need to with the Tab control. The first element is that you'll need to know which tab is selected at runtime. The SelectedIndex property of the control (not the TabIndex property) 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 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's been selected by the user.

Perhaps the trickiest issue with the Tab control is that each tab page has its own set of events. If you double-click the tabs themselves, you'll get a set of global events for the Tab control (this is where you'll find the SelectedIndexChanged event). If you double-click a page on the tabs, you'll get a unique set of events for that page; each page has its own set of events.

Feel free to run your project now and check out how your tabs work. When you're finished, be sure to save your project.




Sams Teach Yourself Microsoft Visual C# 2005 in 24 Hours, Complete Starter Kit
Sams Teach Yourself Visual C# 2005 in 24 Hours, Complete Starter Kit
ISBN: 0672327406
EAN: 2147483647
Year: N/A
Pages: 248
Authors: James Foxall

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net