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. seconds
89. </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 Format
104. </asp:listitem>
105. <asp:listitem Value="Microsoft IIS Log File Format">Microsoft
IIS Log File Format
106. </asp:listitem>
107. <asp:listitem Value="NCSA Common Log File Format">NCSA Common
Log File Format
108. </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. .TopGroup
113. {
114. z-index:99;
115. position:relative;
116. }
117. .DefaultTab
118. {
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. .DefaultTabHover
126. {
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. .SelectedTab
134. {
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. .MultiPage
142. {
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. .PageContent
154. {
155. font-family:MS Sans Serif, Verdana;
156. font-size:10px;
157. }
158. .PageHeader
159. {
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