ComponentOne TabStrip for ASP.NET AJAX: TabStrip for ASP.NET AJAX Quick Start > Step 3 of 3: Adding the C1MultiPage Control

Step 3 of 3: Adding the C1MultiPage Control

In the next set of steps we'll use the C1MultiPage control with the C1TabStrip control to create six C1PageView elements for each of the tabs.

1.   Navigate to the Visual Studio Toolbox and add the C1MultiPage control to your page.

2.   In design view, select the C1MultiPage control and click on its smart tag to open the C1MultiPage Tasks menu and click MultiPage Designer. The C1MultiPage Designer Form appears.

3.   In the C1MultiPage Designer Form select C1MultiPage1, click the Add Child Item button, and select PageView. Repeat this step five more times to add a total of six PageViews to the C1MultiPage control.

4.   Switch to Source view and locate the <C1PageView> tag for C1PageView1 and use the img tag to add the advanced.gif image to the first page of the C1MultiPage control. The source code should appear like the following.

<cc2:C1PageView runat="server" ID="C1PageView1"><img src="img/advanced.gif"/> </cc2:C1PageView>

5.   Add more images to the remaining C1PageViews. The source code should appear like the following:

<cc2:C1PageView runat="server" ID="C1PageView2"><img src="img/automaticupdates.gif"/></cc2:C1PageView>

<cc2:C1PageView runat="server" ID="C1PageView3"><img src="img/remote.gif"/></cc2:C1PageView>

<cc2:C1PageView runat="server" ID="C1PageView4"><img src="img/general.gif"/></cc2:C1PageView>

<cc2:C1PageView runat="server" ID="C1PageView5"><img src="img/computername.gif"/></cc2:C1PageView>

<cc2:C1PageView runat="server" ID="C1PageView6"><img src="img/hardware.gif"/></cc2:C1PageView>

Next we will use the PageViewID property to reference the appropriate PageViewID to each unique tab in the C1TabStrip control.

6.   Open the C1TabStrip Designer Form and select C1TabStrip1 in the treeview. Navigate to the MultiPageID property and set it to C1MultiPage1.

7.   Open the C1TabStrip Designer Form and select the Advanced tab in the treeview. Navigate to the PageViewID property and enter "C1PageView1".

 

8.   Set the PageViewID properties for the remaining five tabs to the following:

      Automatic Updates to "C1PageView2"

      Remote to "C1PageView3"

      General to "C1PageView4"

      Computer Name to "C1PageView5"

      Hardware to "C1PageView6"

9.   Save and run your project.


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