Version

Header and Content Panes

WebTab™ of allows you to customize the header and the content pane of each tab item depending on your application. By setting the ContentTabItem object’s ImageUrl and Text properties you can set the image and text in the header of a tab. The image can be aligned before or after the text by setting the ImageAlignment to one of the members of the TabImageAlignment enumeration. You can also set the alt text of the image and tooltip of the tab by using the ContentTabItem object’s ImageAltText and ToolTip properties.

In Visual Basic:

Dim Item1 As New ContentTabItem()
Item1.Text = "tab1"
Item1.ImageUrl = "~\images\aspNet.gif"
Item1.ImageAlignment = TabImageAlignment.Trailing
Item1.ImageAltText = "IG ASP.NET logo"
Item1.ToolTip = "ASP.NET"

In C#:

ContentTabItem Item1 = new ContentTabItem();
Item1.Text = "tab1";
Item1.ImageUrl = "~\\images\\aspNet.gif";
Item1.ImageAlignment = TabImageAlignment.Trailing;
Item1.ImageAltText = "IG ASP.NET logo";
Item1.ToolTip = "ASP.NET";

The ContentTabItem object’s Text property allows usage of html tags, so besides text and image defined by Text and ImageUrl properties, extra objects can be inserted into the tab labels.

In HTML:

<ig:ContentTabItem Text="IMG object: &lt;img src='images/close.gif' /&gt;" ></ig:ContentTabItem>

WebTab also allows you to use a close button, so that the end user can close a tab. A close button can be displayed on all the tabs by setting the CloseButton object’s Enabled property to True. By default, the close button for the tabs is disabled.

In HTML:

<ig:WebTab ID="WebTab1" runat="server" Height="200px" Width="300px">
        <CloseButton Enabled="True" />
</ig:WebTab>

In Visual Basic:

WebTab1.CloseButton.Enabled = true

In C#:

WebTab1.CloseButton.Enabled = true;

The content pane of the WebTab can be customized by configuring various properties of the TabContentPane class. TabContentPane object’s AutoSize property when set to True allows the WebTab to adjust itself to fit the content in the pane.

In HTML:

<ContentPane AutoSize="True">
</ContentPane>

In Visual Basic:

WebTab1.ContentPane.AutoSize = true

In C#:

WebTab1.ContentPane.AutoSize = true;