Apply to
Menu, SlideMenu, TabStrip
Overview
This section covers these topics:
Tip: Always try to
use look item to specify
styles.
Navigation Item States and Styles
During run time, an item can be in several states, different styles can be defined
for each state:
|
State |
Style |
Remarks |
| Normal |
NormalStyle |
NormalStyle applies when item is in none of the other states. |
| Hover |
HoverStyle |
This style applies when mouse is positioned over the item. If not set, NormalStyle
is used. |
| Expanded |
ExpandedStyle |
This style applies when item's sub group is expanded. If not set, HoverStyle
is used. |
| Selected |
SelectedStyle |
This style applies when item's Selected
property is set to true. If not set, HoverStyle is used. |
| SelectedHover |
SelectedHoverStyle |
This style applies when item's Selected
property is set to true and mouse is positioned over the item. If not set, SelectedStyle
is used. |
| SelectedExpanded |
SelectedExpandedStyle |
This style applies when item's Selected
property is set to true and item's sub group is expanded. If not set, SelectedHoverStyle
is used. |
| Disabled |
DisabledStyle |
This style applies when item's Disabled
property is set to true. If not set, NormalStyle is used. |
It's very simple to configure styles via control builder, here's a screenshot
for Menu Builder:
Configure Navigation Item Style
Each style property is an
ElementStyle object
which supports three ways to control appearance
settings such as font, padding, border color, background etc:
-
Inline CSS text;
-
CSS class name;
-
Various ElementStyle
properties;
To use inline CSS text, modify CssText
property. Control Builder integrated with Visual Studio.Net provides CSS text editor to
set the property and preview the result immediately.
To bring up CSS editor, click the edit button 
next to the CssText
property: 
To use CSS Class, modify CssClass
property. CSS classes are defined either in a css file specified by CssFile
property, or a block of CSS text specified by CssBlock property.
To use various ElementStyle properties, such as Font
and Paddings, directly change those properties
from the property grid. Note that modifying
these properties indirectly modifies CssText property.
Implement page theme by changing ControlSkinID
property. Implement CSS style theme by changing CssFile
property.
See Look, Skin & Theme for more details.
Configure separator style
Unlike regular navigation item, a separator item
only uses NormalStyle. Any other styles are ignored.
A typical separator style is:
"WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: color"
Color is the color of the separator. At runtime, depending on
containing group's orientation, the actual width or height of
a separator is automatically adjusted to the width or height of the
group's client area. For example, the above style results in
1 pixel wide vertical separators in a horizontal group and
1 pixel high horizontal separators in a vertical group.
Use MARGIN-xxxx CSS attribute to reserve space
around a separator, for example, the Office2003 built-in skin
menu uses this CSS style settings:
MARGIN-LEFT: 30px; WIDTH: 1px; HEIGHT: 1px; BACKGROUND-COLOR: #c5c2b8
MARGIN-LEFT is used to reserve space on the left of the separators so that it does not overlap with
the side bar.