Start Visual Studio. Click File -> New -> Web Site.
Select the ASP.NET Web Site and name the site as TabStripSample.
Open Default.aspx in source mode. Expand the
"ComponentArt Web UI 2010.1 for ASP.NET" node in toolbox. Drag the
TabStrip control and drop it into the page. You can also manually type it, but
dragging the control for the first time adds the following reference to the
page.
<%@ Register Assembly="ComponentArt.Web.UI" Namespace="ComponentArt.Web.UI"
TagPrefix="ComponentArt" %>
Now the control is placed in the page. We need to set some
other properties of the control.
How to Create Multiple Tabs Using MultiPage Control
ComponentArt's MultiPage control is used to create tabs for
the TabStrip control. Inside MultiPage control we can create many PageViews. So
the MultiPage control acts as the main placeholder for all the tabs and the
PageView control acts as one tab. We can create as many PageViews inside one
MultiPage control. Inside the PageView control we can put any HTML content to
create the tab.
Specify an ID to the MultiPage control. The TabStrip control
has a property called "MultiPageId". Set this property to the ID of
the MultiPage control.
Now the HTML content for our Tabs is ready. Now we have to
create the Tab names or the headers for the respective PageView.
How to Set the Tab Names
There are 2 ways of setting the Tab names to your tabs.
Setting Tab Names by Binding to an external XML
file
Create an XML file which will hold all the required Tab
names or the Headers. Write the following XML code into the file.
<SiteMap>
<item Text="Employee Details" />
<item Text="Employee Contact" />
<item Text="Employee Projects" />
</SiteMap>
I have named the root node as SiteMap but you can specify
any other name. But the starting and ending node names should be same. Inside
the root node there are some item nodes. The "item" node has a property
called "Text". This property's value will be set as the Tab's name or
header. While creating the XML nodes you need to keep one thing mind that the
order of the PageView control and the "item" nodes should match.
Otherwise "Employee Details" tab will show "Employee
Contact" or "Employee Projects".
By Specifying Under the TabStrip Control
There is another way of creating the Tab names. You can
specify them directly under the TabStrip control like below.
<Tabs>
<ComponentArt:TabStripTab runat="server"
Text=" Employee Details "></ComponentArt:TabStripTab>
<ComponentArt:TabStripTab runat="server"
Text=" Employee Contact "></ComponentArt:TabStripTab>
<ComponentArt:TabStripTab runat="server"
Text=" Employee Projects "></ComponentArt:TabStripTab>
</Tabs>
You have to choose either of this method.
