ComponentOne MultiPage for ASP.NET AJAX: MultiPage for ASP.NET AJAX Task-Based Help > Adding Navigation to a C1MultiPage Control > Using a C1TabStrip for Navigation

Using a C1TabStrip for Navigation

You can add tabbed navigation by using the C1MultiPage control in coordination with the C1TabStrip control. This topic illustrates how to use a C1MultiPage control with a C1TabStrip control.

Step 1:  Add a C1MultiPage Control and Create Pages

To add a C1MultiPage control and create pages, complete the following:

1.   Add a C1MultiPage control to your project.

2.   Click C1MultiPage's smart tag () to open the C1MultiPage Tasks menu and select MultiPage Designer.

            The C1MultiPage Designer Form opens.

3.   Use the Add Child Item button  to add three pages to your C1MultiPage. Note that the new pages are named as follows:

      C1PageView1

      C1PageView2

      C1PageView3

4.   Click OK to leave the C1MultiPage Designer Form.

Step 2:  Add a C1TabStrip Control and Create Tabs

To add a C1TabStrip control and create tabs, complete the following:

1.   Add a C1TabStrip control to your project.

2.   Click C1TabStrip's smart tag () and select TabStrip Designer from the menu.

            The C1TabStrip Designer Form opens.

3.   Use the Add Child Item button  to add three tabs to your C1TabStrip. Note that the new tabs are named as follows:

      Tab1

      Tab2

      Tab3

Step 3:  Bind the C1TabStrip Control to the C1MultiPage Control

To bind the C1TabStrip control to the C1MultiPage control, complete the following:

1.   While in the C1TabStrip Designer Form, select C1TabStrip1 in treeview to reveal its list of properties.

2.   Locate the MultiPageID property and select C1MultiPage1 from its drop-down list.

 

     

 

3.   Select Tab01 from the treeview, locate the PageViewID property, and enter "C1PageView1" into its text box.

 

     

 

4.   Repeat the previous step for Tab02 and Tab03, only this time you will enter the following information into their text boxes.

      Tab2 – "C1PageView2"

      Tab3 – "C1PageView3"

5.   Press OK to leave the C1TabStrip Designer Form and then run the project.

This Topic Illustrates the Following:

A C1MultiPage control can be used with a C1TabStrip just by setting a few properties. Once you've run your project, click the second tab of the C1TabStrip and observe that the second page of the C1MultiPage comes into view. The following image illustrates a C1MultiPage that has been bound to a C1TabStrip:

 

 


Send comments about this topic to ComponentOne.
Copyright © 1987-2010 ComponentOne LLC. All rights reserved.