Scrollable Menu – Workaround with a Multi-Column Menu and RadControls for Silverlight

RadMenu and RadContextMenu for Silverlight cannot automatically scroll their items if their height exceeds a certain height. We are planning to implement this feature in the near future, but at the moment there are two workarounds for the developers: override the RadMenu control template and add ScrollViewer controls around the ItemsPresenters, or customize the ItemsPanel of the RadMenuItem controls, so the sub-items are displayed in columns. The second option is much easier and looks good enough:

The main idea is to replace the RadMenuItem ItemsPanel, that is a StackPanel by default, with a WrapPanel. To set the ItemsPanel property of all RadMenuItems you need to set the ItemContainerStyle property of RadMenu or RadContextMenu:

<Style x:Key="ItemStyle" TargetType="telerikNavigation:RadMenuItem"> <Setter Property="ItemsPanel"> <Setter.Value> <ItemsPanelTemplate> <telerik:RadWrapPanel Orientation="Vertical" 

 MaxHeight="300" /> </ItemsPanelTemplate> </Setter.Value> </Setter> </Style>
...

<telerikNavigation:RadMenu ItemContainerStyle="{StaticResource ItemStyle}" ... />

The important thing here is the MaxHeight property of the wrap panel – if it is missing, the wrap panel will behave like an ordinary StackPanel.

The attached application also demonstrates how to customize both data-bound and declared in XAML RadMenu.