The ComponentArt MultiPage control works seamlessly with the ComponentArt TabStrip control to create tabbed pages. In fact, you don't need to write any code.

To connect the two controls, you only need to tell the TabStrip which MultiPage it is to control. For example,  MultiPageId="MultiPage1" tells the TabStrip to operate on MultiPage1. When the user clicks the second tab, the second page of the MultiPage appears.

This topic shows how to create an attractive TabStrip that navigates among pages in a MultiPage control. By adding ItemLooks and background graphics, you can create tabs with a Windows XP appearance. The figure below shows the page that you create with this procedure. The optional PageView content in the following procedure shows the rich user interface that you can achieve using the TabStrip, MultiPage, and ASP.NET controls together.

To control a MultiPage control with a TabStrip

1. Add an ASP.NET page called multipgtabXP.aspx to your project.2. In design view, from the toolbox, drag a ComponentArt TabStrip control and drop it on the

design surface.3. Configure the TabStrip as shown in the code below. Note the use of the MultiPageId attribute

that automatically links this TabStrip to the MultiPage control called "MultiPage1".4. <componentart:tabstrip id="TabStrip1"5. CssClass="TopGroup" SiteMapXmlFile="tabDataXP.xml"6. DefaultItemLookId="DefaultTabLook"7. DefaultSelectedItemLookId="SelectedTabLook"8. DefaultDisabledItemLookId="DisabledTabLook"9. DefaultGroupTabSpacing="1"10. ImagesBaseUrl="images/"11. MultiPageId="MultiPage1" runat="server">

</componentart:tabstrip>

12. In HTML view, add two ItemLooks to the TabStrip control by adding the following markup just before the closing </componentart:tabstrip> tag:

13. <itemlooks>14. <componentart:itemlook LookId="DefaultTabLook"

CssClass="DefaultTab"15. HoverCssClass="DefaultTabHover" LabelPaddingLeft="10"

16. LabelPaddingRight="10" LabelPaddingTop="5" LabelPaddingBottom="4"

17. LeftIconUrl="tab_left_icon.gif" RightIconUrl="tab_right_icon.gif"

18. HoverLeftIconUrl="hover_tab_left_icon.gif" RightIconHeight="21"

19. HoverRightIconUrl="hover_tab_right_icon.gif" LeftIconWidth="3"20. LeftIconHeight="21" RightIconWidth="3"/>21. <componentart:itemlook LookId="SelectedTabLook"

CssClass="SelectedTab"22. LabelPaddingLeft="10" LabelPaddingRight="10"23. LabelPaddingTop="4" LabelPaddingBottom="4"24. LeftIconUrl="selected_tab_left_icon.gif"25. RightIconUrl="selected_tab_right_icon.gif"26. LeftIconWidth="3" LeftIconHeight="21"27. RightIconWidth="3" RightIconHeight="21" />

</itemlooks>

28. Add a new XML file called tabDataXP.xml to your project. This supplies the data for the TabStrip control. Include the following content:

[ tabDataXP.xml ]

<SiteMap> <item Text="Web Site" /> <item Text="Connections" /> <item Text="Logging" /></SiteMap>

29. Using Windows Explorer, copy the Windows XP background images for the tabs into your project. By default the images are found in \live_examples\multipage\features\multipage_tabstrip\images.

30. In design view, from the toolbox, drag a ComponentArt MultiPage control and drop it to the right of the TabStrip control. Set the MultiPage's CssClass property to the value MultiPage.

31. In HTML view, just before the closing tag (</componentart:multipage>) of the MultiPage, add the following markup to create three PageViews and their content.

32. <componentart:pageview CssClass="PageContent" runat="server">33. <span class="PageHeader">Page 1</span>34. <br>35. <br>36. <font color="blue">Web Site Settings</font><br>37. <br>38. <table cellspacing="0" cellpadding="3" border="0">39. <tr>40. <td class="PageContent" width="90">Description:</td>41. <td class="PageContent">42. <asp:textbox id="TextBox1" Text="Default Web Site"

width="180" 43. runat="server" /></td>44. <td class="PageContent"></td>45. </tr>46. <tr>47. <td class="PageContent" width="90">IP Address:48. </td>

