TopicBar Item Types

C1WebTopicBar contains three basic types of items: Link, Custom Content, and Separators.

Link Items

Link items are derived from the base class C1WebLinkItem. C1WebTopicBar's link items can be easily configured to represent a set of links by using the NavigateUrl property to set links for each item. Please remember that like menu items you can't specify both a ClientScripts and a NavigateUrl for the same link item.

To access the NavigateUrl property using the C1WebTopicGroup Collection Editor, use the following steps:

1. Right-click on C1WebTopicBar and select Edit Groups from its C1WebTopicBar Tasks menu. The C1WebTopicGroup Collection Editor appears.

2. Click on the ellipsis button next to the Items property. Clicking on the Items property exposes the C1WebTopicBarItem Collection Editor. Click on the Add button and select C1WebTopicBarItem from its drop-down menu.

3. Expand the Appearance node in the Link item properties window.

There are five styles and states for the link items. Each style and state is determined by its property settings for Enabled and Selected. You can create styles for Normal, Mouse-Over, Selected, Mouse-Over Selected, and Disabled states through the designer or through code, simply by assigning the appropriate style for the desired state

The following table shows the type of style object and property settings used to define the various states for link items:

Style	State	Property Settings
ItemStyle	Normal	Enabled = True, Selected = False, mouse doesn't hover over item.
MouseOverItemStyle	Mouse Over	Enabled = True, Selected = False, mouse hovers over item.
SelectedItemStyle	SelectedState	Enabled = True, Selected = True, mouse doesn't hover over item.
MouseOverSelectedItemStyle	Mouse Over Selected	Enabled = True, Selected = True, mouse hovers over item.
DisabledItemStyle	Disabled	Enabled = False

The style properties inherit from C1WebLinkItem. You can either apply default style settings to all of the items in the C1WebTopicBar or you can apply individual styles to each item.

The item styles listed above are accessible programmatically through C1WebLinkItems object or through the design editor, C1WebTopicGroup Collection Editor.

To access C1WebTopicBar's style properties through the designer

To access C1WebTopicBar's style properties through the C1WebTopicGroup Collection Editor, complete the following steps:

1. Right-click on C1WebTopicBar and select Edit Groups from its C1WebTopicBar Tasks menu. The C1WebTopicGroup Collection Editor appears.

2. Select Group – Group in the tree view and expand the Style node.

To programmatically access C1WebTopicBar's style properties

The following code example shows how to programmatically assign the CSSClass property to the MouseOverItemStyle style type to all of the topic bar items:

· Visual Basic

'Create an instance of the class

Dim topicbar As C1WebTopicBar = New C1WebTopicBar()

topicbar.MouseOverItemStyle.CssClass = "MouseOverMenuLinkItem"

· C#

// create an instance of the class

C1WebTopicBar topicbar = new C1WebTopicBar();

topicbar.MouseOverItemStyle.CssClass = "MouseOverMenuLinkItem";

· Delphi

// create an instance of the class

var

topicbar: C1WebTopicBar;

begin

topicbar := C1WebTopicBar.Create;

topicbar.MouseOverItemStyle.CssClass = "MouseOverMenuLinkItem";

end;

This method can be applied the same way for the remaining style type properties (ItemStyle, SelectedItemStyle, MouseOverSelectedItemStyle, or DisabledItemStyle).

The following code example shows how to programmatically assign the CSSClass property to the MouseOverItemStyle object style type to the first items in the first group of the topic bar:

· Visual Basic

'Create an instance of the class

Dim topicbar As C1WebTopicBar = New C1WebTopicBar()

CType(topicbar.Groups(0).Items(0)).MouseOverItemStyle.CssClass = "MouseOverMenuLinkItem"

· C#

// Create an instance of the class

C1WebTopicBar topicbar = new C1WebTopicBar();

((C1WebLinkItem)topicbar.Groups[0].Items[0]).MouseOverItemStyle.CssClass = "MouseOverMenuLinkItem";

· Delphi

// Create an instance of the class

var

topicbar: C1WebTopicBar;

begin

topicbar := C1WebTopicBar.Create;

((C1WebLinkItem)topicbar.Groups[0].Items[0]).MouseOverItemStyle.CSSClass := "MouseOverMenuLinkItem";

end;

For more information on how to apply styles programmatically, see Defining the GroupStyle and ItemStyle Classes.

Custom Content Items

Custom content items are derived from the base class C1WebContentItem. Each item includes content property. The content property includes built-in editable templates and controls such as a calendar control.

Separators

C1WebTopicBar's items can be displayed as separators which are from the C1WebSeparator object. The user has the option to customize the separators color, size, style, and padding through the SeparatorStyle property.

To access the SeparatorStyles properties using the C1WebTopicGroup Collection Editor, follow the steps below:

1. Right-click on C1WebTopicBar and select Edit Groups from its C1WebTopicBar Tasks menu. The C1WebTopicGroup Collection Editor appears.

2. Click on the ellipsis button next to the Items property. Clicking on the Items property exposes the C1WebTopicBarItem Collection Editor. Click on the Add button and select C1WebSeparator from its drop-down menu.

3. Expand the SeparatorStyle node in the separator properties window.

For more information on separators, see Defining the Separator Style and its Types.