Tab Control - Templates

This sample demonstrates the use of template technology found in the ASPxPageControl. The look of each tab element of the page control can be modified by creating a specific template which defines how the tab will be rendered by a client browser. In this demo, templates of type TabTemplate and ActiveTabTemplate are used to define non-typical appearances for individual tabs (tabs with rounded edges).

In order to display tabs with rounded edges, the image that represents a single tab should be divided into three sections as shown below (note that pictures for a selected tab should be 1 pixel higher).

The tab template implemented in this demo is defined by using a table with three cells. Each cell contains the corresponding portion of the image. The left and right sections of the image are represented by entire images. The middle portion is used as a background image which is tailed horizontally according to the length of the tab's content (which is, in particular, the text taken from the tab's Text property during binding the template's child controls).

Refer to ASPX code to see how a ActiveTabTemplate is defined by using the described approach.