Styling the RadMenuItem

The RadMenuItem can be styled by creating an appropriate Style and setting it to the Style property of the control.

You have two options:

  • To create an empty style and set it up on your own.

  • To copy the default style of the control and modify it.

This topic will show you how to perform the second one.

Modifying the Default Style

Load your project in Expression Blend and open the User Control that holds the RadMenu. There are two ways to copy the default style for the RadMenuItem:

  • If you have static RadMenuItems, you can select one of them in the 'Objects and Timeline' pane and choose *Object -> Edit Style -> Edit a Copy *from the menu. After that you have to apply the generated style to the other RadMenuItems.

  • You can also use the ItemContainerStyle property of the RadMenu, when you have dynamic items. In this way you have to set the style only once and it will be applied to all of the RadMenuItems. To copy the default style via the ItemContainerStyle property select the RadMenu holding the items and choose *Object -> Edit Additional Styles -> Edit Generated Item Container (ItemContainerStyle) -> Edit a Copy *from the menu.

When using ItemContainerStyle with static items, it will get applied only to the direct children of the RadMenu - the top-level items. If you want their child items to have the same style you have to manually set the ItemContainerStyle property of their parents.
When using the ItemContainerStyle with dynamic items, its value gets inherited through the hierarchy thanks to the HierarchicalDataTemplate. You are free to break the inheritance, when needed, by using multiple nested HierarchicalDataTemplates and by setting the ItemContainerStyle property of each of them. To learn more about using RadMenu with dynamic data read here.
Choosing the style for an item depending on its position in the hierarchy can be done by using the ItemContainerStyleSelector property. Read more about selectors here.

You will be prompted for the name of the style and where to be placed.

If you choose to define the style in Application, it would be available for the entire application. This allows you to define a style only once and then reuse it where needed.

After clicking 'OK', Expression Blend will generate the default style of the RadMenuItem control in the Resources section of your User Control. The properties available for the style will be loaded in the 'Properties' pane and you will be able to modify their default values. You can also edit the generated XAML in the XAML View or in Visual Studio.

If you go to the 'Resources' pane, you will see an editable list of resources generated together with the style and used by it. In this list you will find the brushes, styles and templates needed to change the visual appearance of the RadMenuItem. Their names indicate to which part of the RadMenuItem's appearance they are assigned.

  • RadMenuTabMargin - a thickness that represents the margin of the top-level items of the RadMenu.

  • RadMenuTabBackground - a brush that represents the background color of the top-level items, when the mouse is over them (used when the ClickToOpen is set to False).

  • RadMenuTabBorder - a brush that represents the border color of the top-level items.

  • RadMenuTabBorderThickness - a thickness that represents the width of the top-level item's borders.

  • RadMenuTabCornerRadius - a CornerRadius that represents the radius of the top-level item's corners.

  • RadMenuTabContentMargin - a thickness that specifies the margin of the top-level item's content to the edges of the item.

  • RadMenuTabContentPadding - a thickness that specifies the margin of the top-level item's content to its own edges.

  • RadMenuPopUpOuterBorder - a brush that represents the color of the outer border of the Popup.

  • RadMenuPopUpOuterBorderThickness - a thickness that represents the width of the Popup's outer border.

  • RadMenuPopUp - a brush that represents the background color of the Popup.

  • RadMenuPopUpInnerBorder - a brush that represents the color of the inner border of the Popup.

  • RadMenuPopUpInnerBorderThickness - a thickness that represents the width of the Popup's inner border.

  • RadMenuPopUpLeftColumnInnerBorder - a brush that specifies the outer border color of the column on the left side of the Popup.

  • RadMenuPopUpLeftColumnBackground - a brush that specifies the background color of the column on the left side of the Popup.

  • RadMenuPopUpLeftColumnOuterBorder - a brush that specifies the inner border color of the column on the left side of the Popup.

  • RadMenuPopUpInnerBorderCornerRadius - a CornerRadius that represents the radius of the Popup inner border's corners.

  • RadMenuPopUpOuterBorderCornerRadius - a CornerRadius that represents the radius of the Popup outer border's corners.

  • RadMenuNavigationDisabledBackground - a brush that represents the color of the disabled overlay of the item.

  • RadMenuTabBorder_pressed - a brush that represents the border color of the top-level items, when they are selected.

  • RadMenuTabBackground_pressed - a brush that represents the background color of the top-level items, when they are selected.

  • TopLevelHeaderTemplate - the template applied to the item, when it is of type Top-Level Header.

  • TopLevelItemTemplate - the template applied to the item, when it is of type Top-Level Item.

  • RadMenuNavigationMargin - a thickness that specifies the margin of the submenu items to the Popup.

  • RadMenuNavigationCornerRadius - a CornerRadius that represents the radius of the submenu item's corners.

  • NavigationMouseoverFill - a brush that represents the background color of the submenu items, when they are highlighted or selected

  • NavigationMouseoverStroke - a brush that represents the border color of the submenu items, when they are highlighted or selected.

  • SubMenuHeaderTemplate - the template applied to the item when it is of type Submenu Header.

  • SubMenuItemTemplate - the template applied to the item, when it is of type Submenu Item.

  • RadMenuItemSeparatorTopStroke - a brush that represents the color of the top separator part.

  • RadMenuItemSeparatorBottomStroke - a brush that represents the color of the bottom separator part.

  • SeparatorTemplate - the template applied to the item, when it is of type Separator Item.

  • RadMenuItemStyle - the Style generated for the RadMenuItem.

Changing the value of the resources can be done by clicking on the color indicator or the icon next to them.

Modify the resource to bring the desired appearance of the RadMenuItem.

Here is a snapshot of the result.

See Also