How to add a scrollbar to Telerik RadMenu for Silverlight

As we received a lot of questions on how to add a ScrollViewer to the RadMenu control for Silverlight, in this blog post I am going to explain how you can achieve this.

Adding a ScrollViewer to RadMenu for Silverlight can be easily accomplished using Expression Blend.

Step 1. Create a new Silverlight 3 Application.

Step 2. Add references to Telerik.Windows.Controls.dll and Telerik.Windows.Controls.Navigation.dll in your project.

Step 3. Drag RadMenu and RadMenuItem controls from the Toolbox and drop them on the design surface.

 

Step 4. Right-click on one of the RadMenuItems and select EditStyle or select it and from the menu by choosing Object -> Edit Style -> Edit a Copy.

 

You will be prompted for the name of the style and where it should be placed within your application:

After that, Blend will create all the needed styles and templates for you.

Step 5. Open the XAML code and find the ItemsPresenter element. It is located in the TopLevelHeaderTemplate and SubMenuHeaderTemplate templates. This element is used to specify the place in the control’s visual tree where the ItemsPanel (defined by the ItemsControl) will be added.

Step 6.  After locating the ItemsPresenter(s), wrap each one of them into a ScrollViewer:

 

Set MaxHeight on each ScrollViewer:

 

 

 

To enable scrolling in the menu you should set the ScrollViewerExtensions.EnableMouseWheel attached property to true

 

If you want to set a theme, you should use:

 

 

 

The final result will be looking like this:

Here is an example project which includes the above implementation of the RadMenu and ScrollViewer. For more information about the RadMenu and the ScrollViewer control please see Telerik’s online demos and help documentation.