Visual States
Like most WPF controls, the RadMenu and the RadMenuItem use the VisualStateManager to modify their appearance depending on a condition. This topic will explain the states of the both and will focus on the states of the RadMenuItem and how they are used from the different templates.
RadMenu Visual States
The RadMenu control exposes several common states, grouped as follows:
-
CommonStates
Normal - the normal state of the control.
Disabled - the state of the control, when it gets disabled.
-
FocusStates
Focused - the state of the control, when it gets focused.
Unfocused - the state of the control, when it loses focus.
RadMenuItem Visual States
The RadMenuItem exposes several states, grouped as follows:
-
CommonStates
Normal - the normal state of the control.
Highlighted - the state of the control, when the mouse is over it.
Disabled - the state of the control, when it is disabled.
Focused - the state of the control, when its sub items are expanded.
-
CheckStateGroup
Checked - the state of the control, when it gets checked (applied only when the control is marked as checkable).
HideIcon - the state of the icon, when there is no icon specified.
Unchecked - the state of the control, when it gets unchecked (applied only when the control is marked as checkable).
-
FocusStates
- Unfocused - the state of the control, when it isn't focused.
Only one state of a group can be active. For example, if the control goes into the Checked state, it cannot be in the HideIcon state too. By default the Checked state should display a mark before the item, so it should hide the icon no matter if it is null or not. If the item is not checked and the icon is not defined, the HideIcon state will get activated and the empty icon will get hidden.
The several templates of the RadMenuItem don't handle all of the states, but only those, which they need. When generated through Expression Blend, the logic placed in these templates also gets generated. In the following table you can see which states the specific template makes use of.
| Templates\States | Normal | Highlighted | Disabled | Focused | Checked | HideIcon | Unchecked | Unfocused |
|---|---|---|---|---|---|---|---|---|
| Top-Level Header |  |
|
|
|
|
|
|
 |
| Top-level Item | |
|
|
|
|
|
|
|
| Submenu Header | |
|
|
|
|
|
|
|
| Submenu Item | |
|
|
|
|
|
|
|
| Separator | |
|
|
|
|
|
|
|
Note that, when using the Submenu Header Template the item indicates when the mouse is over it via the Focused state. On the other hand, the Submenu Item Template uses the Highlighted state.
The Top-Level Templates make use of both of the states, depending on the opening mode, e.g. when it is set to click-to-open the Highlighted is used for mouse over and the Focused - for click. Otherwise the item goes in the Focused state at the mouse over action and no logic for the Highlighted state is needed.
The Submenu Item can't enter the Focused state, because it has no children to display. That's why it uses the Highlighted state. The Separator Item doesn't need to implement states' animation, because it should not respond to the user's actions.