49. <td class="PageContent">50. <asp:dropdownlist ID="DropDownList1" width="180" Runat="server">51. <asp:listitem Value="All Unassigned">All

Unassigned</asp:listitem>52. <asp:listitem

Value="188.160.141.24">188.160.141.24</asp:listitem>53. <asp:listitem

Value="188.160.141.25">188.160.141.25</asp:listitem>54. <asp:listitem

Value="188.160.141.26">188.160.141.26</asp:listitem>55. </asp:dropdownlist></td>56. <td class="PageContent">57. <asp:button id="Button1" Text="Advanced..." runat="server"

/></td>58. </tr>59. <tr>60. <td class="PageContent" width="90">TCP Port:</td>61. <td class="PageContent">62. <table cellspacing="0" cellpadding="0" border="0"

width="100%">63. <tr>64. <td>65. <asp:textbox id="TextBox2" Text="80" runat="server"

width="50" /></td>66. <td class="PageContent" width="50">SSL Port:67. </td>68. <td align="right" width="50">69. <asp:textbox id="TextBox3" Text="" runat="server" width="50"

/></td>70. </tr>71. </table>72. </td>73. <td class="PageContent"></td>74. </tr>75. </table>76. </componentart:pageview>77. <componentart:pageview CssClass="PageContent" runat="server">78. <span class="PageHeader">Page 2</span>79. <br>80. <br>81. <font color="blue">Connection Settings</font><br>82. <br>83. <table cellspacing="0" cellpadding="3" border="0">84. <tr>85. <td class="PageContent">86. Connection Timeout:    87. <asp:textbox id="TextBox4" Text="900" runat="server"

width="80" />88. seconds89. </td>90. </tr>91. <tr>92. <td class="PageContent">93. <asp:checkbox id="CheckBox1" Text="HTTP Keep-Alives Enabled"94. Checked="true" runat="server" />

95. </td>96. </table>97. </componentart:pageview>98. <componentart:pageview CssClass="PageContent" runat="server">99. <span class="PageHeader">Page 3</span><br><br>100. <font color="blue">Logging Settings</font><br><br>101. Active Log Format: <br>102. <asp:dropdownlist ID="DropDownList2" Width="250" Runat="server">103. <asp:listitem Value="W3C Extended Log File Format">W3C

Extended Log File Format104. </asp:listitem>105. <asp:listitem Value="Microsoft IIS Log File Format">Microsoft

IIS Log File Format106. </asp:listitem>107. <asp:listitem Value="NCSA Common Log File Format">NCSA Common

Log File Format108. </asp:listitem>109. </asp:dropdownlist> 110. <asp:button id="Button2" Text="Properties..." runat="server" />

</componentart:pageview>

111. Add a style sheet file called tabXP.css to your project. Include the following content.112. .TopGroup113. {114. z-index:99;115. position:relative;116. }117. .DefaultTab118. {119. color:black;120. background-image: url(images/tab_bg.gif);121. font-family:MS Sans Serif, Verdana;122. font-size:10px;123. cursor:default;124. }125. .DefaultTabHover126. {127. color:black;128. background-image: url(images/hover_tab_bg.gif);129. font-family:MS Sans Serif, Verdana;130. font-size:10px;131. cursor:default;132. }133. .SelectedTab134. {135. color:black;136. background-image: url(images/selected_tab_bg.gif);137. font-family:MS Sans Serif, Verdana;138. font-size:10px;139. cursor:default;140. }141. .MultiPage142. {143. background-color:White;144. border: 1px solid #919B9C;

145. width:487px;146. height:200px;147. position:relative;148. padding:10px;149. top:-3px;150. left:1px;151. z-index:98;152. }153. .PageContent154. {155. font-family:MS Sans Serif, Verdana;156. font-size:10px;157. }158. .PageHeader159. {160. font-size:22px;161. font-weight:bold;162. letter-spacing:-0.2mm;163. font-family: verdana;164. color: #3F3F3F;165. margin-top:0px;166. margin-bottom:0px;

}

167. Build and browse the page. Select the tabs to view the pages in the MultiPage control.

See Also