Controls You Can Use on Web Forms ASP.NET IE WebControls TabStrip WebControl
Even with the simplest declarative authoring, the TabStrip control renders with acceptable default styles.
The TabStrip, though, includes style and property attributes for fully customizing the appearance of the control in various ways, without the need for complex coding. Defining properties on the TabStrip element is all that is required.
Essentially, the TabStrip control derives from the base WebControl class and as such inherits all properties of that class. Some of these properties, such as BorderStyle, Height, and Width, apply to the control as a whole, while others, such as Font, apply to the child nodes of the TabStrip as well.
In addition, the child nodes of a TabStrip ( Tab and TabSeparator elements ) can be in any of three states: default, hover, or selected. The TabStrip has its own set of style properties which use CSS ( Cascading Style Sheets ) to specify styles for the different states.
For detailed information on setting specific style attributes, see this workshop’s reference on Cascading Style Sheets.
In addition, the TabStrip includes support for specifying different images that apply to TabSeparator elements for different states.
| State |
Description |
TabSeparator Property |
| Default |
Sets the URL of the image for all separators of inactive tabs. |
SepDefaultImageUrl |
| Hover |
Sets the URL of the image for the separator when the mouse is positioned over the associated tab. |
SepHoverImageUrl |
| Selected |
Sets the URL of the image for the separator of the active tab. |
SepSelectedImageUrl |
The following sections briefly describe how the appearance of TabStrip controls based on their state can be defined, using CSS.
Designing a Text-based TabStrip Designing an Image-based TabStrip