RadControls for Silverlight
Contents

Anytime you implement a RadContextMenu which displays a long list of items, or simply wish to limit the number of items visible in the menu, you can add scrolling functionality to RadContextMenu, and more specifically vertical scrolling. The process to do that is very simple and straightforward. This article will guide you through the process.

Get the Styles

To add a vertical scrollbar in RadContextMenu, you must edit the style for RadContextMenu and the one for RadMenuItem. These styles can be obtained from Expression Blend.

Tip
When you open the parent control for RadContextMenu in Expression Blend, you will not see the menu in the Objects and Timeline browser. To generate a style for the menu, create a dummy blank RadContextMenu by dragging it from the Assets pane. Generate the needed styles. You can then delete the dummy control and use the style upon your RadContextMenu.

Rad Context Menu How To Add Scrolling 01

The style for RadMenuItem contains four templates, depending on the role they have in the menu. For more details on styling the RadMenuitem, please check this article

Note
Please, keep in mind that in order for your RadMenuItemStyle to get applied correctly, you must use the ItemContainerStyle when populating RadContextMenu dynamically. When you populate the menu with static items, use either an ordinary explicit style for each RadMenuItem or an implict style.

Add a ScrollViewer

The next step is to add a ScrollViewer both to the RadContextMenu style and to some of the templates of RadMenuItem. Find the ItemsPresenter in the style for the menu and place it into a ScrollViewer. Then do the same for the TopLevelHeaderTemplate. The latter is, as the name suggests, applied at top level to a menu item which has child menu items. If your Sub Menu items do have third level child menu items, you should add the ScrollViewer to the SubMenuHeaderTemplate as well.

CopyXAML
<ScrollViewer VerticalScrollBarVisibility="Auto">
    <ItemsPresenter Margin="1"/>
</ScrollViewer>

It is important to add two more properties to the ScrollViewer - MaxHeight and Theme. First of all, the height of the ScrollViewer should be limited to a fixed number for it to function properly. Secondly, to maintain a consistent look and feel, the ScrollViewer should be set a theme.

CopyXAML
<ScrollViewer VerticalScrollBarVisibility="Auto" MaxHeight="200" telerik:StyleManager.Theme="{StaticResource Theme}">
    <ItemsPresenter Margin="1"/>
</ScrollViewer>

Finally, the end result will be the display of a themable vertical ScrollBar in RadContextMenu:

Rad Context Menu How To Add Scrolling 